@visactor/vchart 2.0.20-alpha.6 → 2.0.20

package/build/index.es.js

@@ -45474,6 +45474,16 @@ const DEFAULT_HANDLER_ATTR_MAP = {
     strokeBoundsBuffer: 0
   }
 };
+const LAYOUT_LEVEL = {
+  background: 0,
+  preview: 1,
+  dragMask: 2,
+  selectedBackground: 3,
+  selectedPreview: 4,
+  handler: 5,
+  handlerText: 5,
+  handlerMask: 999
+};
 
 const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
   if (!textBounds) return !1;
@@ -45604,12 +45614,14 @@ class DataZoomRenderer {
       x: position.x + start * width,
       y: position.y,
       width: (end - start) * width,
-      height: height
+      height: height,
+      zIndex: LAYOUT_LEVEL.dragMask
     }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
       x: position.x,
       y: position.y + start * height,
       width: width,
-      height: (end - start) * height
+      height: (end - start) * height,
+      zIndex: LAYOUT_LEVEL.dragMask
     }, dragMaskStyle), "rect"), {
       start: start,
       end: end
@@ -45633,7 +45645,8 @@ class DataZoomRenderer {
       y: position.y,
       width: width,
       height: height,
-      cursor: brushSelect ? "crosshair" : "auto"
+      cursor: brushSelect ? "crosshair" : "auto",
+      zIndex: LAYOUT_LEVEL.background
     }, backgroundStyle), {
       pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
     }), "rect");
@@ -45666,7 +45679,8 @@ class DataZoomRenderer {
           x: position.x + start * width,
           y: position.y - middleHandlerBackgroundSize,
           width: (end - start) * width,
-          height: middleHandlerBackgroundSize
+          height: middleHandlerBackgroundSize,
+          zIndex: LAYOUT_LEVEL.handler
         }, 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({
@@ -45674,24 +45688,29 @@ class DataZoomRenderer {
           y: position.y - middleHandlerBackgroundSize / 2,
           strokeBoundsBuffer: 0,
           angle: 0,
-          symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
+          symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square",
+          zIndex: LAYOUT_LEVEL.handler
         }, middleHandlerStyle.icon), {
           pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
         }), "symbol");
       }
-      this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+      this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
         x: position.x + start * width,
         y: position.y + height / 2,
         size: height,
         symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+        zIndex: LAYOUT_LEVEL.handler
+      }), startHandlerStyle), {
         pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-      }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+      }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
         x: position.x + end * width,
         y: position.y + height / 2,
         size: height,
         symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+        zIndex: LAYOUT_LEVEL.handler
+      }), endHandlerStyle), {
         pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
       }), "symbol");
       const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -45705,7 +45724,7 @@ class DataZoomRenderer {
         height: startHandlerHeight,
         fill: "white",
         fillOpacity: 0,
-        zIndex: 999
+        zIndex: LAYOUT_LEVEL.handlerMask
       }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
         pickable: !zoomLock
       }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45715,7 +45734,7 @@ class DataZoomRenderer {
         height: endHandlerHeight,
         fill: "white",
         fillOpacity: 0,
-        zIndex: 999
+        zIndex: LAYOUT_LEVEL.handlerMask
       }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
         pickable: !zoomLock
       }), "rect");
@@ -45726,7 +45745,8 @@ class DataZoomRenderer {
           x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
           y: position.y + start * height,
           width: middleHandlerBackgroundSize,
-          height: (end - start) * height
+          height: (end - start) * height,
+          zIndex: LAYOUT_LEVEL.handler
         }, 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({
@@ -45734,23 +45754,27 @@ class DataZoomRenderer {
           y: position.y + (start + end) / 2 * height,
           angle: Math.PI / 180 * 90,
           symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
-          strokeBoundsBuffer: 0
+          strokeBoundsBuffer: 0,
+          zIndex: LAYOUT_LEVEL.handler
         }, middleHandlerStyle.icon), {
           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({
+      this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
         x: position.x + width / 2,
         y: position.y + start * height,
         size: width,
         symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+        zIndex: LAYOUT_LEVEL.handler
+      }), startHandlerStyle), {
         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 !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
+        symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square",
+        zIndex: LAYOUT_LEVEL.handler
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
         pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
       }), "symbol");
@@ -45765,7 +45789,7 @@ class DataZoomRenderer {
         height: endHandlerWidth,
         fill: "white",
         fillOpacity: 0,
-        zIndex: 999
+        zIndex: LAYOUT_LEVEL.handlerMask
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
         pickable: !zoomLock
       }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45775,7 +45799,7 @@ class DataZoomRenderer {
         height: endHandlerWidth,
         fill: "white",
         fillOpacity: 0,
-        zIndex: 999
+        zIndex: LAYOUT_LEVEL.handlerMask
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
         pickable: !zoomLock
       }), "rect");
