@visactor/vtable-gantt 1.22.0 → 1.22.1

package/dist/vtable-gantt.js

@@ -24643,12 +24643,12 @@
         const parsedParams = this.parseParams(params, isTimeline);
         return animate = isTimeline ? this.executeTimelineItem(parsedParams, graphic, index, count) : this.executeTypeConfigItem(parsedParams, graphic, index, count), animate && this._trackAnimation(animate), animate;
       }
-      stop(type) {
+      stop(type, callEnd = !0) {
         for (; this._animates.length > 0;) {
           const animate = this._animates.pop();
-          null == animate || animate.stop(type);
+          !1 === callEnd && (animate.status = AnimateStatus.END), null == animate || animate.stop(type);
         }
-        this._animates = [], this._activeCount = 0, this._started && (this._started = !1, this.onEnd());
+        this._animates = [], this._activeCount = 0, this._started && (this._started = !1, callEnd && this.onEnd());
       }
     }
     AnimateExecutor.builtInAnimateMap = {};
@@ -24708,7 +24708,7 @@
             executor: new AnimateExecutor(this.graphic)
           });
         }), shouldStopState.forEach(state => {
-          state.executor.stop();
+          state.executor.stop(null, !1);
         }), shouldApplyState.length) {
           shouldApplyState[0].executor.execute(shouldApplyState[0].animationConfig);
           for (let i = 0; i < shouldApplyState.length; i++) {
@@ -24759,7 +24759,7 @@
       clearState() {
         var _a;
         null === (_a = this.stateList) || void 0 === _a || _a.forEach(state => {
-          state.executor.stop();
+          state.executor.stop(null, !1);
         }), this.stateList = null;
       }
       reApplyState(state) {
@@ -30467,6 +30467,19 @@
       return convertDomainToTickData(scale.domain());
     };
 
+    var DataZoomActiveTag;
+    !function (DataZoomActiveTag) {
+      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
+    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
+    var IDataZoomInteractiveEvent;
+    !function (IDataZoomInteractiveEvent) {
+      IDataZoomInteractiveEvent.stateUpdate = "stateUpdate", IDataZoomInteractiveEvent.maskUpdate = "maskUpdate", IDataZoomInteractiveEvent.dataZoomUpdate = "dataZoomUpdate";
+    }(IDataZoomInteractiveEvent || (IDataZoomInteractiveEvent = {}));
+    var IDataZoomEvent;
+    !function (IDataZoomEvent) {
+      IDataZoomEvent.dataZoomChange = "dataZoomChange";
+    }(IDataZoomEvent || (IDataZoomEvent = {}));
+
     const DEFAULT_HANDLER_PATH = "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z";
     const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
       orient: "bottom",
@@ -30584,14 +30597,17 @@
       }
     };
 
-    var DataZoomActiveTag;
-    !function (DataZoomActiveTag) {
-      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
-    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
-
-    function loadDataZoomComponent() {
-      loadTagComponent(), registerRect(), registerSymbol(), registerArea(), registerLine();
-    }
+    const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
+      if (!textBounds) return !1;
+      if (isHorizontal) {
+        if ("start" === layout) {
+          if (textBounds.x1 < componentBoundsLike.x1) return !0;
+        } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
+      } else if ("start" === layout) {
+        if (textBounds.y1 < componentBoundsLike.y1) return !0;
+      } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
+      return !1;
+    };
 
     var __rest$3 = undefined && undefined.__rest || function (s, e) {
       var t = {};
@@ -30602,176 +30618,96 @@
       }
       return t;
     };
-    const delayMap = {
-      debounce: debounce$2,
-      throttle: throttle$2
-    };
-    loadDataZoomComponent();
-    class DataZoom extends AbstractComponent {
-      setPropsFromAttrs() {
+    class DataZoomRenderer {
+      get startHandlerMask() {
+        return this._startHandlerMask;
+      }
+      get middleHandlerSymbol() {
+        return this._middleHandlerSymbol;
+      }
+      get middleHandlerRect() {
+        return this._middleHandlerRect;
+      }
+      get endHandlerMask() {
+        return this._endHandlerMask;
+      }
+      get selectedBackground() {
+        return this._selectedBackground;
+      }
+      get dragMask() {
+        return this._dragMask;
+      }
+      get startText() {
+        return this._startText;
+      }
+      get endText() {
+        return this._endText;
+      }
+      get startValue() {
+        return this._startValue;
+      }
+      get endValue() {
+        return this._endValue;
+      }
+      set showText(showText) {
+        this._showText = showText;
+      }
+      get background() {
+        return this._background;
+      }
+      set previewData(previewData) {
+        this._previewData = previewData;
+      }
+      get previewGroup() {
+        return this._previewGroup;
+      }
+      get selectedPreviewGroup() {
+        return this._selectedPreviewGroup;
+      }
+      set previewPointsX(previewPointsX) {
+        this._previewPointsX = previewPointsX;
+      }
+      set previewPointsY(previewPointsY) {
+        this._previewPointsY = previewPointsY;
+      }
+      set previewPointsX1(previewPointsX1) {
+        this._previewPointsX1 = previewPointsX1;
+      }
+      set previewPointsY1(previewPointsY1) {
+        this._previewPointsY1 = previewPointsY1;
+      }
+      set statePointToData(statePointToData) {
+        this._statePointToData = statePointToData;
+      }
+      _initAttrs(props) {
+        this.attribute = props.attribute, this._isHorizontal = "top" === this.attribute.orient || "bottom" === this.attribute.orient;
         const {
-          start: start,
-          end: end,
-          orient: orient,
           previewData: previewData,
           previewPointsX: previewPointsX,
           previewPointsY: previewPointsY,
           previewPointsX1: previewPointsX1,
           previewPointsY1: previewPointsY1
         } = this.attribute;
-        start && (this.state.start = start), end && (this.state.end = end);
-        const {
-          width: width,
-          height: height
-        } = this.getLayoutAttrFromConfig();
-        this._spanCache = this.state.end - this.state.start, this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", previewData && (this._previewData = previewData), isFunction$7(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$7(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$7(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$7(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+        previewData && (this._previewData = previewData), isFunction$7(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$7(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$7(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$7(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), this._getState = props.getState, this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig, this._getContainer = props.getContainer;
       }
-      constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
-          startPos: {
-            x: 0,
-            y: 0
-          },
-          lastPos: {
-            x: 0,
-            y: 0
-          }
-        }, this._layoutCache = {
-          attPos: "x",
-          attSize: "width",
-          max: 0
-        }, this.state = {
-          start: 0,
-          end: 1
-        }, this._statePointToData = state => state, this._handleTouchMove = e => {
-          this._activeState && e.preventDefault();
-        }, this._onHandlerPointerDown = (e, tag) => {
-          this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
-          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-            triggers = getEndTriggersOfDrag();
-          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), triggers.forEach(trigger => {
-            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
-          });
-        }, this._pointerMove = e => {
-          const {
-              start: startAttr,
-              end: endAttr,
-              brushSelect: brushSelect,
-              realTime = !0
-            } = this.attribute,
-            pos = this.eventPosToStagePos(e),
-            {
-              attPos: attPos,
-              max: max
-            } = this._layoutCache,
-            dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-          let {
-            start: start,
-            end: end
-          } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
-            start: start,
-            end: end,
-            tag: this._activeTag
-          }));
-        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
-          const {
-            start: start,
-            end: end,
-            brushSelect: brushSelect,
-            realTime = !0
-          } = this.attribute;
-          if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
-            const pos = this.eventPosToStagePos(e);
-            this.backgroundDragZoom(this._activeCache.startPos, pos);
-          }
-          this._activeState = !1, brushSelect && this.renderDragMask(), this._dispatchEvent("change", {
-            start: this.state.start,
-            end: this.state.end,
-            tag: this._activeTag
-          }), this._clearDragEvents();
-        };
+      constructor(props) {
+        this._previewData = [], this._statePointToData = state => state;
         const {
-          position: position,
           showDetail: showDetail
-        } = attributes;
-        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, this.setPropsFromAttrs();
+        } = props.attribute;
+        this._showText = "auto" !== showDetail && showDetail, this._initAttrs(props);
       }
-      setAttributes(params, forceUpdateTag) {
-        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
+      setAttributes(props) {
+        this._initAttrs(props);
       }
-      bindEvents() {
-        if (this.attribute.disableTriggerEvent) return void this.setAttribute("childrenPickable", !1);
+      renderDataZoom(onlyStateChange = !1) {
+        var _a, _b, _c, _d, _e, _f;
         const {
-          showDetail: showDetail,
+          backgroundChartStyle = {},
+          selectedBackgroundChartStyle = {},
           brushSelect: brushSelect
         } = this.attribute;
-        this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
-        const selectedTag = brushSelect ? "background" : "middleRect";
-        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-          passive: !1
-        });
-      }
-      dragMaskSize() {
-        const {
-            position: position
-          } = this.attribute,
-          {
-            attPos: attPos,
-            max: max
-          } = this._layoutCache;
-        return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
-      }
-      setStateAttr(start, end, shouldRender) {
-        const {
-            zoomLock = !1,
-            minSpan = 0,
-            maxSpan = 1
-          } = this.attribute,
-          span = end - start;
-        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
-          start: start,
-          end: end
-        }));
-      }
-      _clearDragEvents() {
-        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-          triggers = getEndTriggersOfDrag();
-        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-          capture: !0
-        }), triggers.forEach(trigger => {
-          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
-        }), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-          capture: !0
-        });
-      }
-      _onHandlerPointerEnter(e) {
-        this._showText = !0, this.renderText();
-      }
-      _onHandlerPointerLeave(e) {
-        this._showText = !1, this.renderText();
-      }
-      backgroundDragZoom(startPos, endPos) {
-        const {
-            attPos: attPos,
-            max: max
-          } = this._layoutCache,
-          {
-            position: position
-          } = this.attribute,
-          startPosInComponent = startPos[attPos] - position[attPos],
-          endPosInComponent = endPos[attPos] - position[attPos],
-          start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1),
-          end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
-      }
-      moveZoomWithMiddle(middle) {
-        let offset = middle - (this.state.start + this.state.end) / 2;
-        0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
+        this._renderBackground(), (null === (_a = backgroundChartStyle.line) || void 0 === _a ? void 0 : _a.visible) && !onlyStateChange && this._setPreviewAttributes("line", this._getContainer()), (null === (_b = backgroundChartStyle.area) || void 0 === _b ? void 0 : _b.visible) && !onlyStateChange && this._setPreviewAttributes("area", this._getContainer()), brushSelect && this.renderDragMask(), this._renderSelectedBackground(), (null === (_c = selectedBackgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this._setSelectedPreviewClipAttributes("line", this._getContainer()), (null === (_d = selectedBackgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && !onlyStateChange && this._setSelectedPreviewAttributes("line"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this._setSelectedPreviewClipAttributes("area", this._getContainer()), (null === (_f = selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && !onlyStateChange && this._setSelectedPreviewAttributes("area"), this._renderHandler(), this._showText && this.renderText();
       }
       renderDragMask() {
         const {
@@ -30781,254 +30717,104 @@
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
-        this._isHorizontal ? this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
-          x: clamp$3(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
+          } = this._getLayoutAttrFromConfig(),
+          {
+            start: start,
+            end: end
+          } = this._getState();
+        return this._isHorizontal ? this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
+          x: position.x + start * width,
           y: position.y,
-          width: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
+          width: (end - start) * width,
           height: height
-        }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
+        }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
-          y: clamp$3(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
+          y: position.y + start * height,
           width: width,
-          height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
-        }, dragMaskStyle), "rect");
-      }
-      isTextOverflow(componentBoundsLike, textBounds, layout) {
-        if (!textBounds) return !1;
-        if (this._isHorizontal) {
-          if ("start" === layout) {
-            if (textBounds.x1 < componentBoundsLike.x1) return !0;
-          } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
-        } else if ("start" === layout) {
-          if (textBounds.y1 < componentBoundsLike.y1) return !0;
-        } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
-        return !1;
+          height: (end - start) * height
+        }, dragMaskStyle), "rect"), {
+          start: start,
+          end: end
+        };
       }
-      setTextAttr(startTextBounds, endTextBounds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+      _renderBackground() {
+        var _a;
         const {
-            startTextStyle: startTextStyle,
-            endTextStyle: endTextStyle
+            backgroundStyle: backgroundStyle,
+            brushSelect: brushSelect,
+            zoomLock: zoomLock
           } = this.attribute,
           {
-            formatMethod: startTextFormat
-          } = startTextStyle,
-          restStartTextStyle = __rest$3(startTextStyle, ["formatMethod"]),
-          {
-            formatMethod: endTextFormat
-          } = endTextStyle,
-          restEndTextStyle = __rest$3(endTextStyle, ["formatMethod"]),
-          {
-            start: start,
-            end: end
-          } = this.state;
-        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
-        const {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig(),
-          startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue,
-          endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue,
-          componentBoundsLike = {
-            x1: position.x,
-            y1: position.y,
-            x2: position.x + width,
-            y2: position.y + height
-          };
-        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
-        this._isHorizontal ? (startTextPosition = {
-          x: position.x + start * width,
-          y: position.y + height / 2
-        }, endTextPosition = {
-          x: position.x + end * width,
-          y: position.y + height / 2
-        }, startTextAlignStyle = {
-          textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
-          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
-        }, endTextAlignStyle = {
-          textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
-          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
-        }) : (startTextPosition = {
-          x: position.x + width / 2,
-          y: position.y + start * height
-        }, endTextPosition = {
-          x: position.x + width / 2,
-          y: position.y + end * height
-        }, startTextAlignStyle = {
-          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
-          textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
-        }, endTextAlignStyle = {
-          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
-          textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
-        }), this._startText = this.maybeAddLabel(this._container, merge$2({}, restStartTextStyle, {
-          text: startTextValue,
-          x: startTextPosition.x,
-          y: startTextPosition.y,
-          visible: this._showText,
-          pickable: !1,
-          childrenPickable: !1,
-          textStyle: startTextAlignStyle
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge$2({}, restEndTextStyle, {
-          text: endTextValue,
-          x: endTextPosition.x,
-          y: endTextPosition.y,
-          visible: this._showText,
-          pickable: !1,
-          childrenPickable: !1,
-          textStyle: endTextAlignStyle
-        }), `data-zoom-end-text-${position}`);
-      }
-      renderText() {
-        let startTextBounds = null,
-          endTextBounds = null;
-        this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds, this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
-        const {
-            x1: x1,
-            x2: x2,
-            y1: y1,
-            y2: y2
-          } = startTextBounds,
-          {
-            dx: startTextDx = 0,
-            dy: startTextDy = 0
-          } = this.attribute.startTextStyle;
-        if (new Bounds$1().set(x1, y1, x2, y2).intersects(endTextBounds)) {
-          const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
-          if (this._isHorizontal) {
-            const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
-            this._startText.setAttribute("dy", startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
-          } else {
-            const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
-            this._startText.setAttribute("dx", startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
-          }
-        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
-      }
-      getLayoutAttrFromConfig() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
-        const {
-            position: positionConfig,
-            size: size,
-            orient: orient,
-            middleHandlerStyle = {},
-            startHandlerStyle = {},
-            endHandlerStyle = {},
-            backgroundStyle = {}
-          } = this.attribute,
-          {
-            width: widthConfig,
-            height: heightConfig
-          } = size,
-          middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
-        let width, height, position;
-        middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
-          x: positionConfig.x,
-          y: positionConfig.y + middleHandlerSize
-        }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
-          x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
-          y: positionConfig.y
-        }) : (width = widthConfig, height = heightConfig, position = positionConfig);
-        const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
-          endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
-        return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
-          x: position.x + startHandlerSize / 2,
-          y: position.y
-        }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+          } = this._getLayoutAttrFromConfig(),
+          group = this._getContainer();
+        this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
           x: position.x,
-          y: position.y + startHandlerSize / 2
-        })), height += null !== (_e = backgroundStyle.lineWidth / 2) && void 0 !== _e ? _e : 1, width += null !== (_f = backgroundStyle.lineWidth / 2) && void 0 !== _f ? _f : 1, this._layoutAttrFromConfig = {
-          position: position,
+          y: position.y,
           width: width,
-          height: height
-        }, this._layoutAttrFromConfig;
+          height: height,
+          cursor: brushSelect ? "crosshair" : "auto"
+        }, backgroundStyle), {
+          pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
+        }), "rect");
       }
