@visactor/vchart 1.2.0-beta.6 → 1.2.0

package/build/index.js

@@ -19669,7 +19669,7 @@
 	    clearTimeout(h);
 	  }
 	  appendDuration(d) {
-	    this.durations.push(d), this.durations.length > this.durationsListThreshold && this.durations.shift(), this.timeout = Math.max(this.durations.reduce((a, b) => a + b, 0) / this.durations.length, 1e3 / 60);
+	    this.durations.push(d), this.durations.length > this.durationsListThreshold && this.durations.shift(), this.timeout = Math.min(Math.max(this.durations.reduce((a, b) => a + b, 0) / this.durations.length, 1e3 / 60), 1e3 / 30);
 	  }
 	}
 	RafBasedSTO.TimeOut = 1e3 / 60;
@@ -22986,7 +22986,8 @@
 	  return "end" === textAlign || "right" === textAlign ? -width : "center" === textAlign ? -width / 2 : 0;
 	}
 	function textLayoutOffsetY(baseline, lineHeight, fontSize) {
-	  return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? -lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
+	  let buf = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+	  return "middle" === baseline ? -lineHeight / 2 : "top" === baseline ? 0 : "bottom" === baseline ? buf - lineHeight : baseline && "alphabetic" !== baseline ? 0 : (fontSize || (fontSize = lineHeight), -(lineHeight - fontSize) / 2 - .79 * fontSize);
 	}
 
 	class CanvasTextLayout {
@@ -23137,8 +23138,7 @@
 	    const textTheme = getTheme(this).text,
 	      textMeasure = application.graphicUtil.textMeasure;
 	    let width, str;
-	    const buf = 2,
-	      attribute = this.attribute,
+	    const attribute = this.attribute,
 	      {
 	        maxLineWidth = textTheme.maxLineWidth,
 	        ellipsis = textTheme.ellipsis,
@@ -23147,8 +23147,11 @@
 	        fontSize = textTheme.fontSize,
 	        fontWeight = textTheme.fontWeight,
 	        stroke = textTheme.stroke,
-	        lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf,
 	        lineWidth = textTheme.lineWidth
+	      } = attribute,
+	      buf = Math.max(2, .075 * fontSize),
+	      {
+	        lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf
 	      } = attribute;
 	    if (!this.shouldUpdateShape() && this.cache) {
 	      width = this.cache.clipedWidth;
@@ -23178,7 +23181,7 @@
 	    }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
 	    this.clearUpdateShapeTag();
 	    const dx = textDrawOffsetX(textAlign, width),
-	      dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+	      dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize, 0);
 	    return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
 	  }
 	  updateMultilineAABBBounds(text) {
@@ -36285,11 +36288,14 @@
 	    return prevKeys.length === nextKeys.length && prevKeys.every(key => "stops" === key ? isStopsEqual(prev[key], next[key]) : prev[key] === next[key]);
 	  },
 	  isLineDashEqual = (prev, next) => prev.length === next.length && prev.join("-") === next.join("-"),
