diff --git a/package-lock.json b/package-lock.json index b9f0bcea6a..84ba47d8ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "Apache-2.0", "dependencies": { "tslib": "2.3.0", - "zrender": "npm:zrender-nightly@^5.3.3-dev.20220720" + "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820" }, "devDependencies": { "@babel/code-frame": "7.10.4", @@ -13363,9 +13363,9 @@ }, "node_modules/zrender": { "name": "zrender-nightly", - "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==", + "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" } @@ -24242,9 +24242,9 @@ } }, "zrender": { - "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==", + "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 1e1c3544eb..320b0f6925 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ }, "dependencies": { "tslib": "2.3.0", - "zrender": "npm:zrender-nightly@^5.3.3-dev.20220720" + "zrender": "npm:zrender-nightly@^5.3.3-dev.20220820" }, "devDependencies": { "@babel/code-frame": "7.10.4", diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index a5c99d0bd3..3cbad98de3 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, + ignoreCoarsePointer: true, z2: 1 }); el.baseDimIdx = baseDimIdx; diff --git a/src/chart/candlestick/CandlestickView.ts b/src/chart/candlestick/CandlestickView.ts index 3fa95f39d8..ed4f6660c6 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, + ignoreCoarsePointer: true }); group.add(elP); const elN = new LargeBoxPath({ shape: {points: largePoints}, - __sign: -1 + __sign: -1, + ignoreCoarsePointer: 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..88afd6b4c0 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', + 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 22614b29f5..2aafb9d13c 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.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 500dbe9ddd..538c819707 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'; @@ -324,6 +325,8 @@ type EChartsInitOpts = { renderer?: RendererType, devicePixelRatio?: number, useDirtyRect?: boolean, + useCoarsePointer?: boolean, + pointerSize?: number, ssr?: boolean, width?: number, height?: number @@ -409,6 +412,7 @@ class ECharts extends Eventful { this._dom = dom; let defaultRenderer = 'canvas'; + let defaultCoarsePointer: 'auto' | boolean = 'auto'; let defaultUseDirtyRect = false; if (__DEV__) { const root = ( @@ -418,6 +422,8 @@ class ECharts extends Eventful { defaultRenderer = root.__ECHARTS__DEFAULT__RENDERER__ || defaultRenderer; + defaultCoarsePointer = retrieve2(root.__ECHARTS__DEFAULT__COARSE_POINTER, defaultCoarsePointer); + const devUseDirtyRect = root.__ECHARTS__DEFAULT__USE_DIRTY_RECT__; defaultUseDirtyRect = devUseDirtyRect == null ? defaultUseDirtyRect @@ -430,7 +436,9 @@ class ECharts extends Eventful { width: opts.width, height: opts.height, ssr: opts.ssr, - useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect + useDirtyRect: retrieve2(opts.useDirtyRect, defaultUseDirtyRect), + useCoarsePointer: retrieve2(opts.useCoarsePointer, defaultCoarsePointer), + pointerSize: opts.pointerSize }); this._ssr = opts.ssr; diff --git a/test/coarse-pointer.html b/test/coarse-pointer.html new file mode 100644 index 0000000000..959d8babfd --- /dev/null +++ b/test/coarse-pointer.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + +

__ECHARTS__DEFAULT__COARSE_POINTER:

+ +
+
+
+ + + + + + + + + + + + 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..bc36037e79 100644 --- a/test/lib/config.js +++ b/test/lib/config.js @@ -30,6 +30,21 @@ if (params.__RENDERER__) { window.__ECHARTS__DEFAULT__RENDERER__ = params.__RENDERER__; } + if (params.__COARSE__POINTER__) { + switch (params.__COARSE__POINTER__) { + case 'true': + window.__ECHARTS__COARSE__POINTER__ = true; + break; + + 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/lib/testHelper.js b/test/lib/testHelper.js index 93fb9bbb60..6df2c44a6e 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.useCoarsePointer + * @param {boolean} opt.pointerSize * @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, { + useCoarsePointer: opt.useCoarsePointer, + pointerSize: opt.pointerSize + }); if (opt.draggable) { if (!window.draggable) { diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index ae9e2a6992..bbcf1a406e 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 9d52c1ae12..e8978f8e43 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..f7b598f6fc 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, '--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, noSave: true }); } diff --git a/test/runTest/store.js b/test/runTest/store.js index 5eb3e1dd10..3430bd47e8 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] }; } @@ -111,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() {