-      render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-        this._layoutAttrFromConfig = null;
+      _renderHandler() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const {
             orient: orient,
-            backgroundStyle: backgroundStyle,
-            backgroundChartStyle = {},
-            selectedBackgroundStyle = {},
-            selectedBackgroundChartStyle = {},
             middleHandlerStyle = {},
             startHandlerStyle = {},
             endHandlerStyle = {},
-            brushSelect: brushSelect,
             zoomLock: zoomLock
           } = this.attribute,
           {
             start: start,
             end: end
-          } = this.state,
+          } = this._getState(),
           {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig(),
+          } = this._getLayoutAttrFromConfig(),
           startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40,
           endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40,
-          group = this.createOrUpdateChild("dataZoom-container", {}, "group");
-        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
-          x: position.x,
-          y: position.y,
-          width: width,
-          height: height,
-          cursor: brushSelect ? "crosshair" : "auto"
-        }, backgroundStyle), {
-          pickable: !zoomLock && (null === (_c = backgroundStyle.pickable) || void 0 === _c || _c)
-        }), "rect"), (null === (_d = backgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("line", group), (null === (_e = backgroundChartStyle.area) || void 0 === _e ? void 0 : _e.visible) && this.setPreviewAttributes("area", group), brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-          x: position.x + start * width,
-          y: position.y,
-          width: (end - start) * width,
-          height: height,
-          cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_f = selectedBackgroundChartStyle.pickable) || void 0 === _f || _f)
-        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-          x: position.x,
-          y: position.y + start * height,
-          width: width,
-          height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_g = selectedBackgroundStyle.pickable) || void 0 === _g || _g)
-        }), "rect"), (null === (_h = selectedBackgroundChartStyle.line) || void 0 === _h ? void 0 : _h.visible) && this.setSelectedPreviewAttributes("line", group), (null === (_j = selectedBackgroundChartStyle.area) || void 0 === _j ? void 0 : _j.visible) && this.setSelectedPreviewAttributes("area", group), this._isHorizontal) {
+          group = this._getContainer();
+        if (this._isHorizontal) {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_k = middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_c = middleHandlerStyle.background) || void 0 === _c ? void 0 : _c.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
               height: middleHandlerBackgroundSize
-            }, null === (_l = middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), {
-              pickable: !zoomLock && (null === (_p = null === (_o = null === (_m = middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.pickable) || void 0 === _p || _p)
+            }, null === (_d = middleHandlerStyle.background) || void 0 === _d ? void 0 : _d.style), {
+              pickable: !zoomLock && (null === (_g = null === (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.pickable) || void 0 === _g || _g)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: position.x + (start + end) / 2 * width,
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_s = middleHandlerStyle.icon.pickable) || void 0 === _s || _s)
+              pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
+            symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_u = startHandlerStyle.pickable) || void 0 === _u || _u)
+            pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
+            symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_w = endHandlerStyle.pickable) || void 0 === _w || _w)
+            pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -31057,38 +30843,38 @@
           }), "rect");
         } else {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_x = middleHandlerStyle.background) || void 0 === _x ? void 0 : _x.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_q = middleHandlerStyle.background) || void 0 === _q ? void 0 : _q.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
               height: (end - start) * height
-            }, null === (_y = middleHandlerStyle.background) || void 0 === _y ? void 0 : _y.style), {
-              pickable: !zoomLock && (null === (_1 = null === (_0 = null === (_z = middleHandlerStyle.background) || void 0 === _z ? void 0 : _z.style) || void 0 === _0 ? void 0 : _0.pickable) || void 0 === _1 || _1)
+            }, null === (_r = middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), {
+              pickable: !zoomLock && (null === (_u = null === (_t = null === (_s = middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.style) || void 0 === _t ? void 0 : _t.pickable) || void 0 === _u || _u)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
-              symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
+              symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
               strokeBoundsBuffer: 0
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_5 = null === (_4 = middleHandlerStyle.icon) || void 0 === _4 ? void 0 : _4.pickable) || void 0 === _5 || _5)
+              pickable: !zoomLock && (null === (_y = null === (_x = middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.pickable) || void 0 === _y || _y)
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
-            symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
+            symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_7 = startHandlerStyle.pickable) || void 0 === _7 || _7)
+            pickable: !zoomLock && (null === (_0 = startHandlerStyle.pickable) || void 0 === _0 || _0)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + end * height,
             size: width,
-            symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_9 = endHandlerStyle.pickable) || void 0 === _9 || _9)
+            pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -31116,9 +30902,107 @@
             pickable: !zoomLock
           }), "rect");
         }
-        this._showText && this.renderText();
       }
-      computeBasePoints() {
+      _renderSelectedBackground() {
+        var _a, _b;
+        const {
+            selectedBackgroundStyle = {},
+            selectedBackgroundChartStyle = {},
+            brushSelect: brushSelect,
+            zoomLock: zoomLock
+          } = this.attribute,
+          {
+            start: start,
+            end: end
+          } = this._getState(),
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this._getLayoutAttrFromConfig(),
+          group = this._getContainer();
+        this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x + start * width,
+          y: position.y,
+          width: (end - start) * width,
+          height: height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
+        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x,
+          y: position.y + start * height,
+          width: width,
+          height: (end - start) * height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
+        }), "rect");
+      }
+      _setPreviewAttributes(type, group) {
+        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
+          pickable: !1
+        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
+          curveType: "basis"
+        }, "area");
+        const {
+          backgroundChartStyle = {}
+        } = this.attribute;
+        "line" === type && this._previewLine.setAttributes(Object.assign({
+          points: this._getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
+          points: this._getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.area));
+      }
+      _setSelectedPreviewClipAttributes(type, group) {
+        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
+          pickable: !1
+        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
+        const {
+            start: start,
+            end: end
+          } = this._getState(),
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this._getLayoutAttrFromConfig();
+        this._selectedPreviewGroupClip.setAttributes({
+          x: this._isHorizontal ? position.x + start * width : position.x,
+          y: this._isHorizontal ? position.y : position.y + start * height,
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          clip: !0,
+          pickable: !1
+        }), this._selectedPreviewGroup.setAttributes({
+          x: -(this._isHorizontal ? position.x + start * width : position.x),
+          y: -(this._isHorizontal ? position.y : position.y + start * height),
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          pickable: !1
+        });
+      }
+      _setSelectedPreviewAttributes(type) {
+        const {
+          selectedBackgroundChartStyle = {}
+        } = this.attribute;
+        "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
+          curveType: "basis"
+        }, "area"), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
+          points: this._getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
+          points: this._getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.area));
+      }
+      _computeBasePoints() {
         const {
             orient: orient
           } = this.attribute,
@@ -31126,7 +31010,7 @@
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
+          } = this._getLayoutAttrFromConfig();
         let basePointStart, basePointEnd;
         return this._isHorizontal ? (basePointStart = [{
           x: position.x,
@@ -31151,7 +31035,7 @@
           basePointEnd: basePointEnd
         };
       }
-      simplifyPoints(points) {
+      _simplifyPoints(points) {
         var _a;
         if (points.length > 1e4) {
           const tolerance = null !== (_a = this.attribute.tolerance) && void 0 !== _a ? _a : this._previewData.length / 1e4;
@@ -31159,20 +31043,20 @@
         }
         return points;
       }
-      getPreviewLinePoints() {
+      _getPreviewLinePoints() {
         let previewPoints = this._previewData.map(d => ({
           x: this._previewPointsX && this._previewPointsX(d),
           y: this._previewPointsY && this._previewPointsY(d)
         }));
         if (0 === previewPoints.length) return previewPoints;
-        previewPoints = this.simplifyPoints(previewPoints);
+        previewPoints = this._simplifyPoints(previewPoints);
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this.computeBasePoints();
+        } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
-      getPreviewAreaPoints() {
+      _getPreviewAreaPoints() {
         let previewPoints = this._previewData.map(d => ({
           x: this._previewPointsX && this._previewPointsX(d),
           y: this._previewPointsY && this._previewPointsY(d),
@@ -31180,99 +31064,459 @@
           y1: this._previewPointsY1 && this._previewPointsY1(d)
         }));
         if (0 === previewPoints.length) return previewPoints;
-        previewPoints = this.simplifyPoints(previewPoints);
+        previewPoints = this._simplifyPoints(previewPoints);
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this.computeBasePoints();
+        } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
-      setPreviewAttributes(type, group) {
-        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-          pickable: !1
-        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
-          curveType: "basis"
-        }, "area");
-        const {
-          backgroundChartStyle = {}
-        } = this.attribute;
-        "line" === type && this._previewLine.setAttributes(Object.assign({
-          points: this.getPreviewLinePoints(),
-          curveType: "basis",
-          pickable: !1
-        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
-          points: this.getPreviewAreaPoints(),
-          curveType: "basis",
-          pickable: !1
-        }, backgroundChartStyle.area));
+      renderText() {
+        let startTextBounds = null,
+          endTextBounds = null;
+        if (this._setTextAttr(startTextBounds, endTextBounds), this._showText) {
+          startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds, this._setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
+          const {
+              x1: x1,
+              x2: x2,
+              y1: y1,
+              y2: y2
+            } = startTextBounds,
+            {
+              dx: startTextDx = 0,
+              dy: startTextDy = 0
+            } = this.attribute.startTextStyle;
+          if (new Bounds$1().set(x1, y1, x2, y2).intersects(endTextBounds)) {
+            const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
+            this._isHorizontal ? this._startText.setAttribute("dy", startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2)) : this._startText.setAttribute("dx", startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+          } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
+        }
       }
-      setSelectedPreviewAttributes(type, group) {
-        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1
-        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group")), "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
-          curveType: "basis"
-        }, "area");
+      _setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const {
-            selectedBackgroundChartStyle = {}
+            startTextStyle: startTextStyle,
+            endTextStyle: endTextStyle
           } = this.attribute,
+          {
+            formatMethod: startTextFormat
+          } = startTextStyle,
+          restStartTextStyle = __rest$3(startTextStyle, ["formatMethod"]),
+          {
+            formatMethod: endTextFormat
+          } = endTextStyle,
+          restEndTextStyle = __rest$3(endTextStyle, ["formatMethod"]),
           {
             start: start,
             end: end
-          } = this.state,
-          {
+          } = this._getState();
+        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
+        const {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
-        this._selectedPreviewGroupClip.setAttributes({
-          x: this._isHorizontal ? position.x + start * width : position.x,
-          y: this._isHorizontal ? position.y : position.y + start * height,
-          width: this._isHorizontal ? (end - start) * width : width,
-          height: this._isHorizontal ? height : (end - start) * height,
-          clip: !0,
-          pickable: !1
-        }), this._selectedPreviewGroup.setAttributes({
-          x: -(this._isHorizontal ? position.x + start * width : position.x),
-          y: -(this._isHorizontal ? position.y : position.y + start * height),
-          width: this._isHorizontal ? (end - start) * width : width,
-          height: this._isHorizontal ? height : (end - start) * height,
-          pickable: !1
-        }), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
-          points: this.getPreviewLinePoints(),
-          curveType: "basis",
-          pickable: !1
-        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
-          points: this.getPreviewAreaPoints(),
-          curveType: "basis",
-          pickable: !1
-        }, selectedBackgroundChartStyle.area));
+          } = this._getLayoutAttrFromConfig(),
+          startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+          endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+          componentBoundsLike = {
+            x1: position.x,
+            y1: position.y,
+            x2: position.x + width,
+            y2: position.y + height
+          };
+        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
+        this._isHorizontal ? (startTextPosition = {
+          x: position.x + start * width,
+          y: position.y + height / 2
+        }, endTextPosition = {
+          x: position.x + end * width,
+          y: position.y + height / 2
+        }, startTextAlignStyle = {
+          textAlign: isTextOverflow(componentBoundsLike, startTextBounds, "start", this._isHorizontal) ? "left" : "right",
+          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
+        }, endTextAlignStyle = {
+          textAlign: isTextOverflow(componentBoundsLike, endTextBounds, "end", this._isHorizontal) ? "right" : "left",
+          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
+        }) : (startTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + start * height
+        }, endTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + end * height
+        }, startTextAlignStyle = {
+          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
+          textBaseline: isTextOverflow(componentBoundsLike, startTextBounds, "start", this._isHorizontal) ? "top" : "bottom"
+        }, endTextAlignStyle = {
+          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
+          textBaseline: isTextOverflow(componentBoundsLike, endTextBounds, "end", this._isHorizontal) ? "bottom" : "top"
+        }), this._startText = this._maybeAddLabel(this._getContainer(), merge$2({}, restStartTextStyle, {
+          text: startTextValue,
+          x: startTextPosition.x,
+          y: startTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: startTextAlignStyle
+        }), "data-zoom-start-text"), this._endText = this._maybeAddLabel(this._getContainer(), merge$2({}, restEndTextStyle, {
+          text: endTextValue,
+          x: endTextPosition.x,
+          y: endTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: endTextAlignStyle
+        }), "data-zoom-end-text");
       }
