@visactor/vchart 2.0.20-alpha.5 → 2.0.20-alpha.6

package/build/index.es.js

@@ -45474,16 +45474,6 @@ 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;
@@ -45614,14 +45604,12 @@ class DataZoomRenderer {
       x: position.x + start * width,
       y: position.y,
       width: (end - start) * width,
-      height: height,
-      zIndex: LAYOUT_LEVEL.dragMask
+      height: height
     }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
       x: position.x,
       y: position.y + start * height,
       width: width,
-      height: (end - start) * height,
-      zIndex: LAYOUT_LEVEL.dragMask
+      height: (end - start) * height
     }, dragMaskStyle), "rect"), {
       start: start,
       end: end
@@ -45645,8 +45633,7 @@ class DataZoomRenderer {
       y: position.y,
       width: width,
       height: height,
-      cursor: brushSelect ? "crosshair" : "auto",
-      zIndex: LAYOUT_LEVEL.background
+      cursor: brushSelect ? "crosshair" : "auto"
     }, backgroundStyle), {
       pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
     }), "rect");
@@ -45679,8 +45666,7 @@ class DataZoomRenderer {
           x: position.x + start * width,
           y: position.y - middleHandlerBackgroundSize,
           width: (end - start) * width,
-          height: middleHandlerBackgroundSize,
-          zIndex: LAYOUT_LEVEL.handler
+          height: middleHandlerBackgroundSize
         }, 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({
@@ -45688,29 +45674,24 @@ 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",
-          zIndex: LAYOUT_LEVEL.handler
+          symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
         }, 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(Object.assign({
+      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 !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-        zIndex: LAYOUT_LEVEL.handler
-      }), startHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
         pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-      }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
+      }), "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 !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-        zIndex: LAYOUT_LEVEL.handler
-      }), endHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
         pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
       }), "symbol");
       const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -45724,7 +45705,7 @@ class DataZoomRenderer {
         height: startHandlerHeight,
         fill: "white",
         fillOpacity: 0,
-        zIndex: LAYOUT_LEVEL.handlerMask
+        zIndex: 999
       }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
         pickable: !zoomLock
       }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45734,7 +45715,7 @@ class DataZoomRenderer {
         height: endHandlerHeight,
         fill: "white",
         fillOpacity: 0,
-        zIndex: LAYOUT_LEVEL.handlerMask
+        zIndex: 999
       }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
         pickable: !zoomLock
       }), "rect");
@@ -45745,8 +45726,7 @@ class DataZoomRenderer {
           x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
           y: position.y + start * height,
           width: middleHandlerBackgroundSize,
-          height: (end - start) * height,
-          zIndex: LAYOUT_LEVEL.handler
+          height: (end - start) * height
         }, 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({
@@ -45754,27 +45734,23 @@ 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,
-          zIndex: LAYOUT_LEVEL.handler
+          strokeBoundsBuffer: 0
         }, 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(Object.assign({
+      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 !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-      }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
-        zIndex: LAYOUT_LEVEL.handler
-      }), startHandlerStyle), {
+      }, DEFAULT_HANDLER_ATTR_MAP.vertical), 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",
-        zIndex: LAYOUT_LEVEL.handler
+        symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
         pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
       }), "symbol");
@@ -45789,7 +45765,7 @@ class DataZoomRenderer {
         height: endHandlerWidth,
         fill: "white",
         fillOpacity: 0,
-        zIndex: LAYOUT_LEVEL.handlerMask
+        zIndex: 999
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
         pickable: !zoomLock
       }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45799,7 +45775,7 @@ class DataZoomRenderer {
         height: endHandlerWidth,
         fill: "white",
         fillOpacity: 0,
-        zIndex: LAYOUT_LEVEL.handlerMask
+        zIndex: 999
       }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
         pickable: !zoomLock
       }), "rect");