-	  isSegmentAttrEqual = (prev, next, key) => !(!isNil(prev) || !isNil(next)) || !isNil(prev) && !isNil(next) && ("lineDash" === key ? isLineDashEqual(prev, next) : "stroke" === key ? isColorAttrEqual(prev, next) : prev === next);
+	  isSegmentAttrEqual = (prev, next, key) => !(!isNil(prev) || !isNil(next)) || !isNil(prev) && !isNil(next) && ("lineDash" === key ? isLineDashEqual(prev, next) : "stroke" === key || "fill" === key ? isColorAttrEqual(prev, next) : prev === next),
+	  fillAttrs = ["fill", "fillOpacity", "background", "texture", "texturePadding", "textureSize", "textureColor"],
+	  strokeAttrs = ["stroke", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "lineWidth", "miterLimit"],
+	  areaAttrs = fillAttrs.concat(strokeAttrs);
 	function getLineSegmentConfigs(items, points, element) {
 	  var _a;
 	  if (!items || items.length <= 1) return null;
-	  const checkAttributes = "area" === (null === (_a = null == element ? void 0 : element.mark) || void 0 === _a ? void 0 : _a.markType) ? ["fill", "fillOpacity", "background", "texture", "texturePadding", "textureSize", "textureColor"] : ["stroke", "strokeOpacity", "lineDash", "lineDashOffset", "lineCap", "lineJoin", "lineWidth", "miterLimit"],
+	  const checkAttributes = "area" === (null === (_a = null == element ? void 0 : element.mark) || void 0 === _a ? void 0 : _a.markType) ? areaAttrs : strokeAttrs,
 	    segments = [];
 	  let prevSegmentAttrs = null;
 	  return items.forEach((item, index) => {
@@ -42547,7 +42553,7 @@
 	  }
 	  getTextAlign(vector) {
 	    let align = "center";
-	    return isNumberClose(vector[0], 0) ? align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
+	    return isNumberClose(vector[0], 0) ? isNumberClose(vector[1], 0) ? Object.is(vector[1], -0) ? align = "start" : Object.is(vector[0], -0) && (align = "end") : align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
 	  }
 	  getTickLineItems() {
 	    const {
@@ -42656,7 +42662,7 @@
 	    layer > 0 && (0 === axisVector[1] ? offset += (this.axisLabelLayerSize[layer - 1].height + get$1(this.attribute, "label.space", 4)) * layer : offset += (this.axisLabelLayerSize[layer - 1].width + get$1(this.attribute, "label.space", 4)) * layer);
 	    const point = this.getVerticalCoord(tickDatum.point, offset, inside),
 	      vector = this.getVerticalVector(offset, inside, point),
-	      text = formatMethod ? formatMethod(tickDatum.label, tickDatum, index, tickData, layer) : tickDatum.label;
+	      text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
 	    let {
 	      style: textStyle
 	    } = tagAttributes;
@@ -42831,10 +42837,12 @@
 	    orient: orient
 	  } = config;
 	  !isEmpty(labels) && isValidNumber(limitLength) && labels.forEach(label => {
-	    const limitLabelLength = 0 === label.attribute.angle || isNil(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : Math.abs(limitLength / Math.sin(label.attribute.angle));
-	    label.setAttributes({
+	    if (("top" === orient || "bottom" === orient) && Math.floor(label.AABBBounds.height()) <= limitLength) return;
+	    if (("left" === orient || "right" === orient) && Math.floor(label.AABBBounds.width()) <= limitLength) return;
+	    let limitLabelLength = 0 === label.attribute.angle || isNil(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : Math.abs(limitLength / Math.sin(label.attribute.angle));
+	    isValidNumber(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
 	      maxLineWidth: limitLabelLength,
-	      ellipsis: ellipsis
+	      ellipsis: label.attribute.ellipsis || ellipsis
 	    });
 	  });
 	}
@@ -43099,7 +43107,7 @@
 	        verticalFactor = 1
 	      } = this.attribute,
 	      factor = (inside ? 1 : -1) * verticalFactor;
-	    return isNumberClose(vector[1], 0) ? base = isNumberClose(vector[0], 0) ? 1 === factor ? "bottom" : "top" : "middle" : vector[1] > 0 ? base = "top" : vector[1] < 0 && (base = "bottom"), base;
+	    return isNumberClose(vector[1], 0) ? base = !isNumberClose(vector[0], 0) || Object.is(vector[0], -0) || Object.is(vector[1], -0) ? "middle" : 1 === factor ? "bottom" : "top" : vector[1] > 0 ? base = "top" : vector[1] < 0 && (base = "bottom"), base;
 	  }
 	  handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
 	    var _a, _b, _c;
@@ -46866,6 +46874,11 @@
 	  }
 	}
 
+	var IOperateType;
+	!function (IOperateType) {
+	  IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", IOperateType.brushClear = "brushClear";
+	}(IOperateType || (IOperateType = {}));
+
 	const DEFAULT_BRUSH_ATTRIBUTES = {
 	  brushMode: "single",
 	  brushType: "rect",
@@ -46886,6 +46899,7 @@
 	    x2: 1 / 0
 	  }
 	};