@@ -45804,7 +45828,8 @@ class DataZoomRenderer {
       y: position.y,
       width: (end - start) * width,
       height: height,
-      cursor: brushSelect ? "crosshair" : "move"
+      cursor: brushSelect ? "crosshair" : "move",
+      zIndex: LAYOUT_LEVEL.selectedBackground
     }, selectedBackgroundStyle), {
       pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
     }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
@@ -45812,14 +45837,16 @@ class DataZoomRenderer {
       y: position.y + start * height,
       width: width,
       height: (end - start) * height,
-      cursor: brushSelect ? "crosshair" : "move"
+      cursor: brushSelect ? "crosshair" : "move",
+      zIndex: LAYOUT_LEVEL.selectedBackground
     }, selectedBackgroundStyle), {
       pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
     }), "rect");
   }
   _setPreviewAttributes(type, group) {
     this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-      pickable: !1
+      pickable: !1,
+      zIndex: LAYOUT_LEVEL.preview
     }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
       curveType: "basis"
     }, "area");
@@ -45838,7 +45865,8 @@ class DataZoomRenderer {
   }
   _setSelectedPreviewClipAttributes(type, group) {
     this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-      pickable: !1
+      pickable: !1,
+      zIndex: LAYOUT_LEVEL.selectedPreview
     }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
     const {
         start: start,
@@ -46040,7 +46068,8 @@ class DataZoomRenderer {
       visible: this._showText,
       pickable: !1,
       childrenPickable: !1,
-      textStyle: startTextAlignStyle
+      textStyle: startTextAlignStyle,
+      zIndex: LAYOUT_LEVEL.handlerText
     }), "data-zoom-start-text"), this._endText = this._maybeAddLabel(this._getContainer(), merge$1({}, restEndTextStyle, {
       text: endTextValue,
       x: endTextPosition.x,
@@ -46048,7 +46077,8 @@ class DataZoomRenderer {
       visible: this._showText,
       pickable: !1,
       childrenPickable: !1,
-      textStyle: endTextAlignStyle
+      textStyle: endTextAlignStyle,
+      zIndex: LAYOUT_LEVEL.handlerText
     }), "data-zoom-end-text");
   }
   _maybeAddLabel(container, attributes, name) {
@@ -58832,7 +58862,7 @@ class BaseMark extends GrammarItem {
             });
         }
         return config
