Merge pull request #14569 from susiwen8/14416

Fix(brush): clamp range when brush

src/component/helper/BrushTargetManager.ts

@@ -36,13 +36,11 @@ import { BrushAreaParam, BrushAreaParamInternal } from '../brush/BrushModel';
 import SeriesModel from '../../model/Series';
 import { Dictionary } from '../../util/types';
 import {
-    ModelFinderObject, ParsedModelFinder, ModelFinder,
+    ModelFinderObject, ModelFinder,
     parseFinder as modelUtilParseFinder,
     ParsedModelFinderKnown
 } from '../../util/model';
 
-
-const COORD_CONVERTS = ['dataToPoint', 'pointToData'] as const;
 type COORD_CONVERTS_INDEX = 0 | 1;
 
 // FIXME
@@ -160,7 +158,7 @@ class BrushTargetManager {
                 each(
                     targetInfo.coordSyses,
                     function (coordSys) {
-                        const result = coordConvert[area.brushType](1, coordSys, area.range);
+                        const result = coordConvert[area.brushType](1, coordSys, area.range, true);
                         cb(area, result.values, coordSys, ecModel);
                     }
                 );
@@ -411,7 +409,8 @@ const panelRectBuilders: Record<BrushTargetBuilderKey, PanelRectBuilder> = {
 type ConvertCoord = (
     to: COORD_CONVERTS_INDEX,
     coordSys: BrushableCoordinateSystem,
-    rangeOrCoordRange: BrushAreaRange
+    rangeOrCoordRange: BrushAreaRange,
+    clamp?: boolean
 ) => {
     values: BrushAreaRange,
     xyMinMax: BrushDimensionMinMax[]
@@ -422,12 +421,16 @@ const coordConvert: Record<BrushType, ConvertCoord> = {
 
     lineY: curry(axisConvert, 1),
 
-    rect: function (to, coordSys, rangeOrCoordRange: BrushDimensionMinMax[]): {
+    rect: function (to, coordSys, rangeOrCoordRange: BrushDimensionMinMax[], clamp): {
         values: BrushDimensionMinMax[],
         xyMinMax: BrushDimensionMinMax[]
     } {
-        const xminymin = coordSys[COORD_CONVERTS[to]]([rangeOrCoordRange[0][0], rangeOrCoordRange[1][0]]);
-        const xmaxymax = coordSys[COORD_CONVERTS[to]]([rangeOrCoordRange[0][1], rangeOrCoordRange[1][1]]);
+        const xminymin = to
+            ? coordSys.pointToData([rangeOrCoordRange[0][0], rangeOrCoordRange[1][0]], clamp)
+            : coordSys.dataToPoint([rangeOrCoordRange[0][0], rangeOrCoordRange[1][0]], clamp);
+        const xmaxymax = to
+            ? coordSys.pointToData([rangeOrCoordRange[0][1], rangeOrCoordRange[1][1]], clamp)
+            : coordSys.dataToPoint([rangeOrCoordRange[0][1], rangeOrCoordRange[1][1]], clamp);
         const values = [
             formatMinMax([xminymin[0], xmaxymax[0]]),
             formatMinMax([xminymin[1], xmaxymax[1]])
@@ -435,13 +438,13 @@ const coordConvert: Record<BrushType, ConvertCoord> = {
         return {values: values, xyMinMax: values};
     },
 
-    polygon: function (to, coordSys, rangeOrCoordRange: BrushDimensionMinMax[]): {
+    polygon: function (to, coordSys, rangeOrCoordRange: BrushDimensionMinMax[], clamp): {
         values: BrushDimensionMinMax[],
         xyMinMax: BrushDimensionMinMax[]
     } {
         const xyMinMax = [[Infinity, -Infinity], [Infinity, -Infinity]];
         const values = map(rangeOrCoordRange, function (item) {
-            const p = coordSys[COORD_CONVERTS[to]](item);
+            const p = to ? coordSys.pointToData(item, clamp) : coordSys.dataToPoint(item, clamp);
             xyMinMax[0][0] = Math.min(xyMinMax[0][0], p[0]);
             xyMinMax[1][0] = Math.min(xyMinMax[1][0], p[1]);
             xyMinMax[0][1] = Math.max(xyMinMax[0][1], p[0]);
@@ -471,7 +474,7 @@ function axisConvert(
     const axis = coordSys.getAxis(['x', 'y'][axisNameIndex]);
     const values = formatMinMax(map([0, 1], function (i) {
         return to
-            ? axis.coordToData(axis.toLocalCoord(rangeOrCoordRange[i]))
+            ? axis.coordToData(axis.toLocalCoord(rangeOrCoordRange[i]), true)
             : axis.toGlobalCoord(axis.dataToCoord(rangeOrCoordRange[i]));
     }));
     const xyMinMax = [];

src/coord/CoordinateSystem.ts

@@ -126,14 +126,12 @@ export interface CoordinateSystem {
      * Some coord sys (like Parallel) might do not have `pointToData`,
      * or the meaning of this kind of features is not clear yet.
      * @param point point Point in global pixel coordinate system.
-     * @param reserved Defined by the coordinate system itself
-     * @param out
+     * @param clamp Clamp range
      * @return data
      */
     pointToData?(
         point: number[],
-        reserved?: any,
-        out?: number[]
+        clamp?: boolean
     ): number | number[];
 
     // @param point Point in global pixel coordinate system.

src/coord/cartesian/Cartesian2D.ts

@@ -105,7 +105,7 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
             && this.getAxis('y').containData(data[1]);
     }
 
-    dataToPoint(data: ScaleDataValue[], reserved?: unknown, out?: number[]): number[] {
+    dataToPoint(data: ScaleDataValue[], clamp?: boolean, out?: number[]): number[] {
         out = out || [];
         const xVal = data[0];
         const yVal = data[1];
@@ -121,8 +121,8 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
         }
         const xAxis = this.getAxis('x');
         const yAxis = this.getAxis('y');
-        out[0] = xAxis.toGlobalCoord(xAxis.dataToCoord(xVal));
-        out[1] = yAxis.toGlobalCoord(yAxis.dataToCoord(yVal));
+        out[0] = xAxis.toGlobalCoord(xAxis.dataToCoord(xVal, clamp));
+        out[1] = yAxis.toGlobalCoord(yAxis.dataToCoord(yVal, clamp));
         return out;
     }
 
@@ -146,15 +146,15 @@ class Cartesian2D extends Cartesian<Axis2D> implements CoordinateSystem {
         return out;
     }
 
-    pointToData(point: number[], out?: number[]): number[] {
-        out = out || [];
+    pointToData(point: number[], clamp?: boolean): number[] {
+        const out: number[] = [];
         if (this._invTransform) {
             return applyTransform(out, point, this._invTransform);
         }
         const xAxis = this.getAxis('x');
         const yAxis = this.getAxis('y');
-        out[0] = xAxis.coordToData(xAxis.toLocalCoord(point[0]));
-        out[1] = yAxis.coordToData(yAxis.toLocalCoord(point[1]));
+        out[0] = xAxis.coordToData(xAxis.toLocalCoord(point[0]), clamp);
+        out[1] = yAxis.coordToData(yAxis.toLocalCoord(point[1]), clamp);
         return out;
     }
 

src/layout/barGrid.ts

@@ -591,7 +591,7 @@ export const largeLayout: StageHandler = {
                     valuePair[valueDimIdx] = data.get(valueDim, dataIndex);
                     valuePair[1 - valueDimIdx] = data.get(baseDim, dataIndex);
 
-                    coord = cartesian.dataToPoint(valuePair, null, coord);
+                    coord = cartesian.dataToPoint(valuePair, null);
                     // Data index might not be in order, depends on `progressiveChunkMode`.
                     largeBackgroundPoints[pointsOffset] =
                         valueAxisHorizontal ? coordLayout.x + coordLayout.width : coord[0];

test/brush3.html

@@ -42,6 +42,7 @@ under the License.
         <div id="main1"></div>
         <div id="main0"></div>
         <div id="main2"></div>
+        <div id="main3"></div>
 
 
 
@@ -240,6 +241,41 @@ under the License.
         });
         </script>
 
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    data: [120, 200, 150, 80, 70, 110, 130],
+                    type: 'bar'
+                }],
+                toolbox: {
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: false,
+                            filterMode: 'weakFilter'
+                        }
+                    }
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: [
+                    'Test brush to end: ',
+                    'click "区域缩放", brush from the fourth bar to end of chart',
+                    'The number of selected bar should be 4'
+                ],
+                option: option
+            });
+        });
+        </script>
+