fix: the cover of the brush component should be able to roam with the...

fix: the cover of the brush component should be able to roam with the coordinate system when using updateTransform. fix #11754.

src/component/brush/BrushView.js

@@ -20,6 +20,7 @@
 import * as echarts from '../../echarts';
 import * as zrUtil from 'zrender/src/core/util';
 import BrushController from '../helper/BrushController';
+import {layoutCovers} from './visualEncoding';
 
 export default echarts.extendComponentView({
 
@@ -65,7 +66,13 @@ export default echarts.extendComponentView({
     /**
      * @override
      */
-    updateTransform: updateController,
+    updateTransform: function (brushModel, ecModel) {
+        // PENDING: `updateTransform` is a little tricky, whose layout need
+        // to be calculate mandatorily and other stages will not be performed.
+        // Take care the correctness of the logic. See #11754 .
+        layoutCovers(ecModel);
+        return updateController.apply(this, arguments);
+    },
 
     /**
      * @override

src/component/brush/visualEncoding.js

@@ -35,16 +35,19 @@ var PRIORITY_BRUSH = echarts.PRIORITY.VISUAL.BRUSH;
  */
 echarts.registerLayout(PRIORITY_BRUSH, function (ecModel, api, payload) {
     ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
-
         payload && payload.type === 'takeGlobalCursor' && brushModel.setBrushOption(
             payload.key === 'brush' ? payload.brushOption : {brushType: false}
         );
+    });
+    layoutCovers(ecModel);
+});
 
+export function layoutCovers(ecModel) {
+    ecModel.eachComponent({mainType: 'brush'}, function (brushModel) {
         var brushTargetManager = brushModel.brushTargetManager = new BrushTargetManager(brushModel.option, ecModel);
-
         brushTargetManager.setInputRanges(brushModel.areas, ecModel);
     });
-});
+}
 
 /**
  * Register the visual encoding if this modules required.

test/brush3.html

@@ -41,6 +41,7 @@ under the License.
 
         <div id="main1"></div>
         <div id="main0"></div>
+        <div id="main2"></div>
 
 
 
@@ -174,6 +175,73 @@ under the License.
 
 
 
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            var testGeoJson1 = {
+                'type': 'FeatureCollection',
+                'features': [
+                    {
+                        'geometry': {
+                            'type': 'Polygon',
+                            'coordinates': [
+                                [[2000, 3000], [5000, 3000], [5000, 8000], [2000, 8000]]
+                            ]
+                        },
+                        'properties': {
+                            'name': 'Some Area',
+                            'childNum': 1
+                        }
+                    }
+                ]
+            };
+            echarts.registerMap('test1', testGeoJson1);
+
+            var data = [];
+            var step = 500;
+            var lngStart = 1000;
+            var latStart = 2000;
+            for (var i = 0; i < 10; i++) {
+                for (var j = 0; j < 10; j++) {
+                    data.push({
+                        value: [lngStart + j * step, latStart + i * step],
+                        symbolSize: 5 + j * 5
+                    });
+                }
+            }
+
+            var option = {
+                geo: [{
+                    map: 'test1',
+                    zoom: 4,
+                    roam: true
+                }],
+                brush: {
+                    geoIndex: 0
+                },
+                series: [{
+                    type: 'scatter',
+                    coordinateSystem: 'geo',
+                    symbol: 'roundRect',
+                    symbolSize: 30,
+                    data: data
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Test updateTransform: ',
+                    'click "保持选择", then brush, then roam the scatter',
+                    'the "cover" of the brush should be roamed together with the scatter'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+
 
     </body>
 </html>
\ No newline at end of file

test/runTest/actions/__meta__.json

@@ -34,7 +34,7 @@
   "boxplot-multi": 1,
   "brush": 7,
   "brush2": 3,
-  "brush3": 2,
+  "brush3": 3,
   "calendar-converter": 1,
   "calendar-heatmap": 1,
   "calendar-month": 2,

test/runTest/actions/brush3.json

-[{"name":"Action 1","ops":[{"type":"mousedown","time":404,"x":22,"y":72},{"type":"mouseup","time":505,"x":22,"y":72},{"time":506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":622,"x":26,"y":73},{"type":"mousemove","time":822,"x":154,"y":99},{"type":"mousemove","time":1029,"x":154,"y":105},{"type":"mousemove","time":1255,"x":153,"y":118},{"type":"mousemove","time":1455,"x":154,"y":120},{"type":"mousedown","time":1556,"x":154,"y":120},{"type":"mousemove","time":1593,"x":154,"y":120},{"type":"mousemove","time":1803,"x":306,"y":177},{"type":"mousemove","time":2006,"x":378,"y":198},{"type":"mousemove","time":2206,"x":386,"y":199},{"type":"mouseup","time":2449,"x":386,"y":199},{"time":2450,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2765,"x":387,"y":197},{"type":"mousemove","time":2965,"x":405,"y":158},{"type":"mousemove","time":3174,"x":405,"y":157},{"type":"mousedown","time":3181,"x":405,"y":157},{"type":"mouseup","time":3258,"x":405,"y":157},{"time":3259,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3724,"x":405,"y":157},{"type":"mousemove","time":3924,"x":131,"y":97},{"type":"mousemove","time":4124,"x":63,"y":76},{"type":"mousemove","time":4324,"x":43,"y":71},{"type":"mousemove","time":4575,"x":52,"y":70},{"type":"mousedown","time":4658,"x":52,"y":70},{"type":"mouseup","time":4743,"x":52,"y":70},{"time":4744,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4775,"x":53,"y":70},{"type":"mousemove","time":4977,"x":206,"y":139},{"type":"mousemove","time":5177,"x":239,"y":138},{"type":"mousemove","time":5377,"x":235,"y":129},{"type":"mousedown","time":5434,"x":235,"y":129},{"type":"mousemove","time":5578,"x":190,"y":129},{"type":"mousemove","time":5781,"x":196,"y":176},{"type":"mousemove","time":5991,"x":281,"y":190},{"type":"mousemove","time":6204,"x":371,"y":182},{"type":"mousemove","time":6412,"x":389,"y":157},{"type":"mousemove","time":6620,"x":309,"y":118},{"type":"mouseup","time":6839,"x":295,"y":120},{"time":6840,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6849,"x":295,"y":120},{"type":"mousemove","time":7050,"x":317,"y":122},{"type":"mousemove","time":7263,"x":386,"y":121},{"type":"mousemove","time":7463,"x":400,"y":119},{"type":"mousedown","time":7764,"x":400,"y":119},{"type":"mouseup","time":7849,"x":400,"y":119},{"time":7850,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568030045858},{"name":"Action 2","ops":[{"type":"mousedown","time":378,"x":202,"y":401},{"type":"mousemove","time":521,"x":201,"y":400},{"type":"mousemove","time":722,"x":178,"y":377},{"type":"mousemove","time":923,"x":160,"y":352},{"type":"mousemove","time":1123,"x":150,"y":337},{"type":"mouseup","time":1514,"x":150,"y":337},{"time":1515,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2314,"x":150,"y":337},{"type":"mousemove","time":2416,"x":150,"y":337},{"type":"mousemove","time":2633,"x":255,"y":338},{"type":"mousemove","time":2833,"x":284,"y":342},{"type":"mouseup","time":3083,"x":284,"y":342},{"time":3084,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3165,"x":284,"y":342}],"scrollY":116,"scrollX":0,"timestamp":1568030060979}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":404,"x":22,"y":72},{"type":"mouseup","time":505,"x":22,"y":72},{"time":506,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":622,"x":26,"y":73},{"type":"mousemove","time":822,"x":154,"y":99},{"type":"mousemove","time":1029,"x":154,"y":105},{"type":"mousemove","time":1255,"x":153,"y":118},{"type":"mousemove","time":1455,"x":154,"y":120},{"type":"mousedown","time":1556,"x":154,"y":120},{"type":"mousemove","time":1593,"x":154,"y":120},{"type":"mousemove","time":1803,"x":306,"y":177},{"type":"mousemove","time":2006,"x":378,"y":198},{"type":"mousemove","time":2206,"x":386,"y":199},{"type":"mouseup","time":2449,"x":386,"y":199},{"time":2450,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2765,"x":387,"y":197},{"type":"mousemove","time":2965,"x":405,"y":158},{"type":"mousemove","time":3174,"x":405,"y":157},{"type":"mousedown","time":3181,"x":405,"y":157},{"type":"mouseup","time":3258,"x":405,"y":157},{"time":3259,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3724,"x":405,"y":157},{"type":"mousemove","time":3924,"x":131,"y":97},{"type":"mousemove","time":4124,"x":63,"y":76},{"type":"mousemove","time":4324,"x":43,"y":71},{"type":"mousemove","time":4575,"x":52,"y":70},{"type":"mousedown","time":4658,"x":52,"y":70},{"type":"mouseup","time":4743,"x":52,"y":70},{"time":4744,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4775,"x":53,"y":70},{"type":"mousemove","time":4977,"x":206,"y":139},{"type":"mousemove","time":5177,"x":239,"y":138},{"type":"mousemove","time":5377,"x":235,"y":129},{"type":"mousedown","time":5434,"x":235,"y":129},{"type":"mousemove","time":5578,"x":190,"y":129},{"type":"mousemove","time":5781,"x":196,"y":176},{"type":"mousemove","time":5991,"x":281,"y":190},{"type":"mousemove","time":6204,"x":371,"y":182},{"type":"mousemove","time":6412,"x":389,"y":157},{"type":"mousemove","time":6620,"x":309,"y":118},{"type":"mouseup","time":6839,"x":295,"y":120},{"time":6840,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6849,"x":295,"y":120},{"type":"mousemove","time":7050,"x":317,"y":122},{"type":"mousemove","time":7263,"x":386,"y":121},{"type":"mousemove","time":7463,"x":400,"y":119},{"type":"mousedown","time":7764,"x":400,"y":119},{"type":"mouseup","time":7849,"x":400,"y":119},{"time":7850,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1568030045858},{"name":"Action 2","ops":[{"type":"mousedown","time":378,"x":202,"y":401},{"type":"mousemove","time":521,"x":201,"y":400},{"type":"mousemove","time":722,"x":178,"y":377},{"type":"mousemove","time":923,"x":160,"y":352},{"type":"mousemove","time":1123,"x":150,"y":337},{"type":"mouseup","time":1514,"x":150,"y":337},{"time":1515,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":2314,"x":150,"y":337},{"type":"mousemove","time":2416,"x":150,"y":337},{"type":"mousemove","time":2633,"x":255,"y":338},{"type":"mousemove","time":2833,"x":284,"y":342},{"type":"mouseup","time":3083,"x":284,"y":342},{"time":3084,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3165,"x":284,"y":342}],"scrollY":116,"scrollX":0,"timestamp":1568030060979},{"name":"Action 3","ops":[{"type":"mousemove","time":655,"x":531,"y":436},{"type":"mousemove","time":857,"x":630,"y":342},{"type":"mousemove","time":1058,"x":704,"y":277},{"type":"mousemove","time":1263,"x":740,"y":256},{"type":"mousemove","time":1485,"x":763,"y":221},{"type":"mousemove","time":1686,"x":757,"y":209},{"type":"mousemove","time":1913,"x":757,"y":209},{"type":"mousedown","time":2365,"x":757,"y":209},{"type":"mouseup","time":2375,"x":757,"y":209},{"time":2376,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2706,"x":755,"y":209},{"type":"mousemove","time":2906,"x":726,"y":216},{"type":"mousemove","time":3106,"x":705,"y":216},{"type":"mousemove","time":3313,"x":701,"y":215},{"type":"mousedown","time":3565,"x":701,"y":215},{"type":"mouseup","time":3574,"x":701,"y":215},{"time":3575,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3772,"x":696,"y":217},{"type":"mousemove","time":3973,"x":393,"y":372},{"type":"mousemove","time":4173,"x":331,"y":382},{"type":"mousemove","time":4380,"x":358,"y":369},{"type":"mousedown","time":4616,"x":358,"y":369},{"type":"mousemove","time":4625,"x":360,"y":370},{"type":"mousemove","time":4834,"x":429,"y":413},{"type":"mousemove","time":5053,"x":477,"y":430},{"type":"mousemove","time":5258,"x":524,"y":440},{"type":"mousemove","time":5484,"x":536,"y":442},{"type":"mouseup","time":5732,"x":536,"y":442},{"time":5733,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5745,"x":542,"y":435},{"type":"mousemove","time":5949,"x":642,"y":296},{"type":"mousemove","time":6158,"x":675,"y":252},{"type":"mousemove","time":6368,"x":681,"y":231},{"type":"mousemove","time":6569,"x":699,"y":220},{"type":"mousemove","time":6785,"x":706,"y":215},{"type":"mousedown","time":6918,"x":706,"y":215},{"type":"mouseup","time":6927,"x":706,"y":215},{"time":6928,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7122,"x":706,"y":215},{"type":"mousemove","time":7322,"x":556,"y":259},{"type":"mousemove","time":7522,"x":403,"y":305},{"type":"mousedown","time":7834,"x":403,"y":305},{"type":"mousemove","time":7844,"x":398,"y":305},{"type":"mousemove","time":8053,"x":316,"y":304},{"type":"mousemove","time":8255,"x":255,"y":308},{"type":"mousemove","time":8455,"x":319,"y":317},{"type":"mousemove","time":8665,"x":372,"y":311},{"type":"mousewheel","time":9072,"x":372,"y":311,"deltaY":-1},{"type":"mouseup","time":9084,"x":372,"y":311},{"time":9085,"delay":400,"type":"screenshot-auto"},{"type":"mousewheel","time":9094,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9118,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9149,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9191,"x":372,"y":311,"deltaY":-1},{"type":"mousewheel","time":9272,"x":372,"y":311,"deltaY":-1},{"type":"mousewheel","time":9297,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9327,"x":372,"y":311,"deltaY":-3},{"type":"mousewheel","time":9353,"x":372,"y":311,"deltaY":-4},{"type":"mousewheel","time":9383,"x":372,"y":311,"deltaY":-2},{"type":"mousewheel","time":9939,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":9965,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":9994,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10021,"x":372,"y":311,"deltaY":4},{"type":"mousewheel","time":10047,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10079,"x":372,"y":311,"deltaY":2},{"type":"mousewheel","time":10110,"x":372,"y":311,"deltaY":4},{"type":"mousewheel","time":10133,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10157,"x":372,"y":311,"deltaY":3},{"type":"mousewheel","time":10187,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10298,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10323,"x":372,"y":311,"deltaY":2},{"type":"mousewheel","time":10350,"x":372,"y":311,"deltaY":1},{"type":"mousewheel","time":10381,"x":372,"y":311,"deltaY":1},{"type":"mousemove","time":10748,"x":372,"y":312},{"type":"mousemove","time":10958,"x":434,"y":368},{"type":"mousedown","time":11149,"x":434,"y":368},{"type":"mousemove","time":11159,"x":432,"y":367},{"type":"mousemove","time":11359,"x":332,"y":352},{"type":"mousemove","time":11567,"x":291,"y":347},{"type":"mousemove","time":11780,"x":287,"y":346},{"type":"mousemove","time":11983,"x":313,"y":347},{"type":"mousemove","time":12186,"x":395,"y":322},{"type":"mousemove","time":12401,"x":486,"y":301},{"type":"mousemove","time":12609,"x":494,"y":302},{"type":"mouseup","time":12810,"x":494,"y":302},{"time":12811,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12821,"x":510,"y":295},{"type":"mousemove","time":13030,"x":776,"y":210}],"scrollY":614,"scrollX":0,"timestamp":1578508396758}]
\ No newline at end of file