From 6de533a261d115342d49f333b12d5afabbae5c57 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 24 May 2022 14:33:51 +0800 Subject: [PATCH 1/9] feat: ignore target size for large charts --- src/chart/bar/BarView.ts | 1 + src/chart/candlestick/CandlestickView.ts | 7 ++++--- src/chart/helper/LargeLineDraw.ts | 3 ++- src/chart/helper/LargeSymbolDraw.ts | 1 + 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 70e6c34678..9ca497b40f 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -1146,6 +1146,7 @@ function createLarge( const el = new LargePath({ shape: {points: data.getLayout('largePoints')}, incremental: !!incremental, + ignoreTargetSize: true, z2: 1 }); el.baseDimIdx = baseDimIdx; diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts index 9b2436db92..0990120de8 100644 --- a/src/chart/candlestick/CandlestickView.ts +++ b/src/chart/candlestick/CandlestickView.ts @@ -358,12 +358,14 @@ function createLarge( const elP = new LargeBoxPath({ shape: {points: largePoints}, - __sign: 1 + __sign: 1, + ignoreTargetSize: true }); group.add(elP); const elN = new LargeBoxPath({ shape: {points: largePoints}, - __sign: -1 + __sign: -1, + ignoreTargetSize: true }); group.add(elN); @@ -397,4 +399,3 @@ function setLargeStyle(sign: number, el: LargeBoxPath, seriesModel: CandlestickS export default CandlestickView; - diff --git a/src/chart/helper/LargeLineDraw.ts b/src/chart/helper/LargeLineDraw.ts index 62f5b6d14b..82eb4c1526 100644 --- a/src/chart/helper/LargeLineDraw.ts +++ b/src/chart/helper/LargeLineDraw.ts @@ -293,7 +293,8 @@ class LargeLineDraw { private _create() { const lineEl = new LargeLinesPath({ - cursor: 'default' + cursor: 'default', + ignoreTargetSize: true }); this._newAdded.push(lineEl); this.group.add(lineEl); diff --git a/src/chart/helper/LargeSymbolDraw.ts b/src/chart/helper/LargeSymbolDraw.ts index 22614b29f5..a103ff0bdf 100644 --- a/src/chart/helper/LargeSymbolDraw.ts +++ b/src/chart/helper/LargeSymbolDraw.ts @@ -315,6 +315,7 @@ class LargeSymbolDraw { const symbolEl = new LargeSymbolPath({ cursor: 'default' }); + symbolEl.ignoreTargetSize = true; this.group.add(symbolEl); this._newAdded.push(symbolEl); return symbolEl; From 02beb9a9ba2874ad2d07d8aff8b62790a399aa73 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 24 May 2022 15:25:34 +0800 Subject: [PATCH 2/9] feat: make target size an option --- src/core/echarts.ts | 6 +- test/aria-target-size.html | 140 +++++++++++++++++++++++++++++++++++++ test/lib/testHelper.js | 7 +- 3 files changed, 151 insertions(+), 2 deletions(-) create mode 100644 test/aria-target-size.html diff --git a/src/core/echarts.ts b/src/core/echarts.ts index 78ea7687b5..f70bbc7b50 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -324,6 +324,8 @@ type EChartsInitOpts = { renderer?: RendererType, devicePixelRatio?: number, useDirtyRect?: boolean, + useTargetSize?: boolean, + targetSize?: number, ssr?: boolean, width?: number, height?: number @@ -430,7 +432,9 @@ class ECharts extends Eventful { width: opts.width, height: opts.height, ssr: opts.ssr, - useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect + useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect, + useTargetSize: opts.useTargetSize, + targetSize: opts.targetSize }); this._ssr = opts.ssr; diff --git a/test/aria-target-size.html b/test/aria-target-size.html new file mode 100644 index 0000000000..2f536e7030 --- /dev/null +++ b/test/aria-target-size.html @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js index 93fb9bbb60..3efc2e8836 100644 --- a/test/lib/testHelper.js +++ b/test/lib/testHelper.js @@ -262,6 +262,8 @@ * @param {boolean|number} opt If number, means height * @param {boolean} opt.lazyUpdate * @param {boolean} opt.notMerge + * @param {boolean} opt.useTargetSize + * @param {boolean} opt.targetSize * @param {number} opt.width * @param {number} opt.height * @param {boolean} opt.draggable @@ -284,7 +286,10 @@ dom.style.height = opt.height + 'px'; } - var chart = echarts.init(dom); + var chart = echarts.init(dom, null, { + useTargetSize: opt.useTargetSize, + targetSize: opt.targetSize + }); if (opt.draggable) { if (!window.draggable) { From 4b2bd9c16312b4ec6b2b5d3b1505288ccb228f4f Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 24 May 2022 15:40:24 +0800 Subject: [PATCH 3/9] feat: rename test file --- test/{aria-target-size.html => target-size.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/{aria-target-size.html => target-size.html} (100%) diff --git a/test/aria-target-size.html b/test/target-size.html similarity index 100% rename from test/aria-target-size.html rename to test/target-size.html From c11463a85e165dd25cf64e6f0c7fcf1de0d1c277 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 26 May 2022 16:25:14 +0800 Subject: [PATCH 4/9] feat: rename variables --- src/chart/bar/BarView.ts | 2 +- src/chart/candlestick/CandlestickView.ts | 4 ++-- src/chart/helper/LargeLineDraw.ts | 2 +- src/chart/helper/LargeSymbolDraw.ts | 2 +- src/core/echarts.ts | 8 +++---- test/lib/testHelper.js | 8 +++---- test/{target-size.html => pointer-size.html} | 24 ++++++++++++-------- 7 files changed, 28 insertions(+), 22 deletions(-) rename test/{target-size.html => pointer-size.html} (82%) diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 9ca497b40f..70f053d8f7 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -1146,7 +1146,7 @@ function createLarge( const el = new LargePath({ shape: {points: data.getLayout('largePoints')}, incremental: !!incremental, - ignoreTargetSize: true, + ignoreCoarsePointer: true, z2: 1 }); el.baseDimIdx = baseDimIdx; diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts index 0990120de8..2b96f2cadc 100644 --- a/src/chart/candlestick/CandlestickView.ts +++ b/src/chart/candlestick/CandlestickView.ts @@ -359,13 +359,13 @@ function createLarge( const elP = new LargeBoxPath({ shape: {points: largePoints}, __sign: 1, - ignoreTargetSize: true + ignoreCoarsePointer: true }); group.add(elP); const elN = new LargeBoxPath({ shape: {points: largePoints}, __sign: -1, - ignoreTargetSize: true + ignoreCoarsePointer: true }); group.add(elN); diff --git a/src/chart/helper/LargeLineDraw.ts b/src/chart/helper/LargeLineDraw.ts index 82eb4c1526..88afd6b4c0 100644 --- a/src/chart/helper/LargeLineDraw.ts +++ b/src/chart/helper/LargeLineDraw.ts @@ -294,7 +294,7 @@ class LargeLineDraw { private _create() { const lineEl = new LargeLinesPath({ cursor: 'default', - ignoreTargetSize: true + ignoreCoarsePointer: true }); this._newAdded.push(lineEl); this.group.add(lineEl); diff --git a/src/chart/helper/LargeSymbolDraw.ts b/src/chart/helper/LargeSymbolDraw.ts index a103ff0bdf..2aafb9d13c 100644 --- a/src/chart/helper/LargeSymbolDraw.ts +++ b/src/chart/helper/LargeSymbolDraw.ts @@ -315,7 +315,7 @@ class LargeSymbolDraw { const symbolEl = new LargeSymbolPath({ cursor: 'default' }); - symbolEl.ignoreTargetSize = true; + symbolEl.ignoreCoarsePointer = true; this.group.add(symbolEl); this._newAdded.push(symbolEl); return symbolEl; diff --git a/src/core/echarts.ts b/src/core/echarts.ts index f70bbc7b50..4f64bf1fcf 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -324,8 +324,8 @@ type EChartsInitOpts = { renderer?: RendererType, devicePixelRatio?: number, useDirtyRect?: boolean, - useTargetSize?: boolean, - targetSize?: number, + useCoarsePointer?: boolean, + pointerSize?: number, ssr?: boolean, width?: number, height?: number @@ -433,8 +433,8 @@ class ECharts extends Eventful { height: opts.height, ssr: opts.ssr, useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect, - useTargetSize: opts.useTargetSize, - targetSize: opts.targetSize + useCoarsePointer: opts.useCoarsePointer, + pointerSize: opts.pointerSize }); this._ssr = opts.ssr; diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js index 3efc2e8836..6df2c44a6e 100644 --- a/test/lib/testHelper.js +++ b/test/lib/testHelper.js @@ -262,8 +262,8 @@ * @param {boolean|number} opt If number, means height * @param {boolean} opt.lazyUpdate * @param {boolean} opt.notMerge - * @param {boolean} opt.useTargetSize - * @param {boolean} opt.targetSize + * @param {boolean} opt.useCoarsePointer + * @param {boolean} opt.pointerSize * @param {number} opt.width * @param {number} opt.height * @param {boolean} opt.draggable @@ -287,8 +287,8 @@ } var chart = echarts.init(dom, null, { - useTargetSize: opt.useTargetSize, - targetSize: opt.targetSize + useCoarsePointer: opt.useCoarsePointer, + pointerSize: opt.pointerSize }); if (opt.draggable) { diff --git a/test/target-size.html b/test/pointer-size.html similarity index 82% rename from test/target-size.html rename to test/pointer-size.html index 2f536e7030..8e740dbcd1 100644 --- a/test/target-size.html +++ b/test/pointer-size.html @@ -56,7 +56,9 @@ yAxis: {}, series: { type: 'scatter', - data: [[11, 22], [33, 44]] + data: [[11, 22], [33, 44]], + symbol: 'pin', + symbolSize: 100 }, tooltip: { show: true @@ -65,7 +67,7 @@ var chart = testHelper.create(echarts, 'main0', { title: [ - 'By default, targe size feature is turned **off** for non-mobile devices.', + 'By default, pointer size feature is turned **off** for non-mobile devices.', 'So in this tese case, tooltip should **not show** if mouse position is near by but not on the data point.' ], option: option @@ -86,7 +88,9 @@ yAxis: {}, series: { type: 'scatter', - data: [[11, 22], [33, 44]] + data: [[11, 22], [33, 44]], + symbol: 'pin', + symbolSize: 100 }, tooltip: { show: true @@ -95,11 +99,11 @@ var chart = testHelper.create(echarts, 'main1', { title: [ - 'If targe size feature is turned **on** for non-mobile devices,', + 'If pointer size feature is turned **on** for non-mobile devices,', 'like in this tese case, tooltip should **show** if mouse position is near by but not on the data point.' ], option: option, - useTargetSize: true + useCoarsePointer: true }); }); @@ -117,7 +121,9 @@ yAxis: {}, series: { type: 'scatter', - data: [[11, 22], [33, 44]] + data: [[11, 22], [33, 44]], + symbol: 'pin', + symbolSize: 100 }, tooltip: { show: true @@ -126,11 +132,11 @@ var chart = testHelper.create(echarts, 'main2', { title: [ - 'In this case, the target size is set to be 200 so it should have a larger responsive area.' + 'In this case, the pointer size is set to be 200 so it should have a larger responsive area.' ], option: option, - useTargetSize: true, - targetSize: 200 + useCoarsePointer: true, + pointerSize: 200 }); }); From 343b13a498196dfb6c40face68293879bb072919 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 14 Jul 2022 11:47:32 +0800 Subject: [PATCH 5/9] test: add coarse-pointer in test env --- src/core/echarts.ts | 5 +- ...{pointer-size.html => coarse-pointer.html} | 26 ++- test/lib/caseFrame.js | 11 ++ test/lib/config.js | 3 + test/runTest/actions/__meta__.json | 1 + test/runTest/actions/coarse-pointer.json | 1 + test/runTest/cli.js | 7 +- test/runTest/client/client.css | 10 +- test/runTest/client/client.js | 6 + test/runTest/client/index.html | 153 ++++++++++-------- test/runTest/server.js | 4 + test/runTest/store.js | 6 +- 12 files changed, 147 insertions(+), 86 deletions(-) rename test/{pointer-size.html => coarse-pointer.html} (84%) create mode 100644 test/runTest/actions/coarse-pointer.json diff --git a/src/core/echarts.ts b/src/core/echarts.ts index 4f64bf1fcf..6d7c398579 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -411,6 +411,7 @@ class ECharts extends Eventful { this._dom = dom; let defaultRenderer = 'canvas'; + let defaultCoarsePointer: 'auto' | boolean = 'auto'; let defaultUseDirtyRect = false; if (__DEV__) { const root = ( @@ -420,6 +421,8 @@ class ECharts extends Eventful { defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer; + defaultCoarsePointer = root.__ECHARTS__DEFAULT__COARSE_POINTER || defaultCoarsePointer; + const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__; defaultUseDirtyRect = devUseDirtyRect == null ? defaultUseDirtyRect @@ -433,7 +436,7 @@ class ECharts extends Eventful { height: opts.height, ssr: opts.ssr, useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect, - useCoarsePointer: opts.useCoarsePointer, + useCoarsePointer: opts.useCoarsePointer == null ? defaultCoarsePointer : opts.useCoarsePointer, pointerSize: opts.pointerSize }); this._ssr = opts.ssr; diff --git a/test/pointer-size.html b/test/coarse-pointer.html similarity index 84% rename from test/pointer-size.html rename to test/coarse-pointer.html index 8e740dbcd1..959d8babfd 100644 --- a/test/pointer-size.html +++ b/test/coarse-pointer.html @@ -35,7 +35,7 @@ - +

__ECHARTS__DEFAULT__COARSE_POINTER:

@@ -49,6 +49,9 @@ // 'map/js/china', // './data/nutrients.json' ], function (echarts) { + var debug = document.getElementById('debug'); + debug.innerText = window.__ECHARTS__DEFAULT__COARSE_POINTER; + var option; option = { @@ -58,7 +61,12 @@ type: 'scatter', data: [[11, 22], [33, 44]], symbol: 'pin', - symbolSize: 100 + symbolSize: 100, + emphasis: { + itemStyle: { + color: 'red' + } + } }, tooltip: { show: true @@ -90,7 +98,12 @@ type: 'scatter', data: [[11, 22], [33, 44]], symbol: 'pin', - symbolSize: 100 + symbolSize: 100, + emphasis: { + itemStyle: { + color: 'red' + } + } }, tooltip: { show: true @@ -123,7 +136,12 @@ type: 'scatter', data: [[11, 22], [33, 44]], symbol: 'pin', - symbolSize: 100 + symbolSize: 100, + emphasis: { + itemStyle: { + color: 'red' + } + } }, tooltip: { show: true diff --git a/test/lib/caseFrame.js b/test/lib/caseFrame.js index fb2a1703da..bd3e193377 100644 --- a/test/lib/caseFrame.js +++ b/test/lib/caseFrame.js @@ -207,6 +207,17 @@ var matchResult = (pageURL || '').match(/[?&]__RENDERER__=(canvas|svg)(&|$)/); return matchResult && matchResult[1] || 'canvas'; }, + // true, false, 'auto' + useCoarsePointer: function (pageURL) { + var matchResult = (pageURL || '').match(/[?&]__USE_COARSE_POINTER__=(true|false|auto)(&|$)/); + return matchResult && matchResult[1] + ? matchResult[1] === 'true' + ? true + : matchResult[1] === 'false' + ? false + : 'auto' + : 'auto'; + }, // true, false useDirtyRect: function (pageURL) { var matchResult = (pageURL || '').match(/[?&]__USE_DIRTY_RECT__=(true|false)(&|$)/); diff --git a/test/lib/config.js b/test/lib/config.js index 1c99b359ac..63ffbd49c8 100644 --- a/test/lib/config.js +++ b/test/lib/config.js @@ -30,6 +30,9 @@ if (params.__RENDERER__) { window.__ECHARTS__DEFAULT__RENDERER__ = params.__RENDERER__; } + if (params.__COARSE__POINTER__) { + window.__ECHARTS__DEFAULT__COARSE_POINTER = params.__COARSE__POINTER__; + } if (params.__USE_DIRTY_RECT__) { window.__ECHARTS__DEFAULT__USE_DIRTY_RECT__ = params.__USE_DIRTY_RECT__ === 'true'; } diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index d8eec78bac..a70f48fc49 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -50,6 +50,7 @@ "candlestick-large2": 1, "candlestickConnect": 4, "clip": 12, + "coarse-pointer": 3, "color-mix-aqi": 2, "connect": 1, "connect-dynamic": 2, diff --git a/test/runTest/actions/coarse-pointer.json b/test/runTest/actions/coarse-pointer.json new file mode 100644 index 0000000000..4b7d7ed09b --- /dev/null +++ b/test/runTest/actions/coarse-pointer.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":427,"x":507,"y":250},{"type":"mousemove","time":627,"x":469,"y":258},{"type":"mousemove","time":830,"x":403,"y":272},{"type":"mousemove","time":1042,"x":365,"y":279},{"type":"mousemove","time":1242,"x":345,"y":306},{"type":"mousemove","time":1446,"x":338,"y":330},{"type":"mousemove","time":1626,"x":337,"y":330},{"type":"mousemove","time":1827,"x":304,"y":339},{"type":"mousemove","time":2027,"x":303,"y":338},{"type":"mousemove","time":2231,"x":298,"y":331},{"type":"mousemove","time":2447,"x":298,"y":330},{"type":"mousedown","time":2686,"x":298,"y":330},{"type":"mouseup","time":2831,"x":298,"y":330},{"time":2832,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4028,"x":298,"y":333},{"type":"mousemove","time":4230,"x":330,"y":386},{"type":"mousemove","time":4446,"x":339,"y":395},{"type":"mousemove","time":4692,"x":339,"y":395},{"type":"mousemove","time":4892,"x":344,"y":402}],"scrollY":0,"scrollX":0,"timestamp":1657770168133},{"name":"Action 2","ops":[{"type":"mousemove","time":777,"x":394,"y":369},{"type":"mousemove","time":977,"x":351,"y":337},{"type":"mousemove","time":1178,"x":322,"y":311},{"type":"mousemove","time":1378,"x":312,"y":297},{"type":"mousemove","time":1578,"x":305,"y":292},{"type":"mousemove","time":1779,"x":304,"y":291},{"type":"mousedown","time":2165,"x":304,"y":291},{"type":"mouseup","time":2308,"x":304,"y":291},{"time":2309,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3131,"x":304,"y":292},{"type":"mousemove","time":3333,"x":335,"y":337},{"type":"mousemove","time":3545,"x":354,"y":365},{"type":"mousemove","time":3749,"x":357,"y":369}],"scrollY":512,"scrollX":0,"timestamp":1657770178748},{"name":"Action 3","ops":[{"type":"mousemove","time":351,"x":589,"y":312},{"type":"mousemove","time":551,"x":481,"y":373},{"type":"mousemove","time":755,"x":446,"y":397},{"type":"mousemove","time":967,"x":417,"y":416},{"type":"mousemove","time":1168,"x":410,"y":420},{"type":"mousemove","time":1401,"x":409,"y":420},{"type":"mousemove","time":1408,"x":408,"y":420},{"type":"mousemove","time":1608,"x":375,"y":433},{"type":"mousemove","time":1818,"x":353,"y":433},{"type":"mousemove","time":2018,"x":352,"y":433},{"type":"mousemove","time":2618,"x":352,"y":433},{"type":"mousemove","time":2823,"x":406,"y":439},{"type":"mousemove","time":3035,"x":467,"y":431},{"type":"mousemove","time":3237,"x":467,"y":431}],"scrollY":870.5,"scrollX":0,"timestamp":1657770187725}] \ No newline at end of file diff --git a/test/runTest/cli.js b/test/runTest/cli.js index 582fa9928f..7b7755fda0 100644 --- a/test/runTest/cli.js +++ b/test/runTest/cli.js @@ -41,6 +41,7 @@ program .option('--expected ', 'Expected version') .option('--actual ', 'Actual version') .option('--renderer ', 'svg/canvas renderer') + .option('--use-coarse-pointer ', '"auto" (by default) or "true" or "false"') .option('--threads ', 'How many threads to run concurrently') .option('--no-save', 'Don\'t save result') .option('--dir ', 'Out dir'); @@ -51,6 +52,7 @@ program.speed = +program.speed || 1; program.actual = program.actual || 'local'; program.threads = +program.threads || 1; program.renderer = (program.renderer || 'canvas').toLowerCase(); +program.useCoarsePointer = (program.useCoarsePointer || 'auto').toLowerCase(); program.dir = program.dir || (__dirname + '/tmp'); if (!program.tests) { @@ -265,7 +267,7 @@ async function runTestPage(browser, testOpt, version, runtimeCode, isExpected) { width: 800, height: 600 }); - await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}`, { + await page.goto(`${origin}/test/${fileUrl}?__RENDERER__=${program.renderer}&__COARSE__POINTER__=${program.useCoarsePointer}`, { waitUntil: 'networkidle2', timeout: 10000 }); @@ -384,6 +386,7 @@ async function runTest(browser, testOpt, runtimeCode, expectedVersion, actualVer testOpt.actualVersion = actualVersion; testOpt.expectedVersion = expectedVersion; testOpt.useSVG = program.renderer === 'svg'; + testOpt.useCoarsePointer = program.useCoarsePointer; testOpt.lastRun = Date.now(); } else { @@ -407,7 +410,7 @@ async function runTests(pendingTests) { }); async function eachTask(testOpt) { - console.log(`Running test: ${testOpt.name}, renderer: ${program.renderer}`); + console.log(`Running test: ${testOpt.name}, renderer: ${program.renderer}, useCoarsePointer: ${program.useCoarsePointer}`); try { await runTest(browser, testOpt, runtimeCode, program.expected, program.actual); } diff --git a/test/runTest/client/client.css b/test/runTest/client/client.css index dcb6956374..1cce88083b 100644 --- a/test/runTest/client/client.css +++ b/test/runTest/client/client.css @@ -71,7 +71,6 @@ } .nav-toolbar, .test-run-controls { - padding: 10px 10px; background: #fff; position: fixed; width: 330px; @@ -84,17 +83,14 @@ z-index: 1; position: sticky; width: 100%; - padding: 5px 40px; top: 0px; - background: #896bda; box-shadow: 0 0 20px rgb(0 0 0 / 20%); border-bottom: none; } -.test-run-controls>* { - display: inline-block; - vertical-align: middle; +.test-run-row { + padding: 5px 20px; } .nav-toolbar .el-button { @@ -106,6 +102,8 @@ margin: 0 5px; color: #fff; font-size: 12px; + display: inline-block; + vertical-align: middle; } .run-config-item>* { display: inline-block; diff --git a/test/runTest/client/client.js b/test/runTest/client/client.js index f110fbd3f1..0c34e0ff0e 100644 --- a/test/runTest/client/client.js +++ b/test/runTest/client/client.js @@ -137,6 +137,7 @@ const app = new Vue({ expectedVersion: null, renderer: 'canvas', + useCoarsePointer: 'auto', threads: 4 }, urlRunConfig) }, @@ -344,6 +345,9 @@ const app = new Vue({ if (test.useSVG) { searches.push('__RENDERER__=svg'); } + if (test.useCoarsePointer) { + searches.push('__COARSE__POINTER__=true'); + } let src = test.fileUrl; if (searches.length) { src = src + '?' + searches.join('&'); @@ -366,6 +370,7 @@ const app = new Vue({ this.runConfig.isExpectedNightly = runResult.expectedVersion.includes('-dev.'); this.runConfig.isActualNightly = runResult.actualVersion.includes('-dev.'); this.runConfig.renderer = runResult.renderer; + this.runConfig.useCoarsePointer = runResult.useCoarsePointer; this.showRunsDialog = false; }, @@ -418,6 +423,7 @@ function runTests(tests, noHeadless) { actualVersion: app.runConfig.actualVersion, threads: app.runConfig.threads, renderer: app.runConfig.renderer, + useCoarsePointer: app.runConfig.useCoarsePointer, noHeadless, replaySpeed: noHeadless ? 5 : 5 }); diff --git a/test/runTest/client/index.html b/test/runTest/client/index.html index 5e876c3f63..d2a190baa0 100644 --- a/test/runTest/client/index.html +++ b/test/runTest/client/index.html @@ -101,83 +101,94 @@

Visual Regression Testing Tool

-
- -
- - ALL RUNS -
- -
- -
- - RUN ({{selectedTests.length}}) - - Run unfinished ({{unfinishedTests.length}}) - Run failed ({{failedTests.length}}) - Run all ({{fullTests.length}}) - - +
+
+ +
+ + LIST OF RUNNING RESULTS +
+ +
- - Stop - - +
+ + RUN ({{selectedTests.length}}) + + Run unfinished ({{unfinishedTests.length}}) + Run failed ({{failedTests.length}}) + Run all ({{fullTests.length}}) + + - - - -
+ + Stop + + -
- - Expected - - - - - - - - - - Actual - - + + - - - - -
-
- Renderer - - - - +
-
- Threads +
+
+ + Expected + + + + + + + + + + Actual + + + + + + + +
+
+ Renderer + + + + +
+
+ Coarse Pointer + + + + + +
+
+ Threads - - - - + + + + +
diff --git a/test/runTest/server.js b/test/runTest/server.js index f74b001956..7cf41945b1 100644 --- a/test/runTest/server.js +++ b/test/runTest/server.js @@ -131,6 +131,7 @@ function startTests(testsNameList, socket, { actualVersion, expectedVersion, renderer, + useCoarsePointer, noSave }) { console.log('Received: ', testsNameList.join(',')); @@ -190,6 +191,7 @@ function startTests(testsNameList, socket, { '--actual', actualVersion, '--expected', expectedVersion, '--renderer', renderer || '', + '--use-coarse-pointer', useCoarsePointer || 'auto', '--threads', Math.min(threadsCount, CLI_FIXED_THREADS_COUNT), '--dir', getResultBaseDir(), ...(noHeadless ? ['--no-headless'] : []), @@ -339,6 +341,7 @@ async function start() { actualVersion: data.actualVersion, expectedVersion: data.expectedVersion, renderer: data.renderer, + useCoarsePointer: data.useCoarsePointer, noSave: false } ); @@ -399,6 +402,7 @@ async function start() { actualVersion: data.actualVersion, expectedVersion: data.expectedVersion, renderer: data.renderer || '', + useCoarsePointer: data.useCoarsePointer || 'auto', noSave: true }); } diff --git a/test/runTest/store.js b/test/runTest/store.js index 5eb3e1dd10..31e0537c84 100644 --- a/test/runTest/store.js +++ b/test/runTest/store.js @@ -80,7 +80,8 @@ function getRunHash(params) { return [ params.expectedVersion, params.actualVersion, - params.renderer + params.renderer, + params.useCoarsePointer ].join(TEST_HASH_SPLITTER); } @@ -92,7 +93,8 @@ function parseRunHash(str) { return { expectedVersion: parts[0], actualVersion: parts[1], - renderer: parts[2] + renderer: parts[2], + useCoarsePointer: parts[3] }; } From c1c9faf2691ff94231e8019f375ac8c210b2b5e8 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 8 Aug 2022 18:40:22 +0800 Subject: [PATCH 6/9] fix(coarse-pointer): use retrieve --- src/core/echarts.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/core/echarts.ts b/src/core/echarts.ts index 6d7c398579..054402bd83 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -34,7 +34,8 @@ import { isDom, isArray, noop, - isString + isString, + retrieve2 } from 'zrender/src/core/util'; import env from 'zrender/src/core/env'; import timsort from 'zrender/src/core/timsort'; @@ -435,8 +436,8 @@ class ECharts extends Eventful { width: opts.width, height: opts.height, ssr: opts.ssr, - useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect, - useCoarsePointer: opts.useCoarsePointer == null ? defaultCoarsePointer : opts.useCoarsePointer, + useDirtyRect: retrieve2(opts.useDirtyRect, defaultUseDirtyRect), + useCoarsePointer: retrieve2(opts.useCoarsePointer, defaultCoarsePointer), pointerSize: opts.pointerSize }); this._ssr = opts.ssr; From acb54f829f10b3bc81de69c8bc17cef21080af86 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Sun, 21 Aug 2022 16:16:32 +0800 Subject: [PATCH 7/9] feat(coarse-pointer): fix test --- package-lock.json | 15 ++--- package.json | 2 +- src/core/echarts.ts | 2 +- test/lib/config.js | 16 ++++- test/line-visual-polar.html | 122 ++++++++++++++++++++++++++++++++++++ test/runTest/server.js | 4 +- test/runTest/store.js | 3 +- 7 files changed, 151 insertions(+), 13 deletions(-) create mode 100644 test/line-visual-polar.html diff --git a/package-lock.json b/package-lock.json index f9606563db..114b6238f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "tslib": "2.3.0", - "zrender": "5.3.1" + "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820" }, "devDependencies": { "@babel/code-frame": "7.10.4", @@ -13362,9 +13362,10 @@ } }, "node_modules/zrender": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz", - "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==", + "name": "zrender-nightly", + "version": "5.3.3-dev.20220820", + "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220820.tgz", + "integrity": "sha512-/4hBgw+X1EAZ+wE/4VYfOJEkOD+FWJ+GUEMYVNUoo8FWpU97avPhcTVMupP2w6qjuDY8178ivDs8PMBL7igdxQ==", "dependencies": { "tslib": "2.3.0" } @@ -24241,9 +24242,9 @@ } }, "zrender": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.1.tgz", - "integrity": "sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==", + "version": "npm:zrender-nightly@5.3.3-dev.20220820", + "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220820.tgz", + "integrity": "sha512-/4hBgw+X1EAZ+wE/4VYfOJEkOD+FWJ+GUEMYVNUoo8FWpU97avPhcTVMupP2w6qjuDY8178ivDs8PMBL7igdxQ==", "requires": { "tslib": "2.3.0" } diff --git a/package.json b/package.json index edd7c9b592..36189befa2 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ }, "dependencies": { "tslib": "2.3.0", - "zrender": "5.3.1" + "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820" }, "devDependencies": { "@babel/code-frame": "7.10.4", diff --git a/src/core/echarts.ts b/src/core/echarts.ts index 054402bd83..28e789b100 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -422,7 +422,7 @@ class ECharts extends Eventful { defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer; - defaultCoarsePointer = root.__ECHARTS__DEFAULT__COARSE_POINTER || defaultCoarsePointer; + defaultCoarsePointer = retrieve2(root.__ECHARTS__DEFAULT__COARSE_POINTER, defaultCoarsePointer); const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__; defaultUseDirtyRect = devUseDirtyRect == null diff --git a/test/lib/config.js b/test/lib/config.js index 63ffbd49c8..1096eec50c 100644 --- a/test/lib/config.js +++ b/test/lib/config.js @@ -31,7 +31,21 @@ window.__ECHARTS__DEFAULT__RENDERER__ = params.__RENDERER__; } if (params.__COARSE__POINTER__) { - window.__ECHARTS__DEFAULT__COARSE_POINTER = params.__COARSE__POINTER__; + switch (params.__COARSE__POINTER__) { + case true: + case 'true': + window.__ECHARTS__COARSE__POINTER__ = true; + break; + + case false: + case 'false': + window.__ECHARTS__COARSE__POINTER__ = false; + break; + + default: + window.__ECHARTS__COARSE__POINTER__ = 'auto'; + break; + } } if (params.__USE_DIRTY_RECT__) { window.__ECHARTS__DEFAULT__USE_DIRTY_RECT__ = params.__USE_DIRTY_RECT__ === 'true'; diff --git a/test/line-visual-polar.html b/test/line-visual-polar.html new file mode 100644 index 0000000000..736f669887 --- /dev/null +++ b/test/line-visual-polar.html @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + diff --git a/test/runTest/server.js b/test/runTest/server.js index 7cf41945b1..f7b598f6fc 100644 --- a/test/runTest/server.js +++ b/test/runTest/server.js @@ -191,7 +191,7 @@ function startTests(testsNameList, socket, { '--actual', actualVersion, '--expected', expectedVersion, '--renderer', renderer || '', - '--use-coarse-pointer', useCoarsePointer || 'auto', + '--use-coarse-pointer', useCoarsePointer, '--threads', Math.min(threadsCount, CLI_FIXED_THREADS_COUNT), '--dir', getResultBaseDir(), ...(noHeadless ? ['--no-headless'] : []), @@ -402,7 +402,7 @@ async function start() { actualVersion: data.actualVersion, expectedVersion: data.expectedVersion, renderer: data.renderer || '', - useCoarsePointer: data.useCoarsePointer || 'auto', + useCoarsePointer: data.useCoarsePointer, noSave: true }); } diff --git a/test/runTest/store.js b/test/runTest/store.js index 31e0537c84..3430bd47e8 100644 --- a/test/runTest/store.js +++ b/test/runTest/store.js @@ -113,7 +113,8 @@ module.exports.checkStoreVersion = function (runParams) { console.log('Store ', _runHash); return storeParams.expectedVersion === runParams.expectedVersion && storeParams.actualVersion === runParams.actualVersion - && storeParams.renderer === runParams.renderer; + && storeParams.renderer === runParams.renderer + && storeParams.useCoarsePointer === runParams.useCoarsePointer; } function getResultFilePath() { From 5c3025d4a36296424d81a875208521b2efa58c65 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 22 Aug 2022 10:12:56 +0800 Subject: [PATCH 8/9] feat(coarse-pointer): fix test --- test/lib/config.js | 2 - test/line-visual-polar.html | 122 ------------------------------------ 2 files changed, 124 deletions(-) delete mode 100644 test/line-visual-polar.html diff --git a/test/lib/config.js b/test/lib/config.js index 1096eec50c..bc36037e79 100644 --- a/test/lib/config.js +++ b/test/lib/config.js @@ -32,12 +32,10 @@ } if (params.__COARSE__POINTER__) { switch (params.__COARSE__POINTER__) { - case true: case 'true': window.__ECHARTS__COARSE__POINTER__ = true; break; - case false: case 'false': window.__ECHARTS__COARSE__POINTER__ = false; break; diff --git a/test/line-visual-polar.html b/test/line-visual-polar.html deleted file mode 100644 index 736f669887..0000000000 --- a/test/line-visual-polar.html +++ /dev/null @@ -1,122 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - From d0b204597000a4b6140cfca8632d46c75cc50f34 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Mon, 22 Aug 2022 12:05:02 +0800 Subject: [PATCH 9/9] fix: merge conflict --- package-lock.json | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index de5f84f78b..84ba47d8ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13363,15 +13363,9 @@ }, "node_modules/zrender": { "name": "zrender-nightly", -<<<<<<< HEAD "version": "5.3.3-dev.20220820", "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220820.tgz", "integrity": "sha512-/4hBgw+X1EAZ+wE/4VYfOJEkOD+FWJ+GUEMYVNUoo8FWpU97avPhcTVMupP2w6qjuDY8178ivDs8PMBL7igdxQ==", -======= - "version": "5.3.3-dev.20220720", - "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220720.tgz", - "integrity": "sha512-rh3tfK2ARgee39pYh1xEaT8ZyT+70kHQKFranukjmKOMQi8/5nM4sBuuYPCwFcoIpvSMM/iiYikZmM9VEMwMKQ==", ->>>>>>> next "dependencies": { "tslib": "2.3.0" } @@ -24248,15 +24242,9 @@ } }, "zrender": { -<<<<<<< HEAD "version": "npm:zrender-nightly@5.3.3-dev.20220820", "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220820.tgz", "integrity": "sha512-/4hBgw+X1EAZ+wE/4VYfOJEkOD+FWJ+GUEMYVNUoo8FWpU97avPhcTVMupP2w6qjuDY8178ivDs8PMBL7igdxQ==", -======= - "version": "npm:zrender-nightly@5.3.3-dev.20220720", - "resolved": "https://registry.npmjs.org/zrender-nightly/-/zrender-nightly-5.3.3-dev.20220720.tgz", - "integrity": "sha512-rh3tfK2ARgee39pYh1xEaT8ZyT+70kHQKFranukjmKOMQi8/5nM4sBuuYPCwFcoIpvSMM/iiYikZmM9VEMwMKQ==", ->>>>>>> next "requires": { "tslib": "2.3.0" }