@visactor/react-vchart 2.0.20-alpha.6 → 2.0.20-alpha.7

package/build/index.js

@@ -38820,6 +38820,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;
@@ -38950,12 +38960,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
@@ -38979,7 +38991,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");
@@ -39012,7 +39025,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({
@@ -39020,24 +39034,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),
@@ -39051,7 +39070,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({
@@ -39061,7 +39080,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -39072,7 +39091,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({
@@ -39080,23 +39100,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");
@@ -39111,7 +39135,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({
@@ -39121,7 +39145,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: 999
+            zIndex: LAYOUT_LEVEL.handlerMask
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -39150,7 +39174,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({
@@ -39158,14 +39183,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");
@@ -39184,7 +39211,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,
@@ -39386,7 +39414,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,
@@ -39394,7 +39423,8 @@
           visible: this._showText,
           pickable: !1,
           childrenPickable: !1,
-          textStyle: endTextAlignStyle
+          textStyle: endTextAlignStyle,
+          zIndex: LAYOUT_LEVEL.handlerText
         }), "data-zoom-end-text");
       }
       _maybeAddLabel(container, attributes, name) {
@@ -49890,11 +49920,11 @@
         this._lastMark = mark;
       }
       reuse(mark) {
-        this.type === mark.type && (this._product = mark.getProduct(), this._product && (this._product.clearStates(), this._graphics = mark.getGraphics(), this._graphics.forEach(g => {
+        this.type === mark.type && (this._product = mark.getProduct(), this._product.clearStates(), this._graphics = mark.getGraphics(), this._graphics.forEach(g => {
           g.clearStates();
         }), this._graphicMap = mark._graphicMap, this._graphicMap.forEach(g => {
           g.context = Object.assign(Object.assign({}, g.context), this._getCommonContext());
-        }), this._dataByKey = mark._dataByKey, this._prevDataByKey = mark._prevDataByKey, this.needClear = mark.needClear));
+        }), this._dataByKey = mark._dataByKey, this._prevDataByKey = mark._prevDataByKey, this.needClear = mark.needClear);
       }
       _parseProgressiveContext(data) {
         const enableProgressive = this._markConfig.progressiveStep > 0 && this._markConfig.progressiveThreshold > 0 && this._markConfig.progressiveStep < this._markConfig.progressiveThreshold,
@@ -80147,7 +80177,7 @@
         }
       }
       _handleDataCollectionChange() {
-        this._data.getDataView().reRunAllTransform();
+        this._data.getDataView().reRunAllTransform(), this._initAfterLayout();
         const domain = this._computeDomainOfValueScale();
         domain && (this._valueScale || (this._valueScale = new LinearScale()), this._valueScale.domain(domain), this._updateValueScaleRange(), this._component && this._createOrUpdateComponent(!0));
       }
@@ -80298,9 +80328,7 @@
       }
       _createOrUpdateComponent(changeData) {
         if (this._visible) {
-          const xScale = this._isHorizontal ? this._stateScale : this._valueScale,
-            yScale = this._isHorizontal ? this._valueScale : this._stateScale,
-            isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale) && !1 !== this._spec.showBackgroundChart,
+          const isNeedPreview = !1 !== this._spec.showBackgroundChart,
             attrs = this._getAttrs(isNeedPreview),
             axis = this._relatedAxisComponent;
           if (this._component) this._component.setAttributes(attrs), changeData && (this._component.setPreviewData(this._data.getDataView().latestData), isNeedPreview && (this._isHorizontal ? this._component.setPreviewPointsY1(this._dataToPositionY2) : this._component.setPreviewPointsX1(this._dataToPositionX2), this._component.setStatePointToData(state => statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)))));else {
@@ -80450,10 +80478,8 @@
         const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end);
         if (this._shouldChange && (!isSameScrollValue || !1 === this._spec.realTime)) {
           updateComponent && this._component && this._component.setAttribute("range", [start, end]), this._start = start, this._end = end;
-          const axis = this._relatedAxisComponent,
-            reverse = isReverse(axis, this._isHorizontal),
-            startValue = statePointToData(start, this._stateScale, reverse),
-            endValue = statePointToData(end, this._stateScale, reverse);
+          const startValue = statePointToData(start, this._stateScale, !1),
+            endValue = statePointToData(end, this._stateScale, !1);
           (isFunction$1(this._spec.updateDataAfterChange) ? this._spec.updateDataAfterChange(start, end, startValue, endValue) : this._handleStateChange(startValue, endValue)) && this.event.emit(ChartEvent.scrollBarChange, {
             model: this,
             value: {
@@ -84091,15 +84117,23 @@
                 y2: y2
               } = operateMaskBounds,
               regionStartAttr = isHorizontal ? "x" : "y",
-              regionSizeAttr = isHorizontal ? "width" : "height",
               boundsStart = isHorizontal ? x1 : y1,
-              boundsEnd = isHorizontal ? x2 : y2;
+              boundsEnd = isHorizontal ? x2 : y2,
+              range = axis.getScale().range(),
+              rangeFactor = null !== (_b = axis.scaleRangeFactor()) && void 0 !== _b ? _b : [0, 1],
+              isAxisReverse = last(range) < range[0],
+              startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr],
+              endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr],
+              endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp),
+              startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp),
+              start = (startPos - range[0]) / (last(range) - range[0]) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0],
+              end = (endPos - range[0]) / (last(range) - range[0]) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0],
+              newStart = this._stateClamp(start - axisRangeExpand),
+              newEnd = this._stateClamp(end + axisRangeExpand);
             if (this._axisDataZoomMap[axis.id]) {
               const dataZoom = this._axisDataZoomMap[axis.id],
-                startPercent = (boundsStart - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr],
-                endPercent = (boundsEnd - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr],
-                newStartPercent = this._stateClamp(startPercent - axisRangeExpand),
-                newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
+                newStartPercent = isAxisReverse ? 1 - newStart : newStart,
+                newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
               dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), ["percent", "percent"]), this._zoomRecord.push({
                 operateComponent: dataZoom,
                 start: newStartPercent,
@@ -84107,26 +84141,13 @@
                 startValue: statePointToData(newStartPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal)),
                 endValue: statePointToData(newEndPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal))
               });
-            } else {
-              const range = axis.getScale().range(),
-                rangeFactor = null !== (_b = axis.scaleRangeFactor()) && void 0 !== _b ? _b : [0, 1],
-                isAxisReverse = last(range) < range[0],
-                startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr],
-                endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr],
-                endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp),
-                startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp),
-                start = (startPos - range[0]) / (last(range) - range[0]) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0],
-                end = (endPos - range[0]) / (last(range) - range[0]) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0],
-                newStart = this._stateClamp(start - axisRangeExpand),
-                newEnd = this._stateClamp(end + axisRangeExpand);
-              axis.scaleRangeFactor([newStart, newEnd]), axis.effect.scaleUpdate(), this._zoomRecord.push({
-                operateComponent: axis,
-                start: newStart,
-                end: newEnd,
-                startValue: axis.getScale().invert(startPos),
-                endValue: axis.getScale().invert(endPos)
-              });
-            }
+            } else axis.scaleRangeFactor([newStart, newEnd]), axis.effect.scaleUpdate(), this._zoomRecord.push({
+              operateComponent: axis,
+              start: newStart,
+              end: newEnd,
+              startValue: axis.getScale().invert(startPos),
+              endValue: axis.getScale().invert(endPos)
+            });
           });
         }
       }