-      maybeAddLabel(container, attributes, name) {
-        let labelShape = this.find(node => node.name === name, !0);
-        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag$1(attributes), labelShape.name = name), container.add(labelShape), labelShape;
+      _maybeAddLabel(container, attributes, name) {
+        let labelShape = container.find(node => node.name === name, !0);
+        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag$1(attributes), labelShape.name = name, container.add(labelShape)), labelShape;
       }
-      setStartAndEnd(start, end) {
+    }
+
+    const delayMap = {
+      debounce: debounce$2,
+      throttle: throttle$2
+    };
+    class DataZoomInteraction extends EventEmitter {
+      constructor(props) {
+        super(), this._activeState = !1, this._activeCache = {
+          startPos: {
+            x: 0,
+            y: 0
+          },
+          lastPos: {
+            x: 0,
+            y: 0
+          }
+        }, this._layoutCache = {
+          attPos: "x",
+          attSize: "width",
+          size: 0
+        }, this._handleTouchMove = e => {
+          this._activeState && e.preventDefault();
+        }, this._onHandlerPointerDown = (e, tag) => {
+          this.clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this._eventPosToStagePos(e), this._activeCache.lastPos = this._eventPosToStagePos(e);
+          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+            triggers = getEndTriggersOfDrag();
+          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), this.on("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), triggers.forEach(trigger => {
+            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+          });
+        }, this._pointerMove = e => {
+          const {
+              brushSelect: brushSelect
+            } = this.attribute,
+            {
+              position: position
+            } = this._getLayoutAttrFromConfig(),
+            pos = this._eventPosToStagePos(e),
+            {
+              attPos: attPos,
+              size: size,
+              attSize: attSize
+            } = this._layoutCache,
+            dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / size,
+            statePos = (pos[attPos] - position[attPos]) / this._getLayoutAttrFromConfig()[attSize];
+          let {
+              start: start,
+              end: end
+            } = this._getState(),
+            shouldRender = !0;
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithMiddle(dis)) : this._activeTag === DataZoomActiveTag.startHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithHandler(statePos, "start")) : this._activeTag === DataZoomActiveTag.endHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithHandler(statePos, "end")) : this._activeTag === DataZoomActiveTag.background && brushSelect && (({
+            start: start,
+            end: end
+          } = this._moveZoomWithBackground(statePos)), shouldRender = !1, this._dispatchEvent(IDataZoomInteractiveEvent.maskUpdate)), this._activeCache.lastPos = pos), this._getState().start === start && this._getState().end === end || (this._setStateAttr(start, end), this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: shouldRender,
+            tag: this._activeTag
+          }), this.attribute.realTime && this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          }));
+        }, this._onHandlerPointerUp = e => {
+          this._activeState && this._activeTag === DataZoomActiveTag.background && (this._setStateAttr(this._getState().start, this._getState().end), this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          })), this._activeState = !1, this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          }), this.clearDragEvents();
+        }, this._initAttrs(props);
+      }
+      setAttributes(props) {
+        var _a, _b, _c, _d, _e, _f;
+        this._initAttrs(props), this._onHandlerPointerMove = 0 === (null !== (_b = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.delayTime) && void 0 !== _b ? _b : 0) ? this._pointerMove : delayMap[null !== (_d = null === (_c = this.attribute) || void 0 === _c ? void 0 : _c.delayType) && void 0 !== _d ? _d : "debounce"](this._pointerMove, null !== (_f = null === (_e = this.attribute) || void 0 === _e ? void 0 : _e.delayTime) && void 0 !== _f ? _f : 0);
+      }
+      _initAttrs(props) {
+        this.stage = props.stage, this.attribute = props.attribute, this._startHandlerMask = props.startHandlerMask, this._endHandlerMask = props.endHandlerMask, this._middleHandlerSymbol = props.middleHandlerSymbol, this._middleHandlerRect = props.middleHandlerRect, this._selectedBackground = props.selectedBackground, this._background = props.background, this._previewGroup = props.previewGroup, this._selectedPreviewGroup = props.selectedPreviewGroup, this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig, this._getState = props.getState, this._setState = props.setState;
         const {
-          start: startAttr,
-          end: endAttr
+          width: width,
+          height: height
+        } = this._getLayoutAttrFromConfig();
+        this._spanCache = this._getState().end - this._getState().start;
+        const isHorizontal = "top" === this.attribute.orient || "bottom" === this.attribute.orient;
+        this._layoutCache.size = isHorizontal ? width : height, this._layoutCache.attPos = isHorizontal ? "x" : "y", this._layoutCache.attSize = isHorizontal ? "width" : "height", this._getGlobalTransMatrix = props.getGlobalTransMatrix;
+      }
+      clearDragEvents() {
+        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+          triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        }), this.off("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        });
+      }
+      clearVGlobalEvents() {
+        ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
+      }
+      bindEvents() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const {
+          brushSelect: brushSelect
+        } = this.attribute;
+        null === (_a = this._startHandlerMask) || void 0 === _a || _a.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), null === (_b = this._endHandlerMask) || void 0 === _b || _b.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), null === (_c = this._middleHandlerSymbol) || void 0 === _c || _c.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), null === (_d = this._middleHandlerRect) || void 0 === _d || _d.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
+        const selectedTag = brushSelect ? "background" : "middleRect";
+        null === (_e = this._selectedBackground) || void 0 === _e || _e.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && (null === (_f = this._background) || void 0 === _f || _f.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background"))), brushSelect && (null === (_g = this._previewGroup) || void 0 === _g || _g.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background"))), null === (_h = this._selectedPreviewGroup) || void 0 === _h || _h.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
+      }
+      _setStateAttr(start, end) {
+        const {
+            zoomLock = !1,
+            minSpan = 0,
+            maxSpan = 1
+          } = this.attribute,
+          span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, this._setState({
+          start: start,
+          end: end
+        }));
+      }
+      _moveZoomWithMiddle(dis) {
+        const {
+          start: staetState,
+          end: endState
+        } = this._getState();
+        return dis > 0 && endState + dis > 1 ? dis = 1 - endState : dis < 0 && staetState + dis < 0 && (dis = -staetState), {
+          start: clamp$3(staetState + dis, 0, 1),
+          end: clamp$3(endState + dis, 0, 1)
+        };
+      }
+      _moveZoomWithHandler(statePos, handler) {
+        const {
+          start: start,
+          end: end
+        } = this._getState();
+        let newStart = start,
+          newEnd = end;
+        return "start" === handler ? statePos > end ? (newStart = end, newEnd = statePos, this._activeTag = DataZoomActiveTag.endHandler) : newStart = statePos : "end" === handler && (statePos < start ? (newEnd = start, newStart = statePos, this._activeTag = DataZoomActiveTag.startHandler) : newEnd = statePos), {
+          start: clamp$3(newStart, 0, 1),
+          end: clamp$3(newEnd, 0, 1)
+        };
+      }
+      _moveZoomWithBackground(statePos) {
+        const {
+            position: position
+          } = this._getLayoutAttrFromConfig(),
+          {
+            attSize: attSize
+          } = this._layoutCache,
+          startPos = (this._activeCache.startPos[this._layoutCache.attPos] - position[this._layoutCache.attPos]) / this._getLayoutAttrFromConfig()[attSize],
+          endPos = statePos;
+        let start = clamp$3(startPos, 0, 1),
+          end = clamp$3(endPos, 0, 1);
+        return start > end && ([start, end] = [end, start]), {
+          start: start,
+          end: end
+        };
+      }
+      _eventPosToStagePos(e) {
+        var _a, _b;
+        const result = {
+            x: 0,
+            y: 0
+          },
+          stagePoints = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
+            x: 0,
+            y: 0
+          };
+        return this._getGlobalTransMatrix().transformPoint(stagePoints, result), result;
+      }
+      _dispatchEvent(eventName, details) {
+        this.emit(eventName, details);
+      }
+    }
+
+    function loadDataZoomComponent() {
+      loadTagComponent(), registerRect(), registerSymbol(), registerArea(), registerLine();
+    }
+
+    loadDataZoomComponent();
+    class DataZoom extends AbstractComponent {
+      constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._state = {
+          start: 0,
+          end: 1
+        }, this.getLayoutAttrFromConfig = () => {
+          var _a, _b, _c, _d, _e, _f;
+          if (this._layoutCacheFromConfig) return this._layoutCacheFromConfig;
+          const {
+              position: positionConfig,
+              size: size,
+              orient: orient,
+              middleHandlerStyle = {},
+              startHandlerStyle = {},
+              endHandlerStyle = {},
+              backgroundStyle = {}
+            } = this.attribute,
+            {
+              width: widthConfig,
+              height: heightConfig
+            } = size,
+            middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
+          let width, height, position;
+          middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
+            x: positionConfig.x,
+            y: positionConfig.y + middleHandlerSize
+          }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
+            x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
+            y: positionConfig.y
+          }) : (width = widthConfig, height = heightConfig, position = positionConfig);
+          const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
+            endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
+          return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
+            x: position.x + startHandlerSize / 2,
+            y: position.y
+          }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+            x: position.x,
+            y: position.y + startHandlerSize / 2
+          })), height += (null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 2) / 2, width += (null !== (_f = backgroundStyle.lineWidth) && void 0 !== _f ? _f : 2) / 2, this._layoutCacheFromConfig = {
+            position: position,
+            width: width,
+            height: height
+          }, this._layoutCacheFromConfig;
+        };
+        const {
+          start: start,
+          end: end,
+          orient: orient
         } = this.attribute;
-        isValid$5(start) && isValid$5(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), this._dispatchEvent("change", {
+        this._isHorizontal = "top" === orient || "bottom" === orient, start && (this._state.start = start), end && (this._state.end = end), this._renderer = new DataZoomRenderer(this._getRendererAttrs()), this._interaction = new DataZoomInteraction(this._getInteractionAttrs());
+      }
+      _getRendererAttrs() {
+        return {
+          attribute: this.attribute,
+          getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+          setState: state => {
+            this._state = state;
+          },
+          getState: () => this._state,
+          getContainer: () => this._container
+        };
+      }
+      _getInteractionAttrs() {
+        return {
+          stage: this.stage,
+          attribute: this.attribute,
+          startHandlerMask: this._renderer.startHandlerMask,
+          endHandlerMask: this._renderer.endHandlerMask,
+          middleHandlerSymbol: this._renderer.middleHandlerSymbol,
+          middleHandlerRect: this._renderer.middleHandlerRect,
+          selectedBackground: this._renderer.selectedBackground,
+          background: this._renderer.background,
+          previewGroup: this._renderer.previewGroup,
+          selectedPreviewGroup: this._renderer.selectedPreviewGroup,
+          getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+          setState: state => {
+            this._state = state;
+          },
+          getState: () => this._state,
+          getGlobalTransMatrix: () => this.globalTransMatrix
+        };
+      }
+      bindEvents() {
+        this.attribute.disableTriggerEvent ? this.setAttribute("childrenPickable", !1) : (this._interaction.bindEvents(), this._interaction.on(IDataZoomInteractiveEvent.stateUpdate, ({
+          shouldRender: shouldRender
+        }) => {
+          shouldRender && this._renderer.renderDataZoom(!0);
+        }), this._interaction.on(IDataZoomInteractiveEvent.dataZoomUpdate, ({
           start: start,
           end: end,
-          tag: this._activeTag
+          tag: tag
+        }) => {
+          this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+            start: start,
+            end: end,
+            tag: tag
+          });
+        }), this._interaction.on(IDataZoomInteractiveEvent.maskUpdate, () => {
+          this._renderer.renderDragMask();
+        }), "auto" === this.attribute.showDetail && (this._container.addEventListener("pointerenter", () => {
+          this._renderer.showText = !0, this._renderer.renderText();
+        }), this._container.addEventListener("pointerleave", () => {
+          this._renderer.showText = !1, this._renderer.renderText();
         })));
       }
+      setAttributes(params, forceUpdateTag) {
+        const {
+          start: start,
+          end: end
+        } = this.attribute;
+        start && (this._state.start = start), end && (this._state.end = end), this._renderer.setAttributes(this._getRendererAttrs()), this._interaction.setAttributes(this._getInteractionAttrs()), super.setAttributes(params, forceUpdateTag);
+      }
+      render() {
+        this._layoutCacheFromConfig = null, this._container = this.createOrUpdateChild("datazoom-container", {}, "group"), this._renderer.renderDataZoom(), this._interaction.setAttributes(this._getInteractionAttrs());
+      }
+      release(all) {
+        super.release(all), this._interaction.clearDragEvents();
+      }
+      setStartAndEnd(start, end) {
+        const {
+          start: startState,
+          end: endState
+        } = this._state;
+        isValid$5(start) && isValid$5(end) && (start !== startState || end !== endState) && (this._state = {
+          start: start,
+          end: end
+        }, this._renderer.renderDataZoom(!0), this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+          start: start,
+          end: end
+        }));
+      }
       setPreviewData(data) {
-        this._previewData = data;
+        this._renderer.previewData = data;
       }
       setText(text, tag) {
-        "start" === tag ? this._startText.setAttribute("text", text) : this._endText.setAttribute("text", text);
+        "start" === tag ? this._renderer.startText.setAttribute("text", text) : this._renderer.endText.setAttribute("text", text);
       }
       getStartValue() {
-        return this._startValue;
+        return this._renderer.startValue;
       }
       getEndTextValue() {
-        return this._endValue;
+        return this._renderer.endValue;
       }
       getMiddleHandlerSize() {
         var _a, _b, _c, _d;
@@ -31284,24 +31528,19 @@
         return Math.max(middleHandlerRectSize, ...array$1(middleHandlerSymbolSize));
       }
       setPreviewPointsX(callback) {
-        isFunction$7(callback) && (this._previewPointsX = callback);
+        isFunction$7(callback) && (this._renderer.previewPointsX = callback);
       }
       setPreviewPointsY(callback) {
-        isFunction$7(callback) && (this._previewPointsY = callback);
+        isFunction$7(callback) && (this._renderer.previewPointsY = callback);
       }
       setPreviewPointsX1(callback) {
-        isFunction$7(callback) && (this._previewPointsX1 = callback);
+        isFunction$7(callback) && (this._renderer.previewPointsX1 = callback);
       }
       setPreviewPointsY1(callback) {
-        isFunction$7(callback) && (this._previewPointsY1 = callback);
+        isFunction$7(callback) && (this._renderer.previewPointsY1 = callback);
       }
       setStatePointToData(callback) {
-        isFunction$7(callback) && (this._statePointToData = callback);
-      }
-      release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-          passive: !1
-        }), this._clearDragEvents();
+        isFunction$7(callback) && (this._renderer.statePointToData = callback);
       }
     }
     DataZoom.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
