From 52880a8c625adcd1ad9eb06b76015cc8ef1e8246 Mon Sep 17 00:00:00 2001 From: 100pah Date: Thu, 9 Jan 2020 02:35:36 +0800 Subject: [PATCH] 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 | 9 +++- src/component/brush/visualEncoding.js | 9 ++-- test/brush3.html | 68 +++++++++++++++++++++++++++ test/runTest/actions/__meta__.json | 2 +- test/runTest/actions/brush3.json | 2 +- 5 files changed, 84 insertions(+), 6 deletions(-) diff --git a/src/component/brush/BrushView.js b/src/component/brush/BrushView.js index ecf54d136..bd0f486c5 100644 --- a/src/component/brush/BrushView.js +++ b/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 diff --git a/src/component/brush/visualEncoding.js b/src/component/brush/visualEncoding.js index 60a2f0ca5..5f8677dce 100644 --- a/src/component/brush/visualEncoding.js +++ b/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. diff --git a/test/brush3.html b/test/brush3.html index e20fab132..54d179685 100644 --- a/test/brush3.html +++ b/test/brush3.html @@ -41,6 +41,7 @@ under the License.
+
@@ -174,6 +175,73 @@ under the License. + + + + \ No newline at end of file diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 2b16786fa..d55e77517 100644 --- a/test/runTest/actions/__meta__.json +++ b/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, diff --git a/test/runTest/actions/brush3.json b/test/runTest/actions/brush3.json index 9291fb62b..2a79a3ddc 100644 --- a/test/runTest/actions/brush3.json +++ b/test/runTest/actions/brush3.json @@ -1 +1 @@ -[{"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 -- GitLab