+	const DEFAULT_SIZE_THRESHOLD = 5;
 
 	const delayMap = {
 	  debounce: debounce,
@@ -46893,7 +46907,7 @@
 	};
 	let Brush$1 = class Brush extends AbstractComponent {
 	  constructor(attributes) {
-	    super(merge$2({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
+	    super(merge$2({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._isDrawedBeforeEnd = !1, this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
 	      var _a, _b;
 	      if (this._outOfInteractiveRange(e)) return;
 	      const brushMoved = null === (_b = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.brushMoved) || void 0 === _b || _b;
@@ -46901,11 +46915,19 @@
 	    }, this._onBrushing = e => {
 	      this._outOfInteractiveRange(e) || (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
 	    }, this._onBrushEnd = e => {
-	      this._outOfInteractiveRange(e) || (this._updateDragMaskCallback && this._updateDragMaskCallback({
-	        operateType: this._activeDrawState ? "brushEnd" : "brushMaskUp",
+	      var _a;
+	      const {
+	        removeOnClick = !0
+	      } = this.attribute;
+	      this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? (this._container.incrementalClearChild(), this._updateDragMaskCallback && this._updateDragMaskCallback({
+	        operateType: IOperateType.brushClear,
+	        operateMask: this._operatingMask,
+	        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+	      })) : this._outOfInteractiveRange(e) || this._updateDragMaskCallback && this._updateDragMaskCallback({
+	        operateType: this._activeDrawState ? IOperateType.drawEnd : IOperateType.moveEnd,
 	        operateMask: this._operatingMask,
 	        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-	      }), this._activeDrawState = !1, this._activeMoveState = !1, this._operatingMask.setAttribute("pickable", !1));
+	      }), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, null === (_a = this._operatingMask) || void 0 === _a || _a.setAttribute("pickable", !1);
 	    };
 	  }
 	  bindBrushEvents() {
@@ -46934,12 +46956,11 @@
 	  }
 	  _initDraw(e) {
 	    const {
-	        brushMode: brushMode,
-	        removeOnClick: removeOnClick
+	        brushMode: brushMode
 	      } = this.attribute,
 	      pos = this.eventPosToStagePos(e);
-	    this._cacheDrawPoints = [pos], this._operatingMask || this._addBrushMask(), "single" === brushMode && removeOnClick ? (this._container.incrementalClearChild(), this._addBrushMask()) : "multiple" === brushMode && this._addBrushMask(), this._updateDragMaskCallback && this._updateDragMaskCallback({
-	      operateType: "brushStart",
+	    this._cacheDrawPoints = [pos], this._isDrawedBeforeEnd = !1, "single" === brushMode && this._container.incrementalClearChild(), this._addBrushMask(), this._updateDragMaskCallback && this._updateDragMaskCallback({
+	      operateType: IOperateType.drawStart,
 	      operateMask: this._operatingMask,
 	      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
 	    });
@@ -46967,21 +46988,31 @@
 	      minMoveStepY = minY - y1,
 	      maxMoveStepY = maxY - y2;
 	    this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX], this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY], this._operatingMask.setAttribute("pickable", !0), this._updateDragMaskCallback && this._updateDragMaskCallback({
-	      operateType: "brushMaskDown",
+	      operateType: IOperateType.moveStart,
 	      operateMask: this._operatingMask,
 	      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
 	    });
 	  }
 	  _drawing(e) {
-	    const pos = this.eventPosToStagePos(e);
-	    if (this._cacheDrawPoints.length > 0) {
+	    var _a;
+	    const pos = this.eventPosToStagePos(e),
+	      {
+	        x1 = 0,
+	        x2 = 0,
+	        y1 = 0,
+	        y2 = 0
+	      } = null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds,
+	      {
+	        sizeThreshold = DEFAULT_SIZE_THRESHOLD
+	      } = this.attribute;
+	    if (this._isDrawedBeforeEnd = !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold), this._cacheDrawPoints.length > 0) {
 	      const lastPos = this._cacheDrawPoints[this._cacheDrawPoints.length - 1];
 	      if (pos.x === (null == lastPos ? void 0 : lastPos.x) && pos.y === (null == lastPos ? void 0 : lastPos.y)) return;
 	    }
 	    this._cacheDrawPoints.push(pos);
 	    const maskPoints = this._computeMaskPoints();
 	    this._operatingMask.setAttribute("points", maskPoints), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._updateDragMaskCallback && this._updateDragMaskCallback({
-	      operateType: "brushing",
+	      operateType: IOperateType.drawing,
 	      operateMask: this._operatingMask,
 	      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
 	    });
@@ -46998,7 +47029,7 @@
 	      dx: moveX,
 	      dy: moveY
 	    }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._updateDragMaskCallback && this._updateDragMaskCallback({
-	      operateType: "brushMaskMove",
+	      operateType: IOperateType.moving,
 	      operateMask: this._operatingMask,
 	      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
 	    });
@@ -53471,22 +53502,45 @@
 	        return null;
 	    }
 	    const { x, y } = pos;
-	    const xAxisList = getAxis$1(chart, 'x', pos);
-	    const yAxisList = getAxis$1(chart, 'y', pos);
+	    const xAxisList = getAxis$1(chart, 'x', pos) ?? [];
+	    const yAxisList = getAxis$1(chart, 'y', pos) ?? [];
+	    const bandAxisSet = new Set();
+	    const linearAxisSet = new Set();
+	    [xAxisList, yAxisList].forEach(axisList => axisList.forEach(axis => {
+	        const isDiscreteAxis = isDiscrete(axis.getScale().type);
+	        if (isDiscreteAxis) {
+	            bandAxisSet.add(axis);
+	        }
+	        else {
+	            linearAxisSet.add(axis);
+	        }
+	    }));
 	    const targetAxisInfo = [];
-	    if (xAxisList) {
-	        xAxisList.forEach(axis => {
-	            const isDiscreteAxis = isDiscrete(axis.getScale().type);
-	            const info = getDimensionInfoByPosition(axis, x, 'x', isDiscreteAxis ? discreteXAxisGetDimensionField : continuousXAxisGetDimensionField);
-	            info && targetAxisInfo.push(info);
+	    const addAxisDimensionInfo = (orient, isDiscrete) => {
+	        (orient === 'x' ? xAxisList : yAxisList).forEach(axis => {
+	            if ((isDiscrete ? bandAxisSet : linearAxisSet).has(axis)) {
+	                const info = getDimensionInfoByPosition(axis, orient === 'x' ? x : y, orient, orient === 'x'
+	                    ? isDiscrete
+	                        ? discreteXAxisGetDimensionField
+	                        : continuousXAxisGetDimensionField
+	                    : isDiscrete
+	                        ? discreteYAxisGetDimensionField
+	                        : continuousYAxisGetDimensionField);
+	                info && targetAxisInfo.push(info);
+	            }
 	        });
+	    };
+	    if (chart.getSpec().direction === Direction$2.horizontal) {
+	        addAxisDimensionInfo('y', bandAxisSet.size > 0);
+	        if (targetAxisInfo.length === 0) {
+	            addAxisDimensionInfo('x', bandAxisSet.size > 0);
+	        }
 	    }
-	    if (yAxisList) {
-	        yAxisList.forEach(axis => {
-	            const isDiscreteAxis = isDiscrete(axis.getScale().type);
-	            const info = getDimensionInfoByPosition(axis, y, 'y', isDiscreteAxis ? discreteYAxisGetDimensionField : continuousYAxisGetDimensionField);
-	            info && targetAxisInfo.push(info);
-	        });
+	    else {
+	        addAxisDimensionInfo('x', bandAxisSet.size > 0);
+	        if (targetAxisInfo.length === 0) {
+	            addAxisDimensionInfo('y', bandAxisSet.size > 0);
+	        }
 	    }
 	    if (!targetAxisInfo.length) {
 	        return null;
@@ -58290,7 +58344,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.2.0-beta.6";
+	const version = "1.2.0";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -78932,7 +78986,9 @@
 	    _outOfBrushElementsMap = {};
 	    _linkedInBrushElementsMap = {};
 	    _linkedOutOfBrushElementsMap = {};
+	    _needInitOutState = true;
 	    _isFristState = true;
+	    _cacheInteractiveRangeAttrs = [];
 	    static createComponent(spec, options) {
 	        const brushSpec = spec.brush || options.defaultSpec;
 	        if (isNil(brushSpec) || brushSpec.visible === false) {
@@ -78963,14 +79019,12 @@
 	        }
 	        return data;
 	    }
-	    _createBrushComponent(region, componentIndex) {
+	    _getBrushInteractiveAttr(region) {
 	        const seriesRegionStartX = region.getLayoutStartPoint().x;
 	        const seriesRegionEndX = seriesRegionStartX + region.getLayoutRect().width;
 	        const seriesRegionStartY = region.getLayoutStartPoint().y;
 	        const seriesRegionEndY = seriesRegionStartY + region.getLayoutRect().height;
-	        const brush = new Brush$1({
-	            zIndex: this.layoutZIndex,
-	            brushStyle: transformToGraphic(this._spec?.style),
+	        return {
 	            interactiveRange: {
 	                minY: seriesRegionStartY,
 	                maxY: seriesRegionEndY,
@@ -78978,46 +79032,77 @@
 	                maxX: seriesRegionEndX
 	            },
 	            xRange: [seriesRegionStartX, seriesRegionEndX],
-	            yRange: [seriesRegionStartY, seriesRegionEndY],
-	            ...this._spec
-	        });
-	        brush.id = this._spec.id ?? `brush-${this.id}`;
-	        this.getContainer().add(brush);
-	        const { brushMode = 'single', removeOnClick = true } = this._spec;
-	        brush.setUpdateDragMaskCallback((operateParams) => {
-	            const { operateType, operateMask } = operateParams;
-	            if (this._isFristState || (brushMode === 'single' && removeOnClick && operateType === 'drawStart')) {
-	                this._initMarkBrushState(componentIndex);
-	            }
-	            this._reconfigItem(operateMask, region);
-	            this._reconfigLinkedItem(operateMask, region);
-	            let eventType = ChartEvent.brushChange;
-	            if (operateType === 'brushStart' || operateType === 'brushDown') {
-	                eventType = ChartEvent.brushStart;
-	            }
-	            else if (operateType === 'brushEnd' || operateType === 'brushMaskUp') {
-	                eventType = ChartEvent.brushEnd;
-	            }
-	            else {
-	                eventType = ChartEvent.brushChange;
+	            yRange: [seriesRegionStartY, seriesRegionEndY]
+	        };
+	    }
+	    _createOrUpdateBrushComponent(region, componentIndex) {
+	        const interactiveAttr = this._getBrushInteractiveAttr(region);
+	        if (this._brushComponents.length === this._relativeRegions.length) {
+	            if (!isEqual$1(this._cacheInteractiveRangeAttrs[componentIndex], interactiveAttr)) {
+	                const brushComponent = this._brushComponents[componentIndex];
+	                brushComponent.setAttributes(interactiveAttr);
+	                this._initMarkBrushState(componentIndex, '');
+	                brushComponent.children[0].removeAllChild();
+	                this._needInitOutState = true;
 	            }
-	            this.event.emit(eventType, {
-	                model: this,
-	                value: {
-	                    operateType,
-	                    operateRegion: region,
-	                    inBrushData: this._extendDataInBrush(this._inBrushElementsMap),
-	                    outOfBrushData: this._extendDatumOutOfBrush(this._outOfBrushElementsMap),
-	                    linkInBrushData: this._extendDataInBrush(this._linkedInBrushElementsMap),
-	                    linkOutOfBrushData: this._extendDatumOutOfBrush(this._linkedOutOfBrushElementsMap),
-	                    inBrushElementsMap: this._inBrushElementsMap,
-	                    outOfBrushElementsMap: this._outOfBrushElementsMap,
-	                    linkedInBrushElementsMap: this._linkedInBrushElementsMap,
-	                    linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap
+	        }
+	        else {
+	            const brush = new Brush$1({
+	                zIndex: this.layoutZIndex,
+	                brushStyle: transformToGraphic(this._spec?.style),
+	                ...interactiveAttr,
+	                ...this._spec
+	            });
+	            brush.id = this._spec.id ?? `brush-${this.id}`;
+	            this.getContainer().add(brush);
+	            const { brushMode = 'single' } = this._spec;
+	            this._brushComponents.push(brush);
+	            this._cacheInteractiveRangeAttrs.push(interactiveAttr);
+	            brush.setUpdateDragMaskCallback((operateParams) => {
+	                const { operateType, operateMask } = operateParams;
+	                if (this._isFristState ||
+	                    (this._needInitOutState && brushMode === 'single' && operateType === IOperateType.drawing)) {
+	                    this._initMarkBrushState(componentIndex, 'outOfBrush');
+	                }
+	                if (operateType === IOperateType.drawing) {
+	                    this._needInitOutState = false;
+	                }
+	                if (operateType === IOperateType.drawEnd) {
+	                    this._needInitOutState = true;
+	                }
+	                if (operateType === IOperateType.brushClear) {
+	                    this._initMarkBrushState(componentIndex, '');
+	                    this._needInitOutState = true;
+	                }
+	                this._reconfigItem(operateMask, region);
+	                this._reconfigLinkedItem(operateMask, region);
+	                let eventType = ChartEvent.brushChange;
+	                if (operateType === IOperateType.drawStart || operateType === IOperateType.moveStart) {
+	                    eventType = ChartEvent.brushStart;
 	                }
+	                else if (operateType === IOperateType.drawEnd || operateType === IOperateType.moveEnd) {
+	                    eventType = ChartEvent.brushEnd;
+	                }
+	                else {
+	                    eventType = ChartEvent.brushChange;
+	                }
+	                this.event.emit(eventType, {
+	                    model: this,
+	                    value: {
+	                        operateType,
+	                        operateRegion: region,
+	                        inBrushData: this._extendDataInBrush(this._inBrushElementsMap),
+	                        outOfBrushData: this._extendDatumOutOfBrush(this._outOfBrushElementsMap),
+	                        linkInBrushData: this._extendDataInBrush(this._linkedInBrushElementsMap),
+	                        linkOutOfBrushData: this._extendDatumOutOfBrush(this._linkedOutOfBrushElementsMap),
+	                        inBrushElementsMap: this._inBrushElementsMap,
+	                        outOfBrushElementsMap: this._outOfBrushElementsMap,
+	                        linkedInBrushElementsMap: this._linkedInBrushElementsMap,
+	                        linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap
+	                    }
+	                });
 	            });
-	        });
-	        this._brushComponents.push(brush);
+	        }
 	    }
 	    _transformBrushedMarkAttr(brushedStyle) {
 	        const styleResult = {};
@@ -79175,7 +79260,7 @@
 	            this._linkedItemMap[s.id] = s.getMarksWithoutRoot();
 	        });
 	    }
-	    _initMarkBrushState(componentIndex) {
+	    _initMarkBrushState(componentIndex, stateName) {
 	        this._brushComponents.forEach((brush, index) => {
 	            if (index !== componentIndex) {
 	                brush.children[0].removeAllChild();
@@ -79205,7 +79290,7 @@
 	                        }
 	                        return;
 	                    };
-	                    graphicItem.addState('outOfBrush');
+	                    graphicItem.addState(stateName);
 	                    this._outOfBrushElementsMap[el.key] = el;
 	                    this._linkedOutOfBrushElementsMap[el.key] = el;
 	                });
@@ -79223,25 +79308,13 @@
 	        super.onLayoutEnd(ctx);
 	        const brushVisible = this._spec.visible ?? true;
 	        if (brushVisible) {
-	            if (this._brushComponents.length === 0) {
-	                this._relativeRegions.forEach((region, index) => {
-	                    this._createBrushComponent(region, index);
-	                });
-	            }
+	            this._relativeRegions.forEach((region, index) => {
+	                this._createOrUpdateBrushComponent(region, index);
+	            });
 	        }
 	    }
 	}
 
-	var IOperateType;
-	(function (IOperateType) {
-	    IOperateType["brushStart"] = "brushStart";
-	    IOperateType["brushEnd"] = "brushEnd";
-	    IOperateType["brushMaskUp"] = "brushMaskUp";
-	    IOperateType["brushing"] = "brushing";
-	    IOperateType["brushMaskDown"] = "brushMaskDown";
-	    IOperateType["brushMaskMove"] = "brushMaskMove";
-	})(IOperateType || (IOperateType = {}));
-
 	function overlap$1(a, b, sep = 0) {
 	    return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
 	}
@@ -80879,7 +80952,8 @@
 	                autoHideMethod: spec.label.autoHideMethod,
 	                autoHideSeparation: spec.label.autoHideSeparation,
 	                limitEllipsis: spec.label.limitEllipsis,
-	                layoutFunc: spec.label.layoutFunc
+	                layoutFunc: spec.label.layoutFunc,
+	                dataFilter: spec.label.dataFilter
 	            },
 	            tick: {
 	                visible: spec.tick.visible,
@@ -80892,7 +80966,8 @@
 	                        return transformToGraphic(this._preprocessSpec(merge$2({}, this._theme.tick?.style, style)));
 	                    }
 	                    : transformToGraphic(spec.tick.style),
-	                state: transformStateStyle(spec.tick.state)
+	                state: transformStateStyle(spec.tick.state),
+	                dataFilter: spec.tick.dataFilter
 	            },
 	            subTick: {
 	                visible: spec.subTick.visible,
@@ -82151,8 +82226,11 @@
 	        this._tick = this._spec.tick;
 	        this._orient = this._spec.orient === 'angle' ? 'angle' : 'radius';
 	        this._center = this._spec.center;
-	        this._startAngle = radians(this._spec.startAngle ?? POLAR_START_ANGLE$1);
-	        this._endAngle = radians(this._spec.endAngle ?? (isValid(this._spec.startAngle) ? this._spec.startAngle + 360 : POLAR_END_ANGLE$1));
+	        const chartSpec = this.getChart().getSpec();
+	        const startAngle = this._spec.startAngle ?? chartSpec.startAngle;
+	        const endAngle = this._spec.endAngle ?? chartSpec.endAngle;
+	        this._startAngle = radians(startAngle ?? POLAR_START_ANGLE$1);
+	        this._endAngle = radians(endAngle ?? (isValid(startAngle) ? startAngle + 360 : POLAR_END_ANGLE$1));
 	    }
 	    setLayoutStartPosition(pos) {
 	        const region = this.getRegions()?.[0];