-            ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? (_a = config.priority) !== null && _a !== void 0 ? _a : Infinity : config.priority }) : config;
+            ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? ((_a = config.priority) !== null && _a !== void 0 ? _a : Infinity) : config.priority }) : config;
     }
     tryRunMorphing(graphics) {
         if (this._lastMark) {
@@ -61899,7 +61929,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.19";
+const version = "2.0.20";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -63703,7 +63733,7 @@ class BaseSeries extends BaseModel {
             attributeContext: this._markAttributeContext,
             componentType: option.componentType,
             noSeparateStyle,
-            parent: parent !== false ? parent !== null && parent !== void 0 ? parent : this._rootMark : null
+            parent: parent !== false ? (parent !== null && parent !== void 0 ? parent : this._rootMark) : null
         });
         if (isValid$1(m)) {
             const spec = this.getSpec() || {};
@@ -99322,6 +99352,7 @@ class DataZoom extends DataFilterBaseComponent {
     _handleDataCollectionChange() {
         const data = this._data.getDataView();
         data.reRunAllTransform();
+        this._initAfterLayout();
         const domain = this._computeDomainOfValueScale();
         if (domain) {
             if (!this._valueScale) {
@@ -99562,9 +99593,7 @@ class DataZoom extends DataFilterBaseComponent {
     }
     _createOrUpdateComponent(changeData) {
         if (this._visible) {
-            const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
-            const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
-            const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false;
+            const isNeedPreview = this._spec.showBackgroundChart !== false;
             const attrs = this._getAttrs(isNeedPreview);
             const axis = this._relatedAxisComponent;
             if (this._component) {
@@ -104002,15 +104031,23 @@ class Brush extends BaseComponent {
                 const axisRangeExpand = (_a = this._spec.axisRangeExpand) !== null && _a !== void 0 ? _a : 0;
                 const { x1, x2, y1, y2 } = operateMaskBounds;
                 const regionStartAttr = isHorizontal ? 'x' : 'y';
-                const regionSizeAttr = isHorizontal ? 'width' : 'height';
                 const boundsStart = isHorizontal ? x1 : y1;
                 const boundsEnd = isHorizontal ? x2 : y2;
+                const range = axis.getScale().range();
+                const rangeFactor = (_b = axis.scaleRangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
+                const isAxisReverse = last(range) < range[0];
+                const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
+                const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
+                const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
+                const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
+                const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                const newStart = this._stateClamp(start - axisRangeExpand);
+                const newEnd = this._stateClamp(end + axisRangeExpand);
                 if (this._axisDataZoomMap[axis.id]) {
                     const dataZoom = this._axisDataZoomMap[axis.id];
-                    const startPercent = (boundsStart - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
-                    const endPercent = (boundsEnd - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
-                    const newStartPercent = this._stateClamp(startPercent - axisRangeExpand);
-                    const newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
+                    const newStartPercent = isAxisReverse ? 1 - newStart : newStart;
+                    const newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
                     dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
                         'percent',
                         'percent'
@@ -104024,17 +104061,6 @@ class Brush extends BaseComponent {
                     });
                 }
                 else {
-                    const range = axis.getScale().range();
-                    const rangeFactor = (_b = axis.scaleRangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
-                    const isAxisReverse = last(range) < range[0];
-                    const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
-                    const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
-                    const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
-                    const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
-                    const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                    const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                    const newStart = this._stateClamp(start - axisRangeExpand);
-                    const newEnd = this._stateClamp(end + axisRangeExpand);
                     axis.scaleRangeFactor([newStart, newEnd]);
                     axis.effect.scaleUpdate();
                     this._zoomRecord.push({

package/build/index.js

@@ -45480,6 +45480,16 @@
         strokeBoundsBuffer: 0
       }
     };
+    const LAYOUT_LEVEL = {
+      background: 0,
+      preview: 1,
+      dragMask: 2,
+      selectedBackground: 3,
+      selectedPreview: 4,
+      handler: 5,
+      handlerText: 5,
+      handlerMask: 999
+    };
 
     const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
       if (!textBounds) return !1;
@@ -45610,12 +45620,14 @@
           x: position.x + start * width,
           y: position.y,
           width: (end - start) * width,
-          height: height
+          height: height,
+          zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
           y: position.y + start * height,
           width: width,
-          height: (end - start) * height
+          height: (end - start) * height,
+          zIndex: LAYOUT_LEVEL.dragMask
         }, dragMaskStyle), "rect"), {
           start: start,
           end: end
@@ -45639,7 +45651,8 @@
           y: position.y,
           width: width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "auto"
+          cursor: brushSelect ? "crosshair" : "auto",
+          zIndex: LAYOUT_LEVEL.background
         }, backgroundStyle), {
           pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
         }), "rect");
@@ -45672,7 +45685,8 @@
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
-              height: middleHandlerBackgroundSize
+              height: middleHandlerBackgroundSize,
+              zIndex: LAYOUT_LEVEL.handler
             }, 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({
@@ -45680,24 +45694,29 @@
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square",
+              zIndex: LAYOUT_LEVEL.handler
             }, middleHandlerStyle.icon), {
               pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
             }), "symbol");
           }
-          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), startHandlerStyle), {
             pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
+          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
             symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), endHandlerStyle), {
             pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -45711,7 +45730,7 @@
             height: startHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45721,7 +45740,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -45732,7 +45751,8 @@
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
-              height: (end - start) * height
+              height: (end - start) * height,
+              zIndex: LAYOUT_LEVEL.handler
             }, 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({
@@ -45740,23 +45760,27 @@
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
               symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
-              strokeBoundsBuffer: 0
+              strokeBoundsBuffer: 0,
+              zIndex: LAYOUT_LEVEL.handler
             }, middleHandlerStyle.icon), {
               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({
+          this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
             symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
+            zIndex: LAYOUT_LEVEL.handler
+          }), startHandlerStyle), {
             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 !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square",
+            zIndex: LAYOUT_LEVEL.handler
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
             pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
@@ -45771,7 +45795,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45781,7 +45805,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -45810,7 +45834,8 @@
           y: position.y,
           width: (end - start) * width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "move"
+          cursor: brushSelect ? "crosshair" : "move",
+          zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
         }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
@@ -45818,14 +45843,16 @@
           y: position.y + start * height,
           width: width,
           height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move"
+          cursor: brushSelect ? "crosshair" : "move",
+          zIndex: LAYOUT_LEVEL.selectedBackground
         }, selectedBackgroundStyle), {
           pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
         }), "rect");
       }
       _setPreviewAttributes(type, group) {
         this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-          pickable: !1
+          pickable: !1,
+          zIndex: LAYOUT_LEVEL.preview
         }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
           curveType: "basis"
         }, "area");