@@ -35845,6 +36084,7 @@
         gantt.parsedOptions.startDateField = options.taskBar?.startDateField ?? 'startDate';
         gantt.parsedOptions.endDateField = options.taskBar?.endDateField ?? 'endDate';
         gantt.parsedOptions.progressField = options.taskBar?.progressField ?? 'progress';
+        gantt.parsedOptions.taskBarClip = options?.taskBar?.clip ?? true;
         gantt.parsedOptions.projectSubTasksExpandable = options?.projectSubTasksExpandable ?? true;
         const { unit: minTimeUnit, startOfWeek, step } = gantt.parsedOptions.reverseSortedTimelineScales[0];
         gantt.parsedOptions.minDate = options?.minDate
@@ -38450,7 +38690,7 @@
         maxing = !1,
         leading = !1,
         trailing = !0;
-      const useRAF = !wait && 0 !== wait && "function" == typeof requestAnimationFrame;
+      const useRAF = !wait && 0 !== wait && "function" == typeof vglobal.getRequestAnimationFrame();
       if ("function" != typeof func) throw new TypeError("Expected a function");
       function invokeFunc(time) {
         const args = lastArgs,
@@ -38458,7 +38698,7 @@
         return lastThis = void 0, lastArgs = void 0, lastInvokeTime = time, result = func.apply(thisArg, args), result;
       }
       function startTimer(pendingFunc, wait) {
-        return useRAF ? requestAnimationFrame(pendingFunc) : setTimeout(pendingFunc, wait);
+        return useRAF ? vglobal.getRequestAnimationFrame()(pendingFunc) : setTimeout(pendingFunc, wait);
       }
       function shouldInvoke(time) {
         const timeSinceLastCall = time - lastCallTime;
@@ -46387,14 +46627,15 @@
           symbolX = 0,
           symbolY = 0,
           symbolRotate = Math.PI;
-        const linePoints = [];
-        return "columnHeader" === cellLocation ? (rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos, rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1), rectHeight = this.table.tableNoFrameHeight, rectWidth = mergeInfo ? this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col) : this.table.getColWidth(col), rectDx = rectX - delta, symbolX = rectX + rectWidth, symbolY = 2, linePoints.push({
+        const linePoints = [],
+          movingColumnOrRow = this.table.stateManager.columnMove.movingColumnOrRow;
+        return "columnHeader" === cellLocation && void 0 === movingColumnOrRow || "column" === movingColumnOrRow ? (rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos, rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1), rectHeight = this.table.tableNoFrameHeight, rectWidth = mergeInfo ? this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col) : this.table.getColWidth(col), rectDx = rectX - delta, symbolX = rectX + rectWidth, symbolY = 2, linePoints.push({
           x: 0,
           y: 0
         }), linePoints.push({
           x: 0,
           y: this.table.tableNoFrameHeight
-        })) : ("rowHeader" === cellLocation || this.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) && (rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos, rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1), rectWidth = this.table.tableNoFrameWidth, rectHeight = mergeInfo ? this.table.getRowsHeight(mergeInfo.start.row, mergeInfo.end.row) : this.table.getRowHeight(row), rectDy = rectY - delta, symbolX = 2, symbolY = rectY + rectHeight, symbolRotate = Math.PI / 2, linePoints.push({
+        })) : ("rowHeader" === cellLocation || this.table.internalProps.layoutMap.isSeriesNumberInBody(col, row) || "row" === movingColumnOrRow) && (rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos, rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1), rectWidth = this.table.tableNoFrameWidth, rectHeight = mergeInfo ? this.table.getRowsHeight(mergeInfo.start.row, mergeInfo.end.row) : this.table.getRowHeight(row), rectDy = rectY - delta, symbolX = 2, symbolY = rectY + rectHeight, symbolRotate = Math.PI / 2, linePoints.push({
           x: 0,
           y: 0
         }), linePoints.push({
@@ -47378,7 +47619,7 @@
       isValid$3(count) && (batchRenderChartCount = count);
     }
     function clearChartRenderQueue() {
-      chartRenderKeys = [], chartRenderQueueList = [], isHandlingChartQueue = !1, cancelAnimationFrame(requestAnimationFrameId);
+      chartRenderKeys = [], chartRenderQueueList = [], isHandlingChartQueue = !1, vglobal.getCancelAnimationFrame()(requestAnimationFrameId);
     }
     function IsHandlingChartQueue() {
       return isHandlingChartQueue;
@@ -47457,7 +47698,7 @@
             tickMode: null === (_e = axis.tick) || void 0 === _e ? void 0 : _e.tickMode
           }
         }, !0);
-      }), null === (_c = null === (_b = table.internalProps.layoutMap) || void 0 === _b ? void 0 : _b.updateDataStateToActiveChartInstance) || void 0 === _c || _c.call(_b, chartInstance), "string" == typeof dataId) chartInstance.updateDataSync(dataId, null != data ? data : []);else {
+      }), null === (_c = null === (_b = table.internalProps.layoutMap) || void 0 === _b ? void 0 : _b.updateDataStateToActiveChartInstance) || void 0 === _c || _c.call(_b, chartInstance), "string" == typeof dataId) chartInstance.getChart().setLayoutTag(!0), chartInstance.updateDataSync(dataId, null != data ? data : []);else {
         const dataBatch = [];
         for (const dataIdStr in dataId) {
           const dataIdAndField = dataId[dataIdStr],
@@ -47471,7 +47712,7 @@
             fields: null === (_e = null == series ? void 0 : series.data) || void 0 === _e ? void 0 : _e.fields
           }), chartInstance.updateFullDataSync || chartInstance.updateDataSync(dataIdStr, dataIdAndField ? null !== (_f = null == data ? void 0 : data.filter(item => item.hasOwnProperty(dataIdAndField))) && void 0 !== _f ? _f : [] : null != data ? data : []);
         }
