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

package/build/index.js

@@ -38820,16 +38820,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;
@@ -38960,14 +38950,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
@@ -38991,8 +38979,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");
@@ -39025,8 +39012,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({
@@ -39034,29 +39020,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),
@@ -39070,7 +39051,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({
@@ -39080,7 +39061,7 @@
             height: endHandlerHeight,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), {
             pickable: !zoomLock
           }), "rect");
@@ -39091,8 +39072,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({
@@ -39100,27 +39080,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");
@@ -39135,7 +39111,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({
@@ -39145,7 +39121,7 @@
             height: endHandlerWidth,
             fill: "white",
             fillOpacity: 0,
-            zIndex: LAYOUT_LEVEL.handlerMask
+            zIndex: 999
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), {
             pickable: !zoomLock
           }), "rect");
@@ -39174,8 +39150,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({
@@ -39183,16 +39158,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");
@@ -39211,8 +39184,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,
@@ -49918,11 +49890,11 @@
         this._lastMark = mark;
       }
       reuse(mark) {
-        this.type === mark.type && (this._product = mark.getProduct(), this._product.clearStates(), this._graphics = mark.getGraphics(), this._graphics.forEach(g => {
+        this.type === mark.type && (this._product = mark.getProduct(), this._product && (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,
@@ -80175,7 +80147,7 @@
         }
       }
       _handleDataCollectionChange() {
-        this._data.getDataView().reRunAllTransform(), this._initAfterLayout();
+        this._data.getDataView().reRunAllTransform();
         const domain = this._computeDomainOfValueScale();
         domain && (this._valueScale || (this._valueScale = new LinearScale()), this._valueScale.domain(domain), this._updateValueScaleRange(), this._component && this._createOrUpdateComponent(!0));
       }
@@ -80326,7 +80298,9 @@
       }
       _createOrUpdateComponent(changeData) {
         if (this._visible) {
-          const isNeedPreview = !1 !== this._spec.showBackgroundChart,
+          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,
             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 {
@@ -80476,8 +80450,10 @@
         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 startValue = statePointToData(start, this._stateScale, !1),
-            endValue = statePointToData(end, this._stateScale, !1);
+          const axis = this._relatedAxisComponent,
+            reverse = isReverse(axis, this._isHorizontal),
+            startValue = statePointToData(start, this._stateScale, reverse),
+            endValue = statePointToData(end, this._stateScale, reverse);
           (isFunction$1(this._spec.updateDataAfterChange) ? this._spec.updateDataAfterChange(start, end, startValue, endValue) : this._handleStateChange(startValue, endValue)) && this.event.emit(ChartEvent.scrollBarChange, {
             model: this,
             value: {
@@ -84115,23 +84091,15 @@
                 y2: y2
               } = operateMaskBounds,
               regionStartAttr = isHorizontal ? "x" : "y",
+              regionSizeAttr = isHorizontal ? "width" : "height",
               boundsStart = isHorizontal ? x1 : y1,
-              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);
+              boundsEnd = isHorizontal ? x2 : y2;
             if (this._axisDataZoomMap[axis.id]) {
               const dataZoom = this._axisDataZoomMap[axis.id],
-                newStartPercent = isAxisReverse ? 1 - newStart : newStart,
-                newEndPercent = isAxisReverse ? 1 - newEnd : newEnd;
+                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);
               dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), ["percent", "percent"]), this._zoomRecord.push({
                 operateComponent: dataZoom,
                 start: newStartPercent,
@@ -84139,13 +84107,26 @@
                 startValue: statePointToData(newStartPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal)),
                 endValue: statePointToData(newEndPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal))
               });
-            } 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)
-            });
+            } 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)
+              });
+            }
           });
         }
       }