@@ -45828,8 +45804,7 @@ class DataZoomRenderer {
       y: position.y,
       width: (end - start) * width,
       height: height,
-      cursor: brushSelect ? "crosshair" : "move",
-      zIndex: LAYOUT_LEVEL.selectedBackground
+      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({
@@ -45837,16 +45812,14 @@ class DataZoomRenderer {
       y: position.y + start * height,
       width: width,
       height: (end - start) * height,
-      cursor: brushSelect ? "crosshair" : "move",
-      zIndex: LAYOUT_LEVEL.selectedBackground
+      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,
-      zIndex: LAYOUT_LEVEL.preview
+      pickable: !1
     }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
       curveType: "basis"
     }, "area");
@@ -45865,8 +45838,7 @@ class DataZoomRenderer {
   }
   _setSelectedPreviewClipAttributes(type, group) {
     this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-      pickable: !1,
-      zIndex: LAYOUT_LEVEL.selectedPreview
+      pickable: !1
     }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
     const {
         start: start,
@@ -58774,6 +58746,9 @@ class BaseMark extends GrammarItem {
             return;
         }
         this._product = mark.getProduct();
+        if (!this._product) {
+            return;
+        }
         this._product.clearStates();
         this._graphics = mark.getGraphics();
         this._graphics.forEach(g => {
@@ -58857,7 +58832,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) {
@@ -63728,7 +63703,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() || {};
@@ -99347,7 +99322,6 @@ class DataZoom extends DataFilterBaseComponent {
     _handleDataCollectionChange() {
         const data = this._data.getDataView();
         data.reRunAllTransform();
-        this._initAfterLayout();
         const domain = this._computeDomainOfValueScale();
         if (domain) {
             if (!this._valueScale) {
@@ -99588,7 +99562,9 @@ class DataZoom extends DataFilterBaseComponent {
     }
     _createOrUpdateComponent(changeData) {
         if (this._visible) {
-            const isNeedPreview = this._spec.showBackgroundChart !== false;
+            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 attrs = this._getAttrs(isNeedPreview);
             const axis = this._relatedAxisComponent;
             if (this._component) {
@@ -99753,8 +99729,10 @@ class ScrollBar extends DataFilterBaseComponent {
             }
             this._start = start;
             this._end = end;
-            const startValue = statePointToData(start, this._stateScale, false);
-            const endValue = statePointToData(end, this._stateScale, false);
+            const axis = this._relatedAxisComponent;
+            const reverse = isReverse(axis, this._isHorizontal);
+            const startValue = statePointToData(start, this._stateScale, reverse);
+            const endValue = statePointToData(end, this._stateScale, reverse);
             const hasChange = isFunction$1(this._spec.updateDataAfterChange)
                 ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
                 : this._handleStateChange(startValue, endValue);
@@ -104024,23 +104002,15 @@ 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 newStartPercent = isAxisReverse ? 1 - newStart : newStart;
-                    const newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
+                    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);
                     dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
                         'percent',
                         'percent'
@@ -104054,6 +104024,17 @@ 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,16 +45480,6 @@
         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;
@@ -45620,14 +45610,12 @@
           x: position.x + start * width,
           y: position.y,
           width: (end - start) * width,
-          height: height,
-          zIndex: LAYOUT_LEVEL.dragMask
+          height: height
         }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
           y: position.y + start * height,
           width: width,
-          height: (end - start) * height,
-          zIndex: LAYOUT_LEVEL.dragMask
+          height: (end - start) * height
         }, dragMaskStyle), "rect"), {
           start: start,
           end: end
@@ -45651,8 +45639,7 @@
           y: position.y,
           width: width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "auto",
-          zIndex: LAYOUT_LEVEL.background
+          cursor: brushSelect ? "crosshair" : "auto"
         }, backgroundStyle), {
           pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
         }), "rect");
@@ -45685,8 +45672,7 @@
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
-              height: middleHandlerBackgroundSize,
-              zIndex: LAYOUT_LEVEL.handler
+              height: middleHandlerBackgroundSize
             }, 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({
@@ -45694,29 +45680,24 @@
               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",
-              zIndex: LAYOUT_LEVEL.handler
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
             }, 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(Object.assign({
+          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 !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
             pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
-          }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign(Object.assign({
+          }), "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 !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), endHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
             pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
@@ -45730,7 +45711,7 @@
             height: startHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45740,7 +45721,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -45751,8 +45732,7 @@
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
-              height: (end - start) * height,
-              zIndex: LAYOUT_LEVEL.handler
+              height: (end - start) * height
             }, 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({
@@ -45760,27 +45740,23 @@
               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,
-              zIndex: LAYOUT_LEVEL.handler
+              strokeBoundsBuffer: 0
             }, 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(Object.assign({
+          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 !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
-          }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
-            zIndex: LAYOUT_LEVEL.handler
-          }), startHandlerStyle), {
+          }, DEFAULT_HANDLER_ATTR_MAP.vertical), 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",
-            zIndex: LAYOUT_LEVEL.handler
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
             pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
@@ -45795,7 +45771,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect"), this._endHandlerMask = group.createOrUpdateChild("endHandlerMask", Object.assign(Object.assign({
@@ -45805,7 +45781,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -45834,8 +45810,7 @@
           y: position.y,
           width: (end - start) * width,
           height: height,
-          cursor: brushSelect ? "crosshair" : "move",
-          zIndex: LAYOUT_LEVEL.selectedBackground
+          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({
@@ -45843,16 +45818,14 @@
           y: position.y + start * height,
           width: width,
           height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move",
-          zIndex: LAYOUT_LEVEL.selectedBackground
+          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,
-          zIndex: LAYOUT_LEVEL.preview
+          pickable: !1
         }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
           curveType: "basis"
         }, "area");
@@ -45871,8 +45844,7 @@
       }
       _setSelectedPreviewClipAttributes(type, group) {
         this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1,
-          zIndex: LAYOUT_LEVEL.selectedPreview
+          pickable: !1
         }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
         const {
             start: start,
@@ -58780,6 +58752,9 @@
                 return;
             }
             this._product = mark.getProduct();
+            if (!this._product) {
+                return;
+            }
             this._product.clearStates();
             this._graphics = mark.getGraphics();
             this._graphics.forEach(g => {
@@ -58863,7 +58838,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) {
@@ -63734,7 +63709,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() || {};
@@ -99353,7 +99328,6 @@ 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) {
@@ -99594,7 +99568,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _createOrUpdateComponent(changeData) {
             if (this._visible) {
-                const isNeedPreview = this._spec.showBackgroundChart !== false;
+                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 attrs = this._getAttrs(isNeedPreview);
                 const axis = this._relatedAxisComponent;
                 if (this._component) {
@@ -99759,8 +99735,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 this._start = start;
                 this._end = end;
-                const startValue = statePointToData(start, this._stateScale, false);
-                const endValue = statePointToData(end, this._stateScale, false);
+                const axis = this._relatedAxisComponent;
+                const reverse = isReverse(axis, this._isHorizontal);
+                const startValue = statePointToData(start, this._stateScale, reverse);
+                const endValue = statePointToData(end, this._stateScale, reverse);
                 const hasChange = isFunction$1(this._spec.updateDataAfterChange)
                     ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
                     : this._handleStateChange(startValue, endValue);
@@ -104030,23 +104008,15 @@ 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 newStartPercent = isAxisReverse ? 1 - newStart : newStart;
-                        const newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
+                        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);
                         dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
                             'percent',
                             'percent'
@@ -104060,6 +104030,17 @@ 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({