-        null === (_g = chartInstance.updateFullDataSync) || void 0 === _g || _g.call(chartInstance, dataBatch);
+        chartInstance.getChart().setLayoutTag(!0), null === (_g = chartInstance.updateFullDataSync) || void 0 === _g || _g.call(chartInstance, dataBatch);
       }
       table.fireListeners("before_cache_chart_image", {
         chartInstance: chartInstance
@@ -47479,7 +47720,7 @@
       cacheStageCanvas(chartInstance.getStage(), chart);
     }
     function startRenderChartQueue(table) {
-      isHandlingChartQueue = !0, chartRenderQueueList.length > 0 ? requestAnimationFrameId = requestAnimationFrame(() => {
+      isHandlingChartQueue = !0, chartRenderQueueList.length > 0 ? requestAnimationFrameId = vglobal.getRequestAnimationFrame()(() => {
         const chartsToRender = chartRenderQueueList.splice(0, batchRenderChartCount);
         chartRenderKeys.splice(0, batchRenderChartCount), chartsToRender.forEach(chart => {
           renderChart(chart), chart.addUpdateBoundTag();
@@ -48418,10 +48659,12 @@
           actualWidth = 0;
         for (let col = 0; col < table.colCount; col++) {
           const colWidth = update && null !== (_f = newWidths[col]) && void 0 !== _f ? _f : table.getColWidth(col);
-          (col < table.rowHeaderLevelCount + table.leftRowSeriesNumberCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
+          "only-body" === table.widthAdaptiveMode && (col < table.rowHeaderLevelCount + table.leftRowSeriesNumberCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
         }
         if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
-          getAdaptiveWidth(canvasWidth - actualHeaderWidth, table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount, update, newWidths, table);
+          let startCol = 0,
+            endCol = table.colCount;
+          "only-body" === table.widthAdaptiveMode && (startCol = table.rowHeaderLevelCount + table.leftRowSeriesNumberCount, endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount), getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, update, newWidths, table);
         }
       }
       if (update) {
@@ -52106,12 +52349,12 @@
             actualWidth = 0;
           for (let col = 0; col < table.colCount; col++) {
             const colWidth = table.getColWidth(col);
-            (col < table.rowHeaderLevelCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
+            "only-body" === table.widthAdaptiveMode && (col < table.rowHeaderLevelCount || table.isPivotChart() && col >= table.colCount - table.rightFrozenColCount) && (actualHeaderWidth += colWidth), actualWidth += colWidth;
           }
           if (actualWidth < canvasWidth && actualWidth > actualHeaderWidth) {
-            const startCol = table.rowHeaderLevelCount,
-              endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount;
-            getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, !1, [], table, !0);
+            let startCol = 0,
+              endCol = table.colCount;
+            "only-body" === table.widthAdaptiveMode && (startCol = table.rowHeaderLevelCount, endCol = table.isPivotChart() ? table.colCount - table.rightFrozenColCount : table.colCount), getAdaptiveWidth(canvasWidth - actualHeaderWidth, startCol, endCol, !1, [], table, !0);
           }
         }
         let bodyWidth = 0;
@@ -53076,24 +53319,26 @@
       return target;
     }
 
-    function startMoveCol(col, row, x, y, state, event) {
+    function startMoveCol(col, row, x, y, state, event, dragColumnOrRow) {
       var _a;
       if (!("canMoveHeaderPosition" in state.table.internalProps.layoutMap)) return;
-      if (state.columnMove.moving = !0, state.columnMove.colSource = col, state.columnMove.rowSource = row, state.table.isListTable()) {
+      if (state.columnMove.movingColumnOrRow = dragColumnOrRow, state.columnMove.moving = !0, state.columnMove.colSource = col, state.columnMove.rowSource = row, state.table.isListTable()) {
         const nodeIndex = state.table.getRecordIndexByCell(col, row),
           nodeData = state.table.getRecordByCell(col, row),
           hierarchyState = state.table.getRecordHierarchyState(col, row);
         state.columnMove.rowSourceSize = computeChildrenNodeLength(nodeIndex, hierarchyState, nodeData) + 1;
       }
-      state.columnMove.x = x - state.table.tableX, state.columnMove.y = y - state.table.tableY;
-      const cellLocation = state.table.getCellLocation(col, row),
-        delta = "columnHeader" === cellLocation ? state.columnMove.x : "rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row) ? state.columnMove.y : 0,
-        {
-          backX: backX,
-          lineX: lineX,
-          backY: backY,
-          lineY: lineY
-        } = state.table.scenegraph.component.showMoveCol(col, row, delta);
+      let delta;
+      if (state.columnMove.x = x - state.table.tableX, state.columnMove.y = y - state.table.tableY, "column" === dragColumnOrRow) delta = state.columnMove.x;else if ("row" === dragColumnOrRow) delta = state.columnMove.y;else {
+        const cellLocation = state.table.getCellLocation(col, row);
+        delta = "columnHeader" === cellLocation ? state.columnMove.x : "rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row) ? state.columnMove.y : 0;
+      }
+      const {
+        backX: backX,
+        lineX: lineX,
+        backY: backY,
+        lineY: lineY
+      } = state.table.scenegraph.component.showMoveCol(col, row, delta);
       state.table.fireListeners(TABLE_EVENT_TYPE.CHANGE_HEADER_POSITION_START, {
         col: col,
         row: row,
@@ -53103,7 +53348,8 @@
         lineX: lineX,
         backY: backY,
         lineY: lineY,
-        event: event
+        event: event,
+        movingColumnOrRow: dragColumnOrRow
       });
       const isHasSelected = !!(null === (_a = state.select.ranges) || void 0 === _a ? void 0 : _a.length);
       state.table.stateManager.updateSelectPos(-1, -1), state.table.stateManager.endSelectCells(!0, isHasSelected), state.table.scenegraph.updateNextFrame();
@@ -53133,7 +53379,7 @@
         let lineX, backX, lineY, backY;
         state.updateCursor("grabbing");
         const cellLocation = state.table.getCellLocation(state.columnMove.colSource, state.columnMove.rowSource);
-        "columnHeader" === cellLocation ? (backX = state.columnMove.x, lineX = state.table.isLeftFrozenColumn(col) ? state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1) : state.table.isRightFrozenColumn(col) ? state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1) : (state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) - state.table.stateManager.scroll.horizontalBarPos) : ("rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) && (backY = state.columnMove.y, lineY = state.table.isFrozenRow(row) ? state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1) : state.table.isBottomFrozenRow(row) ? state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1) : (state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) - state.table.stateManager.scroll.verticalBarPos), state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY), state.table.fireListeners(TABLE_EVENT_TYPE.CHANGING_HEADER_POSITION, {
+        "columnHeader" === cellLocation ? (backX = state.columnMove.x, lineX = state.table.isLeftFrozenColumn(col) ? state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1) : state.table.isRightFrozenColumn(col) ? state.table.tableNoFrameWidth - state.table.getColsWidth(targetCell.col + 1, state.table.colCount - 1) : (state.columnMove.colTarget >= state.columnMove.colSource ? state.table.getColsWidth(0, state.columnMove.colTarget) : state.table.getColsWidth(0, state.columnMove.colTarget - 1)) - state.table.stateManager.scroll.horizontalBarPos) : ("rowHeader" === cellLocation || state.table.internalProps.layoutMap.isSeriesNumberInBody(col, row) || "row" === state.columnMove.movingColumnOrRow) && (backY = state.columnMove.y, lineY = state.table.isFrozenRow(row) ? state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1) : state.table.isBottomFrozenRow(row) ? state.table.tableNoFrameHeight - state.table.getRowsHeight(targetCell.row + 1, state.table.rowCount - 1) : (state.columnMove.rowTarget >= state.columnMove.rowSource ? state.table.getRowsHeight(0, state.columnMove.rowTarget) : state.table.getRowsHeight(0, state.columnMove.rowTarget - 1)) - state.table.stateManager.scroll.verticalBarPos), state.table.scenegraph.component.updateMoveCol(backX, lineX, backY, lineY), state.table.fireListeners(TABLE_EVENT_TYPE.CHANGING_HEADER_POSITION, {
           col: col,
           row: row,
           x: x,
@@ -53142,14 +53388,15 @@
           lineX: lineX,
           backY: backY,
           lineY: lineY,
-          event: event
+          event: event,
+          movingColumnOrRow: state.columnMove.movingColumnOrRow
         }), state.table.scenegraph.updateNextFrame();
       } else state.updateCursor("not-allowed"), state.columnMove.colTarget = state.columnMove.colSource, state.columnMove.rowTarget = state.columnMove.rowSource;
     }
     function endMoveCol(state) {
       var _a, _b;
       let moveColResult = !1;
-      if ("canMoveHeaderPosition" in state.table.internalProps.layoutMap && state.columnMove.moving && state.columnMove.colSource >= 0 && state.columnMove.rowSource >= 0 && state.columnMove.colTarget >= 0 && state.columnMove.rowTarget >= 0 && !0 !== (null === (_a = state.table.options.customConfig) || void 0 === _a ? void 0 : _a.notUpdateInColumnRowMove)) {
+      if ("canMoveHeaderPosition" in state.table.internalProps.layoutMap && state.columnMove.moving && (state.columnMove.colSource >= 0 || "row" === state.columnMove.movingColumnOrRow) && (state.columnMove.rowSource >= 0 || "column" === state.columnMove.movingColumnOrRow) && (state.columnMove.colTarget >= 0 || "row" === state.columnMove.movingColumnOrRow) && (state.columnMove.rowTarget >= 0 || "column" === state.columnMove.movingColumnOrRow) && !0 !== (null === (_a = state.table.options.customConfig) || void 0 === _a ? void 0 : _a.notUpdateInColumnRowMove)) {
         const oldSourceMergeInfo = state.table.getCellRange(state.columnMove.colSource, state.columnMove.rowSource),
           oldTargetMergeInfo = state.table.getCellRange(state.columnMove.colTarget, state.columnMove.rowTarget),
           moveContext = state.table._moveHeaderPosition({
@@ -53159,7 +53406,9 @@
             col: state.columnMove.colTarget,
             row: state.columnMove.rowTarget
           });
-        if (!moveContext || moveContext.targetIndex === moveContext.sourceIndex) return state.updateCursor(), state.columnMove.moving = !1, delete state.columnMove.colSource, delete state.columnMove.rowSource, delete state.columnMove.colTarget, delete state.columnMove.rowTarget, state.table.scenegraph.component.hideMoveCol(), state.table.scenegraph.updateNextFrame(), !1;
+        if (!moveContext || moveContext.targetIndex === moveContext.sourceIndex) return state.updateCursor(), state.columnMove.moving = !1, setTimeout(() => {
+          delete state.columnMove.colSource, delete state.columnMove.rowSource, delete state.columnMove.colTarget, delete state.columnMove.rowTarget, state.columnMove.movingColumnOrRow = void 0;
+        }, 0), state.table.scenegraph.component.hideMoveCol(), state.table.scenegraph.updateNextFrame(), !1;
         {
           state.table.internalProps.useOneRowHeightFillAll = !1, state.table.internalProps.layoutMap.clearCellRangeMap();
           const sourceMergeInfo = state.table.getCellRange(state.columnMove.colSource, state.columnMove.rowSource),
@@ -53168,11 +53417,11 @@
             colMax = Math.max(sourceMergeInfo.end.col, targetMergeInfo.end.col, oldSourceMergeInfo.end.col, oldTargetMergeInfo.end.col),
             rowMin = Math.min(sourceMergeInfo.start.row, targetMergeInfo.start.row, oldSourceMergeInfo.start.row, oldTargetMergeInfo.start.row);
           let rowMax = Math.max(sourceMergeInfo.end.row, targetMergeInfo.end.row, oldSourceMergeInfo.end.row, oldTargetMergeInfo.end.row);
-          "row" === moveContext.moveType && "tree" === state.table.internalProps.layoutMap.rowHierarchyType && (rowMax = moveContext.targetIndex > moveContext.sourceIndex ? rowMax + moveContext.targetSize - 1 : rowMax + moveContext.sourceSize - 1), !state.table.transpose && state.table.internalProps.layoutMap.isSeriesNumberInBody(state.columnMove.colSource, state.columnMove.rowSource) && (state.table.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex), state.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex)), "column" === moveContext.moveType ? clearWidthsAndHeightsCache(colMin, colMax, 0, -1, state.table) : clearWidthsAndHeightsCache(0, -1, rowMin, rowMax, state.table), state.table.clearCellStyleCache(), state.table.internalProps.layoutMap.isSeriesNumberInBody(state.columnMove.colSource, state.columnMove.rowSource) ? state.table.scenegraph.updateHeaderPosition(state.table.scenegraph.proxy.colStart, state.table.scenegraph.proxy.colEnd, state.table.scenegraph.proxy.rowStart, state.table.scenegraph.proxy.rowEnd, moveContext.moveType) : "column" === moveContext.moveType ? state.table.scenegraph.updateHeaderPosition(colMin, colMax, 0, -1, moveContext.moveType) : state.table.scenegraph.updateHeaderPosition(0, -1, rowMin, rowMax, moveContext.moveType), "adjustFrozenCount" === state.table.internalProps.frozenColDragHeaderMode && state.table.isListTable() && (state.table.isLeftFrozenColumn(state.columnMove.colTarget) && !state.table.isLeftFrozenColumn(state.columnMove.colSource) ? state.table.frozenColCount += sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1 : state.table.isLeftFrozenColumn(state.columnMove.colSource) && !state.table.isLeftFrozenColumn(state.columnMove.colTarget) && (state.table.frozenColCount -= sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1), state.table.isRightFrozenColumn(state.columnMove.colTarget) && !state.table.isRightFrozenColumn(state.columnMove.colSource) ? state.table.rightFrozenColCount += sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1 : state.table.isRightFrozenColumn(state.columnMove.colSource) && !state.table.isRightFrozenColumn(state.columnMove.colTarget) && (state.table.rightFrozenColCount -= sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1)), moveColResult = !0;
+          "row" === moveContext.moveType && "tree" === state.table.internalProps.layoutMap.rowHierarchyType && (rowMax = moveContext.targetIndex > moveContext.sourceIndex ? rowMax + moveContext.targetSize - 1 : rowMax + moveContext.sourceSize - 1), state.table.transpose || !state.table.internalProps.layoutMap.isSeriesNumberInBody(state.columnMove.colSource, state.columnMove.rowSource) && "row" !== state.columnMove.movingColumnOrRow || (state.table.changeRecordOrder(moveContext.sourceIndex, moveContext.targetIndex), state.changeCheckboxAndRadioOrder(moveContext.sourceIndex, moveContext.targetIndex)), "column" === moveContext.moveType ? clearWidthsAndHeightsCache(colMin, colMax, 0, -1, state.table) : clearWidthsAndHeightsCache(0, -1, rowMin, rowMax, state.table), state.table.clearCellStyleCache(), state.table.internalProps.layoutMap.isSeriesNumberInBody(state.columnMove.colSource, state.columnMove.rowSource) || "row" === state.columnMove.movingColumnOrRow ? state.table.scenegraph.updateHeaderPosition(state.table.scenegraph.proxy.colStart, state.table.scenegraph.proxy.colEnd, state.table.scenegraph.proxy.rowStart, state.table.scenegraph.proxy.rowEnd, moveContext.moveType) : "column" === moveContext.moveType ? state.table.scenegraph.updateHeaderPosition(colMin, colMax, 0, -1, moveContext.moveType) : state.table.scenegraph.updateHeaderPosition(0, -1, rowMin, rowMax, moveContext.moveType), "adjustFrozenCount" === state.table.internalProps.frozenColDragHeaderMode && state.table.isListTable() && (state.table.isLeftFrozenColumn(state.columnMove.colTarget) && !state.table.isLeftFrozenColumn(state.columnMove.colSource) ? state.table.frozenColCount += sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1 : state.table.isLeftFrozenColumn(state.columnMove.colSource) && !state.table.isLeftFrozenColumn(state.columnMove.colTarget) && (state.table.frozenColCount -= sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1), state.table.isRightFrozenColumn(state.columnMove.colTarget) && !state.table.isRightFrozenColumn(state.columnMove.colSource) ? state.table.rightFrozenColCount += sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1 : state.table.isRightFrozenColumn(state.columnMove.colSource) && !state.table.isRightFrozenColumn(state.columnMove.colTarget) && (state.table.rightFrozenColCount -= sourceMergeInfo.end.col - sourceMergeInfo.start.col + 1)), moveColResult = !0;
         }
       }
       return state.columnMove.moving = !1, setTimeout(() => {
-        delete state.columnMove.colSource, delete state.columnMove.rowSource, delete state.columnMove.colTarget, delete state.columnMove.rowTarget;
+        delete state.columnMove.colSource, delete state.columnMove.rowSource, delete state.columnMove.colTarget, delete state.columnMove.rowTarget, state.columnMove.movingColumnOrRow = void 0;
       }, 0), state.table.scenegraph.component.hideMoveCol(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? (state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen), state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount)) : state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount) : state.table.options.frozenColCount ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1) : state.table.options.rightFrozenColCount && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.updateNextFrame(), !0 === (null === (_b = state.table.options.customConfig) || void 0 === _b ? void 0 : _b.notUpdateInColumnRowMove) || moveColResult;
     }
     function clearWidthsAndHeightsCache(colMin, colMax, rowMin, rowMax, table) {
@@ -53210,6 +53459,7 @@
     }
 
     function updateResizeColumn(xInTable, yInTable, state) {
+      var _a;
       xInTable = Math.ceil(xInTable), yInTable = Math.ceil(yInTable);
       let detaX = state.columnResize.isRightFrozen ? state.columnResize.x - xInTable : xInTable - state.columnResize.x;
       if (Math.abs(detaX) < 1) return;
@@ -53234,7 +53484,9 @@
         }
         rightColWidth - detaX < state.table.internalProps.limitMinWidth && (detaX = rightColWidth - state.table.internalProps.limitMinWidth);
       }
-      detaX = Math.ceil(detaX), state.columnResize.col < state.table.rowHeaderLevelCount || state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount ? updateResizeColForColumn(detaX, state) : "indicator" === state.table.internalProps.columnResizeType ? updateResizeColForIndicator$1(detaX, state) : "indicatorGroup" === state.table.internalProps.columnResizeType ? updateResizeColForIndicatorGroup$1(detaX, state) : "all" === state.table.internalProps.columnResizeType ? updateResizeColForAll$1(detaX, state) : updateResizeColForColumn(detaX, state), state.columnResize.x = xInTable, state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen), state.table._updateSize(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen) : state.table.options.frozenColCount && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1), (state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose || state.table.options.rightFrozenColCount) && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.updateNextFrame();
+      detaX = Math.ceil(detaX), state.columnResize.col < state.table.rowHeaderLevelCount || state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount ? updateResizeColForColumn(detaX, state) : "indicator" === state.table.internalProps.columnResizeType ? updateResizeColForIndicator$1(detaX, state) : "indicatorGroup" === state.table.internalProps.columnResizeType ? updateResizeColForIndicatorGroup$1(detaX, state) : "all" === state.table.internalProps.columnResizeType ? updateResizeColForAll$1(detaX, state) : updateResizeColForColumn(detaX, state), state.columnResize.x = xInTable, state.table.scenegraph.component.updateResizeCol(state.columnResize.col, yInTable, state.columnResize.isRightFrozen), state.table._updateSize(), null === (_a = state.table.internalProps.legends) || void 0 === _a || _a.forEach(legend => {
+        null == legend || legend.resize();
+      }), state.table.internalProps.title && state.table.internalProps.title.resize(), state.table.internalProps.emptyTip && state.table.internalProps.emptyTip.resize(), state.columnResize.col < state.table.frozenColCount && !state.table.isPivotTable() && !state.table.transpose ? state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1, state.columnResize.isRightFrozen) : state.table.options.frozenColCount && state.table.scenegraph.component.setFrozenColumnShadow(state.table.frozenColCount - 1), (state.columnResize.col >= state.table.colCount - state.table.rightFrozenColCount && !state.table.isPivotTable() && !state.table.transpose || state.table.options.rightFrozenColCount) && state.table.scenegraph.component.setRightFrozenColumnShadow(state.table.colCount - state.table.rightFrozenColCount), state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForColumn(detaX, state) {
       "adaptive" === state.table.widthMode && state.columnResize.col < state.table.colCount - 1 ? (state.table.scenegraph.updateColWidth(state.columnResize.col, detaX), state.table.scenegraph.updateColWidth(state.columnResize.col + 1, -detaX), state.table.internalProps._widthResizedColMap.add(state.columnResize.col), state.table.internalProps._widthResizedColMap.add(state.columnResize.col + 1)) : (state.table.scenegraph.updateColWidth(state.columnResize.col, detaX), state.table.internalProps._widthResizedColMap.add(state.columnResize.col));
@@ -53548,6 +53800,7 @@
     }
 
     function updateResizeRow(xInTable, yInTable, state) {
+      var _a;
       xInTable = Math.ceil(xInTable), yInTable = Math.ceil(yInTable);
       let detaY = state.rowResize.isBottomFrozen ? state.rowResize.y - yInTable : yInTable - state.rowResize.y;
       if (Math.abs(detaY) < 1) return;
@@ -53557,7 +53810,9 @@
         let bottomRowHeight = state.table.getRowHeight(state.rowResize.row + 1);
         bottomRowHeight -= detaY, bottomRowHeight - detaY < state.table.internalProps.limitMinHeight && (detaY = bottomRowHeight - state.table.internalProps.limitMinHeight);
       }