@@ -45844,7 +45871,8 @@
       }
       _setSelectedPreviewClipAttributes(type, group) {
         this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1
+          pickable: !1,
+          zIndex: LAYOUT_LEVEL.selectedPreview
         }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
         const {
             start: start,
@@ -46046,7 +46074,8 @@
           visible: this._showText,
           pickable: !1,
           childrenPickable: !1,
-          textStyle: startTextAlignStyle
+          textStyle: startTextAlignStyle,
+          zIndex: LAYOUT_LEVEL.handlerText
         }), "data-zoom-start-text"), this._endText = this._maybeAddLabel(this._getContainer(), merge$1({}, restEndTextStyle, {
           text: endTextValue,
           x: endTextPosition.x,
@@ -46054,7 +46083,8 @@
           visible: this._showText,
           pickable: !1,
           childrenPickable: !1,
-          textStyle: endTextAlignStyle
+          textStyle: endTextAlignStyle,
+          zIndex: LAYOUT_LEVEL.handlerText
         }), "data-zoom-end-text");
       }
       _maybeAddLabel(container, attributes, name) {
@@ -58838,7 +58868,7 @@
                 });
             }
             return config
-                ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? (_a = config.priority) !== null && _a !== void 0 ? _a : Infinity : config.priority }) : config;
+                ? Object.assign(Object.assign({}, config), { priority: type === 'normal' ? ((_a = config.priority) !== null && _a !== void 0 ? _a : Infinity) : config.priority }) : config;
         }
         tryRunMorphing(graphics) {
             if (this._lastMark) {
@@ -61905,7 +61935,7 @@
         });
     };
 
-    const version = "2.0.19";
+    const version = "2.0.20";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -63709,7 +63739,7 @@
                 attributeContext: this._markAttributeContext,
                 componentType: option.componentType,
                 noSeparateStyle,
-                parent: parent !== false ? parent !== null && parent !== void 0 ? parent : this._rootMark : null
+                parent: parent !== false ? (parent !== null && parent !== void 0 ? parent : this._rootMark) : null
             });
             if (isValid$1(m)) {
                 const spec = this.getSpec() || {};
@@ -99328,6 +99358,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _handleDataCollectionChange() {
             const data = this._data.getDataView();
             data.reRunAllTransform();
+            this._initAfterLayout();
             const domain = this._computeDomainOfValueScale();
             if (domain) {
                 if (!this._valueScale) {
@@ -99568,9 +99599,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _createOrUpdateComponent(changeData) {
             if (this._visible) {
-                const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
-                const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
-                const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false;
+                const isNeedPreview = this._spec.showBackgroundChart !== false;
                 const attrs = this._getAttrs(isNeedPreview);
                 const axis = this._relatedAxisComponent;
                 if (this._component) {
@@ -104008,15 +104037,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const axisRangeExpand = (_a = this._spec.axisRangeExpand) !== null && _a !== void 0 ? _a : 0;
                     const { x1, x2, y1, y2 } = operateMaskBounds;
                     const regionStartAttr = isHorizontal ? 'x' : 'y';
-                    const regionSizeAttr = isHorizontal ? 'width' : 'height';
                     const boundsStart = isHorizontal ? x1 : y1;
                     const boundsEnd = isHorizontal ? x2 : y2;
+                    const range = axis.getScale().range();
+                    const rangeFactor = (_b = axis.scaleRangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
+                    const isAxisReverse = last(range) < range[0];
+                    const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
+                    const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
+                    const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
+                    const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
+                    const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                    const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                    const newStart = this._stateClamp(start - axisRangeExpand);
+                    const newEnd = this._stateClamp(end + axisRangeExpand);
                     if (this._axisDataZoomMap[axis.id]) {
                         const dataZoom = this._axisDataZoomMap[axis.id];
-                        const startPercent = (boundsStart - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
-                        const endPercent = (boundsEnd - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
-                        const newStartPercent = this._stateClamp(startPercent - axisRangeExpand);
-                        const newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
+                        const newStartPercent = isAxisReverse ? 1 - newStart : newStart;
+                        const newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
                         dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
                             'percent',
                             'percent'
@@ -104030,17 +104067,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         });
                     }
                     else {
-                        const range = axis.getScale().range();
-                        const rangeFactor = (_b = axis.scaleRangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
-                        const isAxisReverse = last(range) < range[0];
-                        const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
-                        const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
-                        const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
-                        const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
-                        const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                        const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                        const newStart = this._stateClamp(start - axisRangeExpand);
-                        const newEnd = this._stateClamp(end + axisRangeExpand);
                         axis.scaleRangeFactor([newStart, newEnd]);
                         axis.effect.scaleUpdate();
                         this._zoomRecord.push({