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

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,
@@ -63928,9 +63956,7 @@
             x: calcLayoutNumber(null === (_a = this._spec) || void 0 === _a ? void 0 : _a.centerX, layoutRect.width, layoutRect, layoutRect.width / 2),
             y: calcLayoutNumber(null === (_b = this._spec) || void 0 === _b ? void 0 : _b.centerY, layoutRect.height, layoutRect, layoutRect.height / 2)
           };
-        }, this._startAngle = POLAR_START_RADIAN, this._endAngle = POLAR_END_RADIAN, this._pieMark = null, this._labelMark = null, this._labelLineMark = null, this._emptyArcMark = null, this._pendingViewDataLabelUpdate = !1, this.flushViewDataLabelUpdate = () => {
-          this._pendingViewDataLabelUpdate && (this._pendingViewDataLabelUpdate = !1, this._viewDataLabel.getDataView().reRunAllTransform());
-        }, this.dataToCentralPosition = datum => {
+        }, this._startAngle = POLAR_START_RADIAN, this._endAngle = POLAR_END_RADIAN, this._pieMark = null, this._labelMark = null, this._labelLineMark = null, this._emptyArcMark = null, this.dataToCentralPosition = datum => {
           const angle = datum[ARC_MIDDLE_ANGLE];
           if (isNil$1(angle)) return null;
           const radius = this.computeDatumRadius(datum),
@@ -64064,11 +64090,11 @@
       }
       initEvent() {
         var _a;
-        super.initEvent(), null === (_a = this._viewDataLabel.getDataView()) || void 0 === _a || _a.target.addListener("change", this.viewDataLabelUpdate.bind(this)), this.event.on(ChartEvent.afterRender, this.flushViewDataLabelUpdate);
+        super.initEvent(), null === (_a = this._viewDataLabel.getDataView()) || void 0 === _a || _a.target.addListener("change", this.viewDataLabelUpdate.bind(this));
       }
       initGroups() {}
       onLayoutEnd() {
-        this._pendingViewDataLabelUpdate = !0, this.onMarkPositionUpdate(), super.onLayoutEnd();
+        this._viewDataLabel.getDataView().reRunAllTransform(), this.onMarkPositionUpdate(), super.onLayoutEnd();
       }
       getDimensionField() {
         return this._seriesField ? [this._seriesField] : [];
@@ -80149,7 +80175,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));
       }
@@ -80300,9 +80326,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 {
@@ -84091,15 +84115,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 +84139,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)
+            });
           });
         }
       }