-      detaY = Math.ceil(detaY), state.rowResize.row < state.table.columnHeaderLevelCount || state.rowResize.row >= state.table.rowCount - state.table.bottomFrozenRowCount ? updateResizeColForRow(detaY, state) : "indicator" === state.table.internalProps.rowResizeType ? updateResizeColForIndicator(detaY, state) : "indicatorGroup" === state.table.internalProps.rowResizeType ? updateResizeColForIndicatorGroup(detaY, state) : "all" === state.table.internalProps.rowResizeType ? updateResizeColForAll(detaY, state) : updateResizeColForRow(detaY, state), state.rowResize.y = yInTable, state.table.scenegraph.component.updateResizeRow(state.rowResize.row, xInTable, state.rowResize.isBottomFrozen), state.table._updateSize(), state.table.scenegraph.updateNextFrame();
+      detaY = Math.ceil(detaY), state.rowResize.row < state.table.columnHeaderLevelCount || state.rowResize.row >= state.table.rowCount - state.table.bottomFrozenRowCount ? updateResizeColForRow(detaY, state) : "indicator" === state.table.internalProps.rowResizeType ? updateResizeColForIndicator(detaY, state) : "indicatorGroup" === state.table.internalProps.rowResizeType ? updateResizeColForIndicatorGroup(detaY, state) : "all" === state.table.internalProps.rowResizeType ? updateResizeColForAll(detaY, state) : updateResizeColForRow(detaY, state), state.rowResize.y = yInTable, state.table.scenegraph.component.updateResizeRow(state.rowResize.row, xInTable, state.rowResize.isBottomFrozen), state.table._updateSize(), null === (_a = state.table.internalProps.legends) || void 0 === _a || _a.forEach(legend => {
+        null == legend || legend.resize();
+      }), state.table.internalProps.title && state.table.internalProps.title.resize(), state.table.internalProps.emptyTip && state.table.internalProps.emptyTip.resize(), state.table.scenegraph.updateNextFrame();
     }
     function updateResizeColForRow(detaY, state) {
       "adaptive" === state.table.heightMode && state.rowResize.row < state.table.rowCount - 1 ? (state.table.scenegraph.updateRowHeight(state.rowResize.row, detaY), state.table.scenegraph.updateRowHeight(state.rowResize.row + 1, -detaY), state.table.internalProps._heightResizedRowMap.add(state.rowResize.row), state.table.internalProps._heightResizedRowMap.add(state.rowResize.row + 1)) : (state.table.scenegraph.updateRowHeight(state.rowResize.row, detaY), state.table.internalProps._heightResizedRowMap.add(state.rowResize.row));
@@ -53729,7 +53984,8 @@
           rowTargetSize: 0,
           x: 0,
           y: 0,
-          moving: !1
+          moving: !1,
+          movingColumnOrRow: void 0
         }, this.menu = {
           x: -1,
           y: -1,
@@ -53796,7 +54052,8 @@
           rowTargetSize: 0,
           x: 0,
           y: 0,
-          moving: !1
+          moving: !1,
+          movingColumnOrRow: void 0
         }, this.menu = {
           x: -1,
           y: -1,
@@ -53963,7 +54220,7 @@
         if (this.select.selecting) {
           if (this.select.selecting = !1, 0 === this.select.ranges.length) return;
           const currentRange = this.select.ranges[this.select.ranges.length - 1];
-          this.table.isSeriesNumber(this.select.cellPos.col, this.select.cellPos.row) || this.table.isHeader(this.select.cellPos.col, this.select.cellPos.row) || expendCellRange(currentRange, this.table);
+          this.table.isSeriesNumber(this.select.cellPos.col, this.select.cellPos.row) || this.table.isHeader(this.select.cellPos.col, this.select.cellPos.row) || this.table.isSeriesNumberInBody(currentRange.start.col, currentRange.start.row) || expendCellRange(currentRange, this.table);
           let isSame = !1;
           for (let i = 0; i < this.select.ranges.length - 1; i++) {
             const range = this.select.ranges[i];
@@ -54019,8 +54276,8 @@
           direction: this.fillHandle.direction
         }), this.fillHandle.beforeFillMaxCol = void 0, this.fillHandle.beforeFillMaxRow = void 0, this.fillHandle.beforeFillMinCol = void 0, this.fillHandle.beforeFillMinRow = void 0;
       }
-      startMoveCol(col, row, x, y, event) {
-        startMoveCol(col, row, x, y, this, event);
+      startMoveCol(col, row, x, y, event, dragColumnOrRow) {
+        startMoveCol(col, row, x, y, this, event, dragColumnOrRow);
       }
       updateMoveCol(col, row, x, y, event) {
         updateMoveCol(col, row, x, y, this, event);
@@ -54677,7 +54934,7 @@
         this.scrollHandle = scrollHandle;
       }
       startInertia(speedX, speedY, friction) {
-        this.lastTime = Date.now(), this.speedX = speedX, this.speedY = speedY, this.friction = friction, this.runingId || (this.runingId = requestAnimationFrame(this.inertia.bind(this)));
+        this.lastTime = Date.now(), this.speedX = speedX, this.speedY = speedY, this.friction = friction, this.runingId || (this.runingId = vglobal.getRequestAnimationFrame()(this.inertia.bind(this)));
       }
       inertia() {
         var _a;
@@ -54689,10 +54946,10 @@
           newSpeedY = f * this.speedY;
         let dx = 0,
           dy = 0;
-        Math.abs(newSpeedX) > .05 && (stopped = !1, dx = (this.speedX + newSpeedX) / 2 * dffTime), Math.abs(newSpeedY) > .05 && (stopped = !1, dy = (this.speedY + newSpeedY) / 2 * dffTime), null === (_a = this.scrollHandle) || void 0 === _a || _a.call(this, dx, dy), stopped ? this.runingId = null : (this.lastTime = now, this.speedX = newSpeedX, this.speedY = newSpeedY, this.runingId = requestAnimationFrame(this.inertia.bind(this)));
+        Math.abs(newSpeedX) > .05 && (stopped = !1, dx = (this.speedX + newSpeedX) / 2 * dffTime), Math.abs(newSpeedY) > .05 && (stopped = !1, dy = (this.speedY + newSpeedY) / 2 * dffTime), null === (_a = this.scrollHandle) || void 0 === _a || _a.call(this, dx, dy), stopped ? this.runingId = null : (this.lastTime = now, this.speedX = newSpeedX, this.speedY = newSpeedY, this.runingId = vglobal.getRequestAnimationFrame()(this.inertia.bind(this)));
       }
       endInertia() {
-        cancelAnimationFrame(this.runingId), this.runingId = null;
+        vglobal.getCancelAnimationFrame()(this.runingId), this.runingId = null;
       }
       isInertiaScrolling() {
         return !!this.runingId;
@@ -54707,7 +54964,8 @@
               colSource: colSource,
               rowSource: rowSource,
               colTarget: colTarget,
-              rowTarget: rowTarget
+              rowTarget: rowTarget,
+              movingColumnOrRow: movingColumnOrRow
             } = table.stateManager.columnMove,
             rowSourceSize = null !== (_e = table.stateManager.columnMove.rowSourceSize) && void 0 !== _e ? _e : 0,
             rowTargetSize = null !== (_f = table.stateManager.columnMove.rowTargetSize) && void 0 !== _f ? _f : 0;
@@ -54720,6 +54978,7 @@
               col: colSource,
               row: rowSource
             },
+            movingColumnOrRow: movingColumnOrRow,
             event: e
           });
         }
@@ -54735,6 +54994,7 @@
             col: table.stateManager.columnMove.colSource,
             row: table.stateManager.columnMove.rowSource
           },
+          movingColumnOrRow: table.stateManager.columnMove.movingColumnOrRow,
           event: e
         });
       }
@@ -54760,7 +55020,7 @@
           event: e.nativeEvent,
           target: null === (_e = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _e ? void 0 : _e.target,
           mergeCellInfo: null === (_f = eventArgsSet.eventArgs) || void 0 === _f ? void 0 : _f.mergeInfo
-        }), stateManager.interactionState === InteractionState.grabing) return void (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1 && (stateManager.isResizeCol() || stateManager.isResizeRow() || (stateManager.isMoveCol() ? eventManager.dealColumnMover(eventArgsSet) : stateManager.isFillHandle() ? eventManager.dealFillSelect(eventArgsSet, !0) : (null === (_g = table.options.select) || void 0 === _g ? void 0 : _g.disableDragSelect) || eventManager.dealTableSelect(eventArgsSet, !0))));
+        }), stateManager.interactionState === InteractionState.grabing) return void (Math.abs(lastX - e.x) + Math.abs(lastY - e.y) >= 1 && (stateManager.isResizeCol() || stateManager.isResizeRow() || stateManager.isMoveCol() || (stateManager.isFillHandle() ? eventManager.dealFillSelect(eventArgsSet, !0) : (null === (_g = table.options.select) || void 0 === _g ? void 0 : _g.disableDragSelect) || eventManager.dealTableSelect(eventArgsSet, !0))));
         !(null === (_h = table.options.select) || void 0 === _h ? void 0 : _h.disableDragSelect) && table.eventManager.isDraging && stateManager.isSelecting() && !(null === (_j = table.editorManager) || void 0 === _j ? void 0 : _j.editingEditor) && eventManager.dealTableSelect(eventArgsSet, !0);
         const cellGoup = e.path.find(node => "cell" === node.role);
         if (table.hasListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL) && (-1 === table.stateManager.hover.cellPos.col || -1 === table.stateManager.hover.cellPos.row || (null == cellGoup ? void 0 : cellGoup.col) === table.stateManager.hover.cellPos.col && (null == cellGoup ? void 0 : cellGoup.row) === table.stateManager.hover.cellPos.row || table.fireListeners(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, {
@@ -55430,7 +55690,7 @@
         !1 !== (null === (_a = table.eventOptions) || void 0 === _a ? void 0 : _a.preventDefaultContextMenu) ? e.preventDefault() : globalPointerupCallback(e);
       }), table.options.canvas || handler.on(table.getContainer(), "resize", e => {
         var _a;
-        table.isReleased || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$3(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio$1()), e.windowSizeNotChange || table.resize());
+        table.isReleased || 0 === e.width && 0 === e.height || ((table.autoFillWidth || table.autoFillHeight || "adaptive" === table.widthMode || "adaptive" === table.heightMode) && (null === (_a = table.editorManager) || void 0 === _a || _a.completeEdit()), isValid$3(table.options.pixelRatio) || table.setPixelRatio(getPixelRatio$1()), e.windowSizeNotChange || table.resize());
       });
       const globalPointerdownCallback = e => {
         var _a;
@@ -55512,10 +55772,10 @@
         stateManager.interactionState === InteractionState.grabing && (stateManager.isResizeCol() ? (eventManager.dealColumnResize(x, y), table.hasListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN) && table.fireListeners(TABLE_EVENT_TYPE.RESIZE_COLUMN, {
           col: table.stateManager.columnResize.col,
           colWidth: table.getColWidth(table.stateManager.columnResize.col)
-        })) : stateManager.isResizeRow() && (eventManager.dealRowResize(x, y), table.hasListeners(TABLE_EVENT_TYPE.RESIZE_ROW) && table.fireListeners(TABLE_EVENT_TYPE.RESIZE_ROW, {
+        })) : stateManager.isResizeRow() ? (eventManager.dealRowResize(x, y), table.hasListeners(TABLE_EVENT_TYPE.RESIZE_ROW) && table.fireListeners(TABLE_EVENT_TYPE.RESIZE_ROW, {
           row: table.stateManager.rowResize.row,
           rowHeight: table.getRowHeight(table.stateManager.rowResize.row)
-        })));
+        })) : stateManager.isMoveCol() && eventManager.dealColumnMover(x, y, e));
         const isSelecting = table.stateManager.isSelecting();
         if (eventManager._enableTableScroll && eventManager.isDraging && isSelecting && (null === (_e = table.stateManager.select.ranges) || void 0 === _e ? void 0 : _e.length) > 0) {
           const drawRange = table.getDrawRange(),
@@ -56129,12 +56389,10 @@
         } = eventArgsSet;
         return !(!eventArgs || !this.table._canDragHeaderPosition(eventArgs.col, eventArgs.row)) && (this.table.stateManager.startMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = null == eventArgs ? void 0 : eventArgs.event) || void 0 === _a ? void 0 : _a.nativeEvent), !0);
       }
-      dealColumnMover(eventArgsSet) {
-        var _a;
-        const {
-          eventArgs: eventArgs
-        } = eventArgsSet;
-        isValid$3(eventArgs.col) && isValid$3(eventArgs.row) && this.table.stateManager.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = null == eventArgs ? void 0 : eventArgs.event) || void 0 === _a ? void 0 : _a.nativeEvent);
+      dealColumnMover(x, y, event) {
+        let col = this.table.getColAtRelativePosition(x),
+          row = this.table.getRowAtRelativePosition(y);
+        -1 === col && "row" === this.table.stateManager.columnMove.movingColumnOrRow && (col = 0), -1 === row && "column" === this.table.stateManager.columnMove.movingColumnOrRow && (row = 0), isValid$3(col) && isValid$3(row) && this.table.stateManager.updateMoveCol(col, row, x, y, event);
       }
       startColumnResize(eventArgsSet) {}
       dealIconClick(e, eventArgsSet) {
@@ -57601,12 +57859,12 @@
       clearRange() {
         this.cumulativeSum.clear(), this.difference.clear();
       }
-      add(position, value) {
+      _add(position, value) {
         if (!isValid$3(value)) return;
         const defaultValue = this.table.getRowHeight(position);
         this.data.has(position) || (this._keys.push(position), this._sorted = !1), this.data.set(position, value), this.totalSum += value, this.updateDifference(position, value - defaultValue);
       }
-      remove(position) {
+      _remove(position) {
         if (this.data.has(position)) {
           const value = this.data.get(position);
           this.data.delete(position);
@@ -57623,7 +57881,7 @@
           this.data.set(position, newValue);
           const difference = newValue - oldValue;
           this.totalSum += difference, this.updateDifference(position, difference);
-        } else this.add(position, newValue);
+        } else this._add(position, newValue);
       }
       get(position) {
         return this.data.get(position);
@@ -57690,21 +57948,38 @@
       }
       insert(position, value) {
         for (let i = position; i <= this.getLastIndex(); i++) this.cumulativeSum.delete(i);
-        const lastIndex = this.getLastIndex() + 1;
-        this.adjustOrder(position, position + 1, lastIndex - position), isValid$3(value) && this.put(position, value);
+        const lastIndex = this.getLastIndex() + 1,
+          values = [];
+        for (let i = position; i <= lastIndex; i++) this.has(i) && (values.push({
+          position: i,
+          value: this.get(i)
+        }), this._remove(i));
+        isValid$3(value) && this.put(position, value);
+        for (const {
+          position: position,
+          value: value
+        } of values) this.put(position + 1, value);
       }
       getLastIndex() {
         return this._sort(), this._keys[this._keys.length - 1];
       }
       delLast() {
         const lastIndex = this.getLastIndex();
-        this.remove(lastIndex);
+        this._remove(lastIndex);
       }
       delete(position) {
-        if (!this.has(position)) return;
         for (let i = position; i <= this.getLastIndex(); i++) this.cumulativeSum.delete(i);
         const lastIndex = this.getLastIndex();
-        this.adjustOrder(position + 1, position, lastIndex - position), this.delLast();
+        this.has(position) && this._remove(position);
+        const values = [];
+        for (let i = position + 1; i <= lastIndex; i++) this.has(i) && values.push({
+          position: i,
+          value: this.get(i)
+        });
+        for (const {
+          position: position,
+          value: value
+        } of values) this._remove(position), this._add(position - 1, value);
       }
       adjustOrder(sourceIndex, targetIndex, moveCount) {
         this.clearRange(), this._sort();
@@ -57732,28 +58007,12 @@
         }
       }
       exchangeOrder(sourceIndex, sourceCount, targetIndex, targetCount, insertIndex) {
-        const {
-          _keys: keys
-        } = this;
-        if (this._sorted || (keys.sort((a, b) => a < b ? -1 : a > b ? 1 : 0), this._sorted = !0), sourceIndex > targetIndex) {
-          const targetVals = [],
-            sourceVals = [];
-          for (let i = indexFirst(keys, targetIndex); i < indexFirst(keys, sourceIndex) + sourceCount; i++) {
-            const key = keys[i];
-            key >= sourceIndex && key < sourceIndex + sourceCount ? sourceVals.push(this.get(key)) : targetVals.push(this.get(key));
-          }
-          for (let i = 0; i < sourceCount; i++) this.put(insertIndex + i, sourceVals[i]);
-          for (let i = 0; i < targetVals.length; i++) this.put(insertIndex + sourceCount + i, targetVals[i]);
-        } else {
-          const targetVals = [],
-            sourceVals = [];
-          for (let i = indexFirst(keys, sourceIndex); i < indexFirst(keys, targetIndex) + targetCount; i++) {
-            const key = keys[i];
-            key >= sourceIndex && key < sourceIndex + sourceCount ? sourceVals.push(this.get(key)) : targetVals.push(this.get(key));
-          }
-          for (let i = 0; i < sourceCount; i++) this.put(insertIndex + i, sourceVals[i]);
-          for (let i = 0; i < targetVals.length; i++) this.put(sourceIndex + i, targetVals[i]);
-        }
+        const values = [];
+        for (let i = sourceIndex + sourceCount - 1; i >= sourceIndex; i--) values.push({
+          position: i,
+          value: this.get(i)
+        }), this.delete(i);
+        for (let i = 0; i < sourceCount; i++) this.insert(insertIndex, values[i].value);
       }
     }
     function indexFirst(arr, elm) {
@@ -57764,7 +58023,8 @@
         if (arr[i] === elm) return i;
         arr[i] > elm ? high = i - 1 : low = i + 1;
       }
-      return high < 0 ? 0 : high;
+      const tempI = high < 0 ? 0 : high;
+      return arr[tempI] === elm ? tempI : -1;
     }
 
     class RowSeriesNumberHelper {
@@ -58180,6 +58440,34 @@
         row: -1
       };
     }
+    function getColAtRelativePosition(x, _this) {
+      let leftFrozen = !1;
+      (x -= _this.tableX) > 0 && x < _this.getFrozenColsWidth() && (leftFrozen = !0);
+      let rightFrozen = !1;
+      x > _this.tableNoFrameWidth - _this.getRightFrozenColsWidth() && x < _this.tableNoFrameWidth && x <= _this.getAllColsWidth() && (rightFrozen = !0);
+      const colInfo = getTargetColAtConsiderRightFrozen((leftFrozen || rightFrozen ? x : x + _this.scrollLeft) + _this.tableX, rightFrozen, _this);
+      if (colInfo) {
+        const {
+          col: col
+        } = colInfo;
+        return col;
+      }
+      return -1;
+    }
+    function getRowAtRelativePosition(y, _this) {
+      let topFrozen = !1;
+      (y -= _this.tableY) > 0 && y < _this.getFrozenRowsHeight() && (topFrozen = !0);
+      let bottomFrozen = !1;
+      y > _this.tableNoFrameHeight - _this.getBottomFrozenRowsHeight() && y < _this.tableNoFrameHeight && y <= _this.getAllRowsHeight() && (bottomFrozen = !0);
+      const rowInfo = getTargetRowAtConsiderBottomFrozen((topFrozen || bottomFrozen ? y : y + _this.scrollTop) + _this.tableY, bottomFrozen, _this);
+      if (rowInfo) {
+        const {
+          row: row
+        } = rowInfo;
+        return row;
+      }
+      return -1;
+    }
 
     function isValidAlignDomain(domain) {
       return 2 === domain.length && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
@@ -59098,7 +59386,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.22.0", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.1", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager$1(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -59850,6 +60138,12 @@
       getCellAtRelativePosition(relativeX, relativeY) {
         return getCellAtRelativePosition(relativeX, relativeY, this);
       }
+      getColAtRelativePosition(relativeX) {
+        return getColAtRelativePosition(relativeX, this);
+      }
+      getRowAtRelativePosition(relativeY) {
+        return getRowAtRelativePosition(relativeY, this);
+      }
       _checkRowCol(col, row) {
         return col >= 0 && col < this.colCount && row >= 0 && row < this.rowCount;
       }
@@ -61233,6 +61527,22 @@
           height: !1
         };
       }
+      isColumnSelected(col) {
+        const selectRange = this.stateManager.select.ranges;
+        for (let i = 0; i <= selectRange.length - 1; i++) {
+          const range = selectRange[i];
+          if (range.start.col <= col && range.end.col >= col && 0 === range.start.row && range.end.row === this.rowCount - 1) return !0;
+        }
+        return !1;
+      }
+      isRowSelected(row) {
+        const selectRange = this.stateManager.select.ranges;
+        for (let i = 0; i <= selectRange.length - 1; i++) {
+          const range = selectRange[i];
+          if (range.start.row <= row && range.end.row >= row && 0 === range.start.col && range.end.col === this.colCount - 1) return !0;
+        }
+        return !1;
+      }
     }
 
     const chartTypes = {};
@@ -63260,13 +63570,14 @@
         }
       }
       canMoveHeaderPosition(source, target) {
+        const dragColumnOrRow = this._table.stateManager.columnMove.movingColumnOrRow;
         if (this.isSeriesNumberInHeader(target.col, target.row) || this.isSeriesNumberInHeader(source.col, source.row)) return !1;
-        if (!this.transpose && this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row)) {
+        if (!this.transpose && (this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row) || "row" === dragColumnOrRow)) {
           const sourceIndex = this.getRecordShowIndexByCell(0, source.row),
             targetIndex = this.getRecordShowIndexByCell(0, target.row);
           return this._table.dataSource.canChangeOrder(sourceIndex, targetIndex);
         }
-        if (this.transpose && this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row) && (this.getBody(source.col + this.leftRowSeriesNumberColumnCount, source.row).isChildNode && this.getBody(target.col + this.leftRowSeriesNumberColumnCount, target.row).isChildNode ? (source.col = source.col + this.leftRowSeriesNumberColumnCount + this.rowHeaderLevelCount - 1, target.col = target.col + this.leftRowSeriesNumberColumnCount + this.rowHeaderLevelCount - 1) : (source.col = source.col + this.leftRowSeriesNumberColumnCount, target.col = target.col + this.leftRowSeriesNumberColumnCount)), source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) return !1;
+        if (this.transpose && (this.isSeriesNumberInBody(target.col, target.row) && this.isSeriesNumberInBody(source.col, source.row) || "row" === dragColumnOrRow) && (this.getBody(source.col + this.leftRowSeriesNumberColumnCount, source.row).isChildNode && this.getBody(target.col + this.leftRowSeriesNumberColumnCount, target.row).isChildNode ? (source.col = source.col + this.leftRowSeriesNumberColumnCount + this.rowHeaderLevelCount - 1, target.col = target.col + this.leftRowSeriesNumberColumnCount + this.rowHeaderLevelCount - 1) : (source.col = source.col + this.leftRowSeriesNumberColumnCount, target.col = target.col + this.leftRowSeriesNumberColumnCount)), source.col < 0 || source.row < 0 || target.col < 0 || target.row < 0) return !1;
         if ("disabled" === this._table.internalProps.frozenColDragHeaderMode && this._table.isFrozenColumn(target.col)) return !1;
         const sourceCellRange = this.getCellRange(source.col, source.row);
         if (this.isColumnHeader(source.col, source.row)) {
@@ -63278,7 +63589,7 @@
         return !1;
       }
       moveHeaderPosition(source, target) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g;
         if ((!(null === (_a = this._table.options.dragOrder) || void 0 === _a ? void 0 : _a.validateDragOrderOnEnd) || (null === (_b = this._table.options.dragOrder) || void 0 === _b ? void 0 : _b.validateDragOrderOnEnd(source, target))) && this.canMoveHeaderPosition(source, target)) {
           let sourceCellRange = this.getCellRange(source.col, source.row);
           if (this.isColumnHeader(source.col, source.row)) {
@@ -63290,8 +63601,18 @@
               const sourceIds = this._headerCellIds[row].splice(sourceCellRange.start.col - this.leftRowSeriesNumberColumnCount, sourceSize);
               sourceIds.unshift(targetIndex - this.leftRowSeriesNumberColumnCount, 0), Array.prototype.splice.apply(this._headerCellIds[row], sourceIds);
             }
+            if (null === (_c = this._table.options.dragOrder) || void 0 === _c ? void 0 : _c.maintainArrayDataOrder) for (let j = 0; j < (null === (_d = this._table.dataSource.dataSourceObj) || void 0 === _d ? void 0 : _d.records.length); j++) {
+              const rowRecords = null === (_e = this._table.dataSource.dataSourceObj) || void 0 === _e ? void 0 : _e.records[j];
+              if (Array.isArray(rowRecords)) {
+                rowRecords.length - 1 < targetIndex && rowRecords.push(...Array(targetIndex - rowRecords.length + 1).fill(void 0));
+                const sourceData = rowRecords.splice(sourceCellRange.start.col - this.leftRowSeriesNumberColumnCount, sourceSize);
+                sourceData.unshift(targetIndex - this.leftRowSeriesNumberColumnCount, 0), Array.prototype.splice.apply(rowRecords, sourceData);
+              }
+            }
             const sourceColumns = this._columns.splice(sourceCellRange.start.col - this.leftRowSeriesNumberColumnCount, sourceSize);
-            return sourceColumns.unshift(targetIndex - this.leftRowSeriesNumberColumnCount, 0), Array.prototype.splice.apply(this._columns, sourceColumns), this.columnTree.movePosition(sourceCellRange.start.row, sourceCellRange.start.col - this.leftRowSeriesNumberColumnCount, targetIndex - this.leftRowSeriesNumberColumnCount), this.columnTree.reset(this.columnTree.tree.children), this._cellRangeMap = new Map(), {
+            if (sourceColumns.unshift(targetIndex - this.leftRowSeriesNumberColumnCount, 0), Array.prototype.splice.apply(this._columns, sourceColumns), null === (_f = this._table.options.dragOrder) || void 0 === _f ? void 0 : _f.maintainArrayDataOrder) for (let i = 0; i < this._columns.length; i++) this._columns[i].field = i;
+            if (this.columnTree.movePosition(sourceCellRange.start.row, sourceCellRange.start.col - this.leftRowSeriesNumberColumnCount, targetIndex - this.leftRowSeriesNumberColumnCount), null === (_g = this._table.options.dragOrder) || void 0 === _g ? void 0 : _g.maintainArrayDataOrder) for (let i = 0; i < this.columnTree.tree.children.length; i++) this.columnTree.tree.children[i].field = i;
+            return this.columnTree.reset(this.columnTree.tree.children), this._cellRangeMap = new Map(), {
               sourceIndex: sourceCellRange.start.col,
               targetIndex: targetIndex,
               sourceSize: sourceSize,
@@ -63318,7 +63639,7 @@
               moveType: "row"
             };
           }
-          if (this.isSeriesNumberInBody(source.col, source.row)) return {
+          if (this.isSeriesNumberInBody(source.col, source.row) || "row" === this._table.stateManager.columnMove.movingColumnOrRow) return {
             sourceIndex: source.row,
             targetIndex: target.row,
             sourceSize: 1,
@@ -64290,14 +64611,17 @@
       get recordsCount() {
         return this.dataSource.records.length;
       }
-      updateColumns(columns, options) {
+      updateColumns(columns, options = {
+        clearColWidthCache: !1,
+        clearRowHeightCache: !0
+      }) {
         var _a, _b, _c, _d;
         this.scenegraph.clearCells();
         const oldHoverState = {
           col: this.stateManager.hover.cellPos.col,
           row: this.stateManager.hover.cellPos.row
         };
-        this.internalProps.columns = cloneDeepSpec(columns, ["children"]), generateAggregationForColumn(this), (null == options ? void 0 : options.clearColWidthCache) && this.internalProps._widthResizedColMap.clear(), this.options.columns = columns, this.internalProps.headerHelper.setTableColumnsEditor(), this._hasAutoImageColumn = void 0, this.refreshHeader(), null === (_b = (_a = this.dataSource).updateColumns) || void 0 === _b || _b.call(_a, this.internalProps.columns), this.records && checkHasAggregationOnColumnDefine(this.internalProps.columns) && this.dataSource.processRecords(null !== (_d = null === (_c = this.dataSource.dataSourceObj) || void 0 === _c ? void 0 : _c.records) && void 0 !== _d ? _d : this.dataSource.dataSourceObj), this.internalProps.useOneRowHeightFillAll = !1, this.headerStyleCache = new Map(), this.bodyStyleCache = new Map(), this.bodyBottomStyleCache = new Map(), this.scenegraph.createSceneGraph(), this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this.renderAsync(), this.eventManager.updateEventBinder();
+        this.internalProps.columns = cloneDeepSpec(columns, ["children"]), generateAggregationForColumn(this), (null == options ? void 0 : options.clearColWidthCache) && this.internalProps._widthResizedColMap.clear(), this.options.columns = columns, this.internalProps.headerHelper.setTableColumnsEditor(), this._hasAutoImageColumn = void 0, this.refreshHeader(), null === (_b = (_a = this.dataSource).updateColumns) || void 0 === _b || _b.call(_a, this.internalProps.columns), this.records && checkHasAggregationOnColumnDefine(this.internalProps.columns) && this.dataSource.processRecords(null !== (_d = null === (_c = this.dataSource.dataSourceObj) || void 0 === _c ? void 0 : _c.records) && void 0 !== _d ? _d : this.dataSource.dataSourceObj), this.internalProps.useOneRowHeightFillAll = !1, this.headerStyleCache = new Map(), this.bodyStyleCache = new Map(), this.bodyBottomStyleCache = new Map(), this.scenegraph.createSceneGraph(!(null == options ? void 0 : options.clearRowHeightCache)), this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this.renderAsync(), this.eventManager.updateEventBinder();
       }
       _recreateSceneForStateChange() {
         var _a, _b;
@@ -64309,15 +64633,23 @@
         this._hasAutoImageColumn = void 0, this.refreshHeader(), this.records && checkHasAggregationOnColumnDefine(this.internalProps.columns) && this.dataSource.processRecords(null !== (_b = null === (_a = this.dataSource.dataSourceObj) || void 0 === _a ? void 0 : _a.records) && void 0 !== _b ? _b : this.dataSource.dataSourceObj), this.internalProps.useOneRowHeightFillAll = !1, this.headerStyleCache = new Map(), this.bodyStyleCache = new Map(), this.bodyBottomStyleCache = new Map(), this._updateSize(), this.scenegraph.createSceneGraph(), this.stateManager.updateHoverPos(oldHoverState.col, oldHoverState.row), this.renderAsync(), this.eventManager.updateEventBinder();
       }
       addColumns(toAddColumns, colIndex, isMaintainArrayData = !0) {
+        var _a;
         const columns = this.options.columns;
-        if (void 0 === colIndex ? (colIndex = columns.length, columns.push(...toAddColumns)) : columns.splice(colIndex, 0, ...toAddColumns), isMaintainArrayData) {
+        void 0 === colIndex ? (colIndex = columns.length, columns.push(...toAddColumns)) : columns.splice(colIndex, 0, ...toAddColumns);
+        for (let i = 0; i < toAddColumns.length; i++) this.colWidthsMap.addAndReorder(colIndex + i, null !== (_a = toAddColumns[i].width) && void 0 !== _a ? _a : this.internalProps.defaultColWidth);
+        this.internalProps._colRangeWidthsMap.clear();
+        const resizedColIndexs = Array.from(this.internalProps._widthResizedColMap.keys());
+        for (let i = 0; i < resizedColIndexs.length; i++) resizedColIndexs[i] >= colIndex && (this.internalProps._widthResizedColMap.delete(resizedColIndexs[i]), this.internalProps._widthResizedColMap.add(resizedColIndexs[i] + toAddColumns.length));
+        if (isMaintainArrayData) {
           for (let i = 0; i < columns.length; i++) columns[i].field = i;
           for (let i = 0; i < this.records.length; i++) {
             const record = this.records[i];
             Array.isArray(record) && record.splice(colIndex, 0, ...Array(toAddColumns.length).fill(void 0));
           }
         }
-        this.updateColumns(columns), this.fireListeners(TABLE_EVENT_TYPE.ADD_COLUMN, {
+        this.updateColumns(columns, {
+          clearRowHeightCache: !1
+        }), this.fireListeners(TABLE_EVENT_TYPE.ADD_COLUMN, {
           columnIndex: colIndex,
           columnCount: toAddColumns.length,
           columns: columns
@@ -64326,12 +64658,20 @@
       deleteColumns(deleteColIndexs, isMaintainArrayData = !0) {
         const columns = this.options.columns;
         deleteColIndexs.sort((a, b) => b - a);
-        for (let i = 0; i < deleteColIndexs.length; i++) if (columns.splice(deleteColIndexs[i], 1), isMaintainArrayData) for (let j = 0; j < this.records.length; j++) {
+        for (let i = 0; i < deleteColIndexs.length; i++) if (columns.splice(deleteColIndexs[i], 1), this.colWidthsMap.delAndReorder(deleteColIndexs[i]), this.internalProps._widthResizedColMap.delete(deleteColIndexs[i]), isMaintainArrayData) for (let j = 0; j < this.records.length; j++) {
           const record = this.records[j];
           Array.isArray(record) && record.splice(deleteColIndexs[i], 1);
         }
+        this.internalProps._colRangeWidthsMap.clear();
+        const resizedColIndexs = Array.from(this.internalProps._widthResizedColMap.keys());
+        for (let i = 0; i < resizedColIndexs.length; i++) for (let j = 0; j < deleteColIndexs.length; j++) if (resizedColIndexs[i] > deleteColIndexs[j]) {
+          this.internalProps._widthResizedColMap.delete(resizedColIndexs[i]), this.internalProps._widthResizedColMap.add(resizedColIndexs[i] - (deleteColIndexs.length - j));
+          break;
+        }
         if (isMaintainArrayData) for (let i = 0; i < columns.length; i++) columns[i].field = i;
-        this.updateColumns(columns), this.fireListeners(TABLE_EVENT_TYPE.DELETE_COLUMN, {
+        this.updateColumns(columns, {
+          clearRowHeightCache: !1
+        }), this.fireListeners(TABLE_EVENT_TYPE.DELETE_COLUMN, {
           deleteColIndexs: deleteColIndexs,
           columns: columns
         });
@@ -70229,7 +70569,7 @@
                 cornerRadius: isMilestone
                     ? this._scene._gantt.parsedOptions.taskBarMilestoneStyle.cornerRadius
                     : taskBarStyle.cornerRadius,
-                clip: true
+                clip: this._scene._gantt.parsedOptions.taskBarClip
             });
             barGroup.name = 'task-bar-group';
             barGroupBox.appendChild(barGroup);
@@ -72522,7 +72862,7 @@
         let maxing = false;
         let leading = false;
         let trailing = true;
-        const useRAF = !wait && wait !== 0 && typeof requestAnimationFrame === 'function';
+        const useRAF = !wait && wait !== 0 && typeof vglobal.getRequestAnimationFrame() === 'function';
         if (typeof func !== 'function') {
             throw new TypeError('Expected a function');
         }
@@ -72546,7 +72886,7 @@
         }
         function startTimer(pendingFunc, wait) {
             if (useRAF) {
-                return requestAnimationFrame(pendingFunc);
+                return vglobal.getRequestAnimationFrame()(pendingFunc);
             }
             return setTimeout(pendingFunc, wait);
         }
@@ -72936,7 +73276,7 @@
             this.speedY = speedY;
             this.friction = friction;
             if (!this.runingId) {
-                this.runingId = requestAnimationFrame(this.inertia.bind(this));
+                this.runingId = vglobal.getRequestAnimationFrame()(this.inertia.bind(this));
             }
         }
         inertia() {
@@ -72967,10 +73307,10 @@
             this.lastTime = now;
             this.speedX = newSpeedX;
             this.speedY = newSpeedY;
-            this.runingId = requestAnimationFrame(this.inertia.bind(this));
+            this.runingId = vglobal.getRequestAnimationFrame()(this.inertia.bind(this));
         }
         endInertia() {
-            cancelAnimationFrame(this.runingId);
+            vglobal.getCancelAnimationFrame()(this.runingId);
             this.runingId = null;
             this.stopped = true;
         }
@@ -73899,7 +74239,10 @@
                 startOffsetY: null,
                 targetStartX: null,
                 creating: false,
-                secondTaskBarNode: null
+                firstTaskBarPosition: 'left',
+                secondTaskBarPosition: 'left',
+                secondTaskBarNode: null,
+                lastHighLightLinkPoint: null
             };
             this.updateVerticalScrollBar = this.updateVerticalScrollBar.bind(this);
             this.updateHorizontalScrollBar = this.updateHorizontalScrollBar.bind(this);
@@ -74352,6 +74695,13 @@
             this._gantt.scenegraph.updateNextFrame();
         }
         startAdjustProgressBar(target, x, y) {
+            if (!target || !target.record) {
+                return;
+            }
+            const progressField = this._gantt.parsedOptions.progressField;
+            if (!progressField || target.record[progressField] === undefined || target.record[progressField] === null) {
+                return;
+            }
             const { progress } = this._gantt.getTaskInfoByTaskListIndex(target.task_index, target.sub_task_index);
             this.adjustProgressBar.target = target;
             this.adjustProgressBar.adjusting = true;
@@ -74364,13 +74714,23 @@
         }
         endAdjustProgressBar(x) {
             const target = this.adjustProgressBar.target;
+            if (!target) {
+                return;
+            }
             const taskBarWidth = target.attribute.width;
             const deltaX = x - this.adjustProgressBar.startX;
             const newProgress = Math.max(0, Math.min(100, this.adjustProgressBar.originalProgress + (deltaX / taskBarWidth) * 100));
             if (Math.abs(newProgress - this.adjustProgressBar.originalProgress) >= 0.1) {
                 const taskIndex = target.task_index;
                 const subTaskIndex = target.sub_task_index;
-                this._gantt._updateProgressToTaskRecord(Math.round(newProgress * 10) / 10, taskIndex, subTaskIndex);
+                const progressField = this._gantt.parsedOptions.progressField;
+                if (progressField && target.record) {
+                    target.record[progressField] = Math.round(newProgress * 10) / 10;
+                }
+                if (this.shouldSyncProgressToTable(taskIndex, subTaskIndex)) {
+                    this._gantt._updateProgressToTaskRecord(Math.round(newProgress * 10) / 10, taskIndex, subTaskIndex);
+                }
+                this._gantt.scenegraph.taskBar.updateTaskBarNode(taskIndex, subTaskIndex);
                 const newRecord = this._gantt.getRecordByIndex(taskIndex, subTaskIndex);
                 if (this._gantt.hasListeners(GANTT_EVENT_TYPE.PROGRESS_UPDATE)) {
                     this._gantt.fireListeners(GANTT_EVENT_TYPE.PROGRESS_UPDATE, {
@@ -74390,9 +74750,40 @@
             this.adjustProgressBar.startY = null;
             this.adjustProgressBar.originalProgress = 0;
         }
+        shouldSyncProgressToTable(taskIndex, subTaskIndex) {
+            const tasksShowMode = this._gantt.parsedOptions.tasksShowMode;
+            if (tasksShowMode === TasksShowMode.Tasks_Separate) {
+                return true;
+            }
+            if (!isValid$3(subTaskIndex)) {
+                return true;
+            }
+            switch (tasksShowMode) {
+                case TasksShowMode.Sub_Tasks_Inline:
+                case TasksShowMode.Sub_Tasks_Arrange:
+                case TasksShowMode.Sub_Tasks_Compact:
+                    return false;
+                case TasksShowMode.Sub_Tasks_Separate:
+                    return true;
+                case TasksShowMode.Project_Sub_Tasks_Inline:
+                    const parentRecord = this._gantt.getRecordByIndex(taskIndex);
+                    if (parentRecord && parentRecord.type === TaskType.PROJECT) {
+                        return parentRecord.hierarchyState === 'expand';
+                    }
+                    return false;
+                default:
+                    return false;
+            }
+        }
         dealAdjustProgressBar(e) {
             const target = this.adjustProgressBar.target;
+            if (!target || !this.adjustProgressBar.adjusting) {
+                return;
+            }
             const taskBarWidth = target.attribute.width;
+            if (!taskBarWidth || taskBarWidth <= 0) {
+                return;
+            }
             const deltaX = e.x - this.adjustProgressBar.startX;
             const newProgress = Math.max(0, Math.min(100, this.adjustProgressBar.originalProgress + (deltaX / taskBarWidth) * 100));
             if (target.progressRect) {
@@ -74402,8 +74793,12 @@
                 this._gantt.scenegraph.taskBar.hoverBarProgressHandle.attribute.visibleAll) {
                 this._gantt.scenegraph.taskBar.hoverBarProgressHandle.setAttribute('x', (taskBarWidth * newProgress) / 100 - 6);
             }
-            if (target.textLabel && target.record) {
-                const tempRecord = { ...target.record, progress: Math.round(newProgress * 10) / 10 };
+            if (target.textLabel && target.record && this._gantt.parsedOptions.taskBarLabelText) {
+                const progressField = this._gantt.parsedOptions.progressField;
+                const tempRecord = {
+                    ...target.record,
+                    [progressField]: Math.round(newProgress * 10) / 10
+                };
                 const newText = parseStringTemplate(this._gantt.parsedOptions.taskBarLabelText, tempRecord);
                 target.textLabel.setAttribute('text', newText);
             }
@@ -75191,7 +75586,7 @@
                 }
             });
             this.stage.defaultLayer.add(this.dataZoomAxis);
-            requestAnimationFrame(() => {
+            vglobal.getRequestAnimationFrame()(() => {
                 if (this.isInitializing) {
                     const boundaries = this.getGanttViewBoundaries();
                     this.dataZoomAxis.setStartAndEnd(boundaries.startRatio, boundaries.endRatio);
@@ -76905,7 +77300,7 @@
         PluginManager: PluginManager
     });
 
-    const version = "1.22.0";
+    const version = "1.22.1";
 
     exports.Gantt = Gantt;
     exports.TYPES = index$4;