From 6edfa8744fc3e9808a64bc9fb06609fc97255df2 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 28 Dec 2021 20:40:08 +0800 Subject: [PATCH 1/6] feat(pie): the sector supports arbitrary corner radius. --- src/chart/helper/pieHelper.ts | 14 +++----------- src/chart/pie/PieView.ts | 10 +++++----- src/chart/sunburst/SunburstPiece.ts | 4 ++-- test/pie-cornerRadius.html | 19 +++++++++++++++++++ 4 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts index 0e579c8d84..efbbd08b5d 100644 --- a/src/chart/helper/pieHelper.ts +++ b/src/chart/helper/pieHelper.ts @@ -18,24 +18,16 @@ */ import Model from '../../model/Model'; -import Sector from 'zrender/src/graphic/shape/Sector'; -import { isArray } from 'zrender/src/core/util'; -import { parsePercent } from 'zrender/src/contain/text'; export function getSectorCornerRadius( model: Model<{ borderRadius?: string | number | (string | number)[] }>, - shape: Pick, zeroIfNull?: boolean ) { - let cornerRadius = model.get('borderRadius'); + const cornerRadius = model.get('borderRadius'); if (cornerRadius == null) { - return zeroIfNull ? {innerCornerRadius: 0, cornerRadius: 0} : null; - } - if (!isArray(cornerRadius)) { - cornerRadius = [cornerRadius, cornerRadius]; + return zeroIfNull ? { cornerRadius: 0 } : null; } return { - innerCornerRadius: parsePercent(cornerRadius[0], shape.r0), - cornerRadius: parsePercent(cornerRadius[1], shape.r) + cornerRadius: cornerRadius as number | number[] }; } diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index 2b17747804..d9c3d059ee 100644 --- a/src/chart/pie/PieView.ts +++ b/src/chart/pie/PieView.ts @@ -32,7 +32,7 @@ import labelLayout from './labelLayout'; import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; import { getSectorCornerRadius } from '../helper/pieHelper'; -import {saveOldStyle} from '../../animation/basicTrasition'; +import { saveOldStyle } from '../../animation/basicTrasition'; import { getBasicPieLayout } from './pieLayout'; /** @@ -62,7 +62,7 @@ class PiePiece extends graphic.Sector { // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified. // see `setItemLayout` in `pieLayout.ts`. const sectorShape = extend( - getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true), + getSectorCornerRadius(itemModel.getModel('itemStyle'), true), layout ); @@ -141,15 +141,15 @@ class PiePiece extends graphic.Sector { sector.ensureState('emphasis').shape = { r: layout.r + (emphasisModel.get('scale') ? (emphasisModel.get('scaleSize') || 0) : 0), - ...getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout) + ...getSectorCornerRadius(emphasisModel.getModel('itemStyle')) }; extend(sector.ensureState('select'), { x: dx, y: dy, - shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']), layout) + shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle'])) }); extend(sector.ensureState('blur'), { - shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']), layout) + shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle'])) }); const labelLine = sector.getTextGuideLine(); diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index b5cfd99684..9ad140c386 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/src/chart/sunburst/SunburstPiece.ts @@ -99,7 +99,7 @@ class SunburstPiece extends graphic.Sector { normalStyle.decal = createOrUpdatePatternFromDecal(decal, api); } - const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), sectorShape, true); + const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), true); zrUtil.extend(sectorShape, cornerRadius); zrUtil.each(SPECIAL_STATES, function (stateName) { @@ -107,7 +107,7 @@ class SunburstPiece extends graphic.Sector { const itemStyleModel = itemModel.getModel([stateName, 'itemStyle']); state.style = itemStyleModel.getItemStyle(); // border radius - const cornerRadius = getSectorCornerRadius(itemStyleModel, sectorShape); + const cornerRadius = getSectorCornerRadius(itemStyleModel); if (cornerRadius) { state.shape = cornerRadius; } diff --git a/test/pie-cornerRadius.html b/test/pie-cornerRadius.html index c133c2b119..c57209594a 100644 --- a/test/pie-cornerRadius.html +++ b/test/pie-cornerRadius.html @@ -320,6 +320,25 @@ }); } }, + { + text: 'set radius for all corners', + onclick: function () { + isCircular = true; + var val = [5, 15, 0, 20]; + chart.setOption({ + title: { + text: 'cornerRadius [' + val + ']' + }, + series: [{ + radius: ['40%', '75%'], + itemStyle: { borderRadius: val }, + emphasis: { + itemStyle: { borderRadius: [20, 5, 10, 30] } + } + }] + }); + } + }, { text: 'reset', onclick: function () { From 76a23a4bccbf68487e52aa3ad9915d173fcf8855 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 4 Jan 2022 22:35:55 +0800 Subject: [PATCH 2/6] fix: remove unnecessary typescript as. --- src/chart/helper/pieHelper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts index efbbd08b5d..eaa0c89b33 100644 --- a/src/chart/helper/pieHelper.ts +++ b/src/chart/helper/pieHelper.ts @@ -28,6 +28,6 @@ export function getSectorCornerRadius( return zeroIfNull ? { cornerRadius: 0 } : null; } return { - cornerRadius: cornerRadius as number | number[] + cornerRadius }; } From 6e533d8da842f4e857d8ba832bec10c47004931a Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 4 Jan 2022 22:54:06 +0800 Subject: [PATCH 3/6] test(pie): add actions for pie corner radius. --- test/runTest/actions/__meta__.json | 1 + test/runTest/actions/pie-cornerRadius.json | 1 + 2 files changed, 2 insertions(+) create mode 100644 test/runTest/actions/pie-cornerRadius.json diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 047c3de96c..56012cb5d5 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -141,6 +141,7 @@ "pie-alignTo": 4, "pie-animation": 2, "pie-calculable": 1, + "pie-cornerRadius": 1, "pie-label-extreme": 2, "polar-rounded": 3, "polarLine": 1, diff --git a/test/runTest/actions/pie-cornerRadius.json b/test/runTest/actions/pie-cornerRadius.json new file mode 100644 index 0000000000..2ef3411a65 --- /dev/null +++ b/test/runTest/actions/pie-cornerRadius.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":336,"x":641,"y":336},{"type":"mousemove","time":539,"x":633,"y":335},{"type":"mousemove","time":618,"x":632,"y":332},{"type":"mousemove","time":818,"x":632,"y":271},{"type":"mousemove","time":1018,"x":308,"y":160},{"type":"mousemove","time":1219,"x":161,"y":131},{"type":"mousemove","time":1423,"x":116,"y":94},{"type":"mousedown","time":1643,"x":116,"y":94},{"type":"mouseup","time":1781,"x":116,"y":94},{"time":1782,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1885,"x":118,"y":94},{"type":"mousemove","time":2091,"x":232,"y":104},{"type":"mousemove","time":2301,"x":254,"y":99},{"type":"mousedown","time":2448,"x":258,"y":98},{"type":"mousemove","time":2501,"x":260,"y":98},{"type":"mouseup","time":2581,"x":261,"y":98},{"time":2582,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2701,"x":261,"y":98},{"type":"mousemove","time":2801,"x":263,"y":98},{"type":"mousemove","time":3008,"x":314,"y":98},{"type":"mousemove","time":3235,"x":375,"y":102},{"type":"mousemove","time":3439,"x":421,"y":99},{"type":"mousedown","time":3541,"x":421,"y":99},{"type":"mouseup","time":3680,"x":422,"y":99},{"time":3681,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3692,"x":423,"y":99},{"type":"mousemove","time":3934,"x":426,"y":100},{"type":"mousemove","time":4134,"x":616,"y":102},{"type":"mousedown","time":4256,"x":668,"y":100},{"type":"mousemove","time":4340,"x":668,"y":100},{"type":"mouseup","time":4395,"x":668,"y":100},{"time":4396,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4551,"x":633,"y":104},{"type":"mousemove","time":4751,"x":413,"y":114},{"type":"mousemove","time":4952,"x":181,"y":133},{"type":"mousemove","time":5156,"x":81,"y":135},{"type":"mousedown","time":5179,"x":79,"y":135},{"type":"mouseup","time":5291,"x":79,"y":135},{"time":5292,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5375,"x":79,"y":135},{"type":"mousemove","time":5537,"x":81,"y":135},{"type":"mousemove","time":5743,"x":161,"y":135},{"type":"mousedown","time":5827,"x":162,"y":135},{"type":"mouseup","time":5943,"x":163,"y":135},{"time":5944,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5955,"x":163,"y":135},{"type":"mousemove","time":6287,"x":169,"y":136},{"type":"mousemove","time":6491,"x":330,"y":144},{"type":"mousemove","time":6651,"x":318,"y":143},{"type":"mousedown","time":6774,"x":286,"y":142},{"type":"mousemove","time":6851,"x":286,"y":142},{"type":"mouseup","time":6907,"x":286,"y":142},{"time":6908,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7267,"x":289,"y":141},{"type":"mousemove","time":7474,"x":364,"y":139},{"type":"mousedown","time":7673,"x":364,"y":139},{"type":"mouseup","time":7782,"x":364,"y":139},{"time":7783,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8268,"x":364,"y":139},{"type":"mousedown","time":8431,"x":367,"y":138},{"type":"mousemove","time":8474,"x":367,"y":138},{"type":"mouseup","time":8573,"x":367,"y":138},{"time":8574,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8701,"x":368,"y":138},{"type":"mousedown","time":9050,"x":368,"y":138},{"type":"mouseup","time":9148,"x":368,"y":138},{"time":9149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9284,"x":368,"y":138},{"type":"mousemove","time":9492,"x":451,"y":142},{"type":"mousedown","time":9692,"x":457,"y":141},{"type":"mousemove","time":9790,"x":456,"y":141},{"type":"mouseup","time":9808,"x":457,"y":141},{"time":9809,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9886,"x":459,"y":141},{"type":"mousemove","time":10092,"x":474,"y":141},{"type":"mousemove","time":10201,"x":476,"y":140},{"type":"mousedown","time":10281,"x":476,"y":140},{"type":"mouseup","time":10389,"x":476,"y":140},{"time":10390,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":10779,"x":476,"y":140},{"type":"mousemove","time":10900,"x":476,"y":141},{"type":"mouseup","time":10914,"x":475,"y":142},{"time":10915,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11100,"x":416,"y":148},{"type":"mousedown","time":11326,"x":364,"y":143},{"type":"mousemove","time":11331,"x":364,"y":143},{"type":"mouseup","time":11427,"x":364,"y":143},{"time":11428,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11617,"x":365,"y":143},{"type":"mousemove","time":11825,"x":408,"y":144},{"type":"mousemove","time":12073,"x":404,"y":145},{"type":"mousemove","time":12285,"x":392,"y":148},{"type":"mousedown","time":12439,"x":387,"y":148},{"type":"mousemove","time":12489,"x":387,"y":148},{"type":"mouseup","time":12540,"x":387,"y":148},{"time":12541,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12700,"x":461,"y":150},{"type":"mousedown","time":12935,"x":461,"y":150},{"type":"mouseup","time":13046,"x":461,"y":150},{"time":13047,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13467,"x":463,"y":150},{"type":"mousedown","time":13524,"x":463,"y":150},{"type":"mouseup","time":13647,"x":463,"y":150},{"time":13648,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13673,"x":463,"y":150},{"type":"mousemove","time":13890,"x":476,"y":136},{"type":"mousedown","time":13895,"x":476,"y":136},{"type":"mouseup","time":13995,"x":476,"y":149},{"time":13996,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14123,"x":476,"y":145},{"type":"mousedown","time":14290,"x":477,"y":140},{"type":"mousemove","time":14339,"x":477,"y":140},{"type":"mouseup","time":14396,"x":477,"y":140},{"time":14397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14421,"x":479,"y":140},{"type":"mousemove","time":14624,"x":490,"y":141},{"type":"mousedown","time":14729,"x":490,"y":141},{"type":"mouseup","time":14826,"x":491,"y":142},{"time":14827,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14840,"x":491,"y":142},{"type":"mousemove","time":15045,"x":510,"y":143},{"type":"mousemove","time":15250,"x":561,"y":143},{"type":"mousedown","time":15342,"x":564,"y":144},{"type":"mouseup","time":15442,"x":564,"y":144},{"time":15443,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":15471,"x":564,"y":144},{"type":"mousemove","time":15766,"x":565,"y":144},{"type":"mousemove","time":15967,"x":429,"y":150},{"type":"mousemove","time":16167,"x":127,"y":163},{"type":"mousedown","time":16373,"x":124,"y":184},{"type":"mousemove","time":16379,"x":124,"y":183},{"type":"mouseup","time":16457,"x":124,"y":184},{"time":16458,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":16833,"x":124,"y":185},{"type":"mousemove","time":17039,"x":146,"y":185},{"type":"mousedown","time":17147,"x":146,"y":185},{"type":"mouseup","time":17230,"x":146,"y":185},{"time":17231,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":17616,"x":145,"y":185},{"type":"mousemove","time":17816,"x":192,"y":186},{"type":"mousemove","time":18023,"x":201,"y":186},{"type":"mousemove","time":18184,"x":202,"y":186},{"type":"mousemove","time":18389,"x":455,"y":168},{"type":"mousedown","time":18562,"x":465,"y":145},{"type":"mousemove","time":18606,"x":466,"y":145},{"type":"mouseup","time":18674,"x":466,"y":144},{"time":18675,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":18824,"x":469,"y":144},{"type":"mousemove","time":18983,"x":466,"y":144},{"type":"mousemove","time":19183,"x":430,"y":144},{"type":"mousedown","time":19313,"x":374,"y":144},{"type":"mousemove","time":19389,"x":374,"y":144},{"type":"mouseup","time":19439,"x":374,"y":144},{"time":19440,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":19799,"x":375,"y":144},{"type":"mousemove","time":20005,"x":430,"y":142},{"type":"mousedown","time":20190,"x":378,"y":142},{"type":"mousemove","time":20249,"x":377,"y":142},{"type":"mouseup","time":20296,"x":377,"y":142},{"time":20297,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":20450,"x":379,"y":146},{"type":"mousemove","time":20657,"x":399,"y":146},{"type":"mousedown","time":20808,"x":469,"y":150},{"type":"mousemove","time":20875,"x":469,"y":150},{"type":"mouseup","time":20922,"x":469,"y":150},{"time":20923,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21116,"x":471,"y":150},{"type":"mousedown","time":21194,"x":472,"y":146},{"type":"mouseup","time":21293,"x":473,"y":146},{"time":21294,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21323,"x":473,"y":146},{"type":"mousemove","time":21574,"x":289,"y":142},{"type":"mousedown","time":21692,"x":281,"y":141},{"type":"mousemove","time":21791,"x":281,"y":141},{"type":"mouseup","time":21797,"x":281,"y":141},{"time":21798,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22216,"x":285,"y":141},{"type":"mousedown","time":22374,"x":372,"y":134},{"type":"mousemove","time":22425,"x":372,"y":134},{"type":"mouseup","time":22479,"x":372,"y":134},{"time":22480,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22632,"x":377,"y":134},{"type":"mousedown","time":22827,"x":383,"y":134},{"type":"mousemove","time":22842,"x":383,"y":134},{"type":"mouseup","time":22944,"x":383,"y":134},{"time":22945,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23117,"x":382,"y":134},{"type":"mousemove","time":23325,"x":373,"y":134},{"type":"mousedown","time":23446,"x":368,"y":137},{"type":"mouseup","time":23546,"x":368,"y":137},{"time":23547,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23567,"x":368,"y":137},{"type":"mousedown","time":23742,"x":368,"y":137},{"type":"mouseup","time":23875,"x":368,"y":137},{"time":23876,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24249,"x":367,"y":137},{"type":"mousemove","time":24456,"x":426,"y":134},{"type":"mousedown","time":24657,"x":490,"y":136},{"type":"mousemove","time":24722,"x":490,"y":136},{"type":"mouseup","time":24790,"x":490,"y":136},{"time":24791,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24803,"x":492,"y":137},{"type":"mousemove","time":25008,"x":468,"y":140},{"type":"mousedown","time":25212,"x":398,"y":143},{"type":"mousemove","time":25227,"x":398,"y":143},{"type":"mouseup","time":25310,"x":398,"y":143},{"time":25311,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":25465,"x":405,"y":143},{"type":"mousemove","time":25675,"x":460,"y":143},{"type":"mousemove","time":25889,"x":438,"y":142},{"type":"mousedown","time":25990,"x":436,"y":141},{"type":"mouseup","time":26082,"x":436,"y":141},{"time":26083,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26104,"x":436,"y":142},{"type":"mousemove","time":26265,"x":437,"y":140},{"type":"mousemove","time":26476,"x":441,"y":139},{"type":"mousedown","time":26574,"x":443,"y":139},{"type":"mouseup","time":26692,"x":443,"y":139},{"time":26693,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26774,"x":442,"y":139},{"type":"mousedown","time":27078,"x":443,"y":139},{"type":"mousemove","time":27132,"x":443,"y":139},{"type":"mouseup","time":27197,"x":443,"y":139},{"time":27198,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27341,"x":443,"y":139},{"type":"mousedown","time":27479,"x":443,"y":139},{"type":"mousemove","time":27498,"x":443,"y":140},{"type":"mouseup","time":27591,"x":443,"y":140},{"time":27592,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27698,"x":443,"y":140},{"type":"mousedown","time":28025,"x":443,"y":140},{"type":"mousemove","time":28132,"x":444,"y":140},{"type":"mouseup","time":28146,"x":444,"y":141},{"time":28147,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":28344,"x":448,"y":146},{"type":"mousedown","time":28631,"x":448,"y":146},{"type":"mouseup","time":28742,"x":448,"y":146},{"time":28743,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":29291,"x":448,"y":145},{"type":"mousemove","time":29348,"x":449,"y":145},{"type":"mouseup","time":29396,"x":449,"y":145},{"time":29397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":29558,"x":449,"y":145},{"type":"mousedown","time":30114,"x":449,"y":145},{"type":"mouseup","time":30205,"x":449,"y":145},{"time":30206,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30577,"x":449,"y":145},{"type":"mouseup","time":30691,"x":449,"y":145},{"time":30692,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30993,"x":449,"y":145},{"type":"mouseup","time":31110,"x":449,"y":145},{"time":31111,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":31772,"x":449,"y":145},{"type":"mouseup","time":31862,"x":449,"y":145},{"time":31863,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":32822,"x":449,"y":145},{"type":"mouseup","time":32911,"x":449,"y":145},{"time":32912,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33164,"x":449,"y":144},{"type":"mousedown","time":33528,"x":449,"y":144},{"type":"mouseup","time":33624,"x":449,"y":144},{"time":33625,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33799,"x":448,"y":145},{"type":"mousemove","time":34007,"x":342,"y":155},{"type":"mousemove","time":34265,"x":332,"y":147},{"type":"mousemove","time":34471,"x":373,"y":142},{"type":"mousemove","time":34569,"x":378,"y":142},{"type":"mousedown","time":34709,"x":387,"y":140},{"type":"mousemove","time":34771,"x":386,"y":140},{"type":"mouseup","time":34805,"x":387,"y":140},{"time":34806,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":34835,"x":388,"y":140},{"type":"mousemove","time":35039,"x":430,"y":141},{"type":"mousemove","time":35247,"x":448,"y":141},{"type":"mousedown","time":35391,"x":455,"y":141},{"type":"mousemove","time":35456,"x":455,"y":141},{"type":"mouseup","time":35477,"x":455,"y":141},{"time":35478,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":35681,"x":453,"y":141},{"type":"mousemove","time":35881,"x":293,"y":143},{"type":"mousedown","time":36022,"x":285,"y":142},{"type":"mousemove","time":36086,"x":285,"y":142},{"type":"mouseup","time":36092,"x":285,"y":142},{"time":36093,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":36214,"x":288,"y":142},{"type":"mousemove","time":36414,"x":391,"y":140},{"type":"mousedown","time":36575,"x":432,"y":140},{"type":"mousemove","time":36623,"x":432,"y":140},{"type":"mouseup","time":36672,"x":433,"y":141},{"time":36673,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":36869,"x":434,"y":142},{"type":"mousemove","time":36875,"x":434,"y":142},{"type":"mouseup","time":36980,"x":434,"y":142},{"time":36981,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":37091,"x":434,"y":142},{"type":"mouseup","time":37223,"x":434,"y":142},{"time":37224,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":37557,"x":434,"y":142},{"type":"mouseup","time":37660,"x":434,"y":142},{"time":37661,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":37687,"x":434,"y":142},{"type":"mousedown","time":37925,"x":434,"y":142},{"type":"mouseup","time":38041,"x":434,"y":142},{"time":38042,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":38173,"x":434,"y":142},{"type":"mouseup","time":38277,"x":434,"y":142},{"time":38278,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":38410,"x":434,"y":142},{"type":"mouseup","time":38516,"x":434,"y":142},{"time":38517,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39022,"x":434,"y":142},{"type":"mouseup","time":39121,"x":434,"y":142},{"time":39122,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39474,"x":434,"y":142},{"type":"mouseup","time":39589,"x":434,"y":142},{"time":39590,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39839,"x":434,"y":142},{"type":"mouseup","time":39957,"x":434,"y":142},{"time":39958,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":41197,"x":438,"y":142},{"type":"mousemove","time":41404,"x":767,"y":129}],"scrollY":0,"scrollX":0,"timestamp":1641307511619}] \ No newline at end of file From f8e6bda2d20d2713b2c66211b41035c052ee53c5 Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 6 Jan 2022 23:03:58 +0800 Subject: [PATCH 4/6] refactor: normalize percentage value of corner radius in echarts. --- src/chart/helper/pieHelper.ts | 14 +++++++++++--- src/chart/pie/PieView.ts | 13 ++++++------- src/chart/sunburst/SunburstPiece.ts | 4 ++-- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/chart/helper/pieHelper.ts b/src/chart/helper/pieHelper.ts index eaa0c89b33..e55ded398b 100644 --- a/src/chart/helper/pieHelper.ts +++ b/src/chart/helper/pieHelper.ts @@ -17,17 +17,25 @@ * under the License. */ -import Model from '../../model/Model'; +import type Model from '../../model/Model'; +import type Sector from 'zrender/src/graphic/shape/Sector'; +import { isArray, map } from 'zrender/src/core/util'; +import { parsePercent } from 'zrender/src/contain/text'; export function getSectorCornerRadius( model: Model<{ borderRadius?: string | number | (string | number)[] }>, + shape: Pick, zeroIfNull?: boolean ) { - const cornerRadius = model.get('borderRadius'); + let cornerRadius = model.get('borderRadius'); if (cornerRadius == null) { return zeroIfNull ? { cornerRadius: 0 } : null; } + if (!isArray(cornerRadius)) { + cornerRadius = [cornerRadius, cornerRadius, cornerRadius, cornerRadius]; + } + const dr = Math.abs(shape.r || 0 - shape.r0 || 0); return { - cornerRadius + cornerRadius: map(cornerRadius, cr => parsePercent(cr, dr)) }; } diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index d9c3d059ee..e464755ecd 100644 --- a/src/chart/pie/PieView.ts +++ b/src/chart/pie/PieView.ts @@ -62,7 +62,7 @@ class PiePiece extends graphic.Sector { // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified. // see `setItemLayout` in `pieLayout.ts`. const sectorShape = extend( - getSectorCornerRadius(itemModel.getModel('itemStyle'), true), + getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true), layout ); @@ -138,18 +138,17 @@ class PiePiece extends graphic.Sector { this._updateLabel(seriesModel, data, idx); - sector.ensureState('emphasis').shape = { + sector.ensureState('emphasis').shape = extend({ r: layout.r + (emphasisModel.get('scale') - ? (emphasisModel.get('scaleSize') || 0) : 0), - ...getSectorCornerRadius(emphasisModel.getModel('itemStyle')) - }; + ? (emphasisModel.get('scaleSize') || 0) : 0) + }, getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout)); extend(sector.ensureState('select'), { x: dx, y: dy, - shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle'])) + shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']), layout) }); extend(sector.ensureState('blur'), { - shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle'])) + shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']), layout) }); const labelLine = sector.getTextGuideLine(); diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index 9ad140c386..88dc04dd26 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/src/chart/sunburst/SunburstPiece.ts @@ -99,7 +99,7 @@ class SunburstPiece extends graphic.Sector { normalStyle.decal = createOrUpdatePatternFromDecal(decal, api); } - const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), true); + const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true); zrUtil.extend(sectorShape, cornerRadius); zrUtil.each(SPECIAL_STATES, function (stateName) { @@ -107,7 +107,7 @@ class SunburstPiece extends graphic.Sector { const itemStyleModel = itemModel.getModel([stateName, 'itemStyle']); state.style = itemStyleModel.getItemStyle(); // border radius - const cornerRadius = getSectorCornerRadius(itemStyleModel); + const cornerRadius = getSectorCornerRadius(itemStyleModel, layout); if (cornerRadius) { state.shape = cornerRadius; } From 4da1c0bc2551fd636f3c0b7b66535520ecb22dc7 Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 6 Jan 2022 23:25:14 +0800 Subject: [PATCH 5/6] chore: revert unnecessary changes. --- src/chart/sunburst/SunburstPiece.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index 88dc04dd26..b5cfd99684 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/src/chart/sunburst/SunburstPiece.ts @@ -99,7 +99,7 @@ class SunburstPiece extends graphic.Sector { normalStyle.decal = createOrUpdatePatternFromDecal(decal, api); } - const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true); + const cornerRadius = getSectorCornerRadius(itemModel.getModel('itemStyle'), sectorShape, true); zrUtil.extend(sectorShape, cornerRadius); zrUtil.each(SPECIAL_STATES, function (stateName) { @@ -107,7 +107,7 @@ class SunburstPiece extends graphic.Sector { const itemStyleModel = itemModel.getModel([stateName, 'itemStyle']); state.style = itemStyleModel.getItemStyle(); // border radius - const cornerRadius = getSectorCornerRadius(itemStyleModel, layout); + const cornerRadius = getSectorCornerRadius(itemStyleModel, sectorShape); if (cornerRadius) { state.shape = cornerRadius; } From 03e9f0a35ae621f8761b1307f74962b0b28c8a56 Mon Sep 17 00:00:00 2001 From: plainheart Date: Thu, 6 Jan 2022 23:51:33 +0800 Subject: [PATCH 6/6] test: tweak actions. --- test/runTest/actions/pie-cornerRadius.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/runTest/actions/pie-cornerRadius.json b/test/runTest/actions/pie-cornerRadius.json index 2ef3411a65..0428634e42 100644 --- a/test/runTest/actions/pie-cornerRadius.json +++ b/test/runTest/actions/pie-cornerRadius.json @@ -1 +1 @@ -[{"name":"Action 1","ops":[{"type":"mousemove","time":336,"x":641,"y":336},{"type":"mousemove","time":539,"x":633,"y":335},{"type":"mousemove","time":618,"x":632,"y":332},{"type":"mousemove","time":818,"x":632,"y":271},{"type":"mousemove","time":1018,"x":308,"y":160},{"type":"mousemove","time":1219,"x":161,"y":131},{"type":"mousemove","time":1423,"x":116,"y":94},{"type":"mousedown","time":1643,"x":116,"y":94},{"type":"mouseup","time":1781,"x":116,"y":94},{"time":1782,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1885,"x":118,"y":94},{"type":"mousemove","time":2091,"x":232,"y":104},{"type":"mousemove","time":2301,"x":254,"y":99},{"type":"mousedown","time":2448,"x":258,"y":98},{"type":"mousemove","time":2501,"x":260,"y":98},{"type":"mouseup","time":2581,"x":261,"y":98},{"time":2582,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2701,"x":261,"y":98},{"type":"mousemove","time":2801,"x":263,"y":98},{"type":"mousemove","time":3008,"x":314,"y":98},{"type":"mousemove","time":3235,"x":375,"y":102},{"type":"mousemove","time":3439,"x":421,"y":99},{"type":"mousedown","time":3541,"x":421,"y":99},{"type":"mouseup","time":3680,"x":422,"y":99},{"time":3681,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3692,"x":423,"y":99},{"type":"mousemove","time":3934,"x":426,"y":100},{"type":"mousemove","time":4134,"x":616,"y":102},{"type":"mousedown","time":4256,"x":668,"y":100},{"type":"mousemove","time":4340,"x":668,"y":100},{"type":"mouseup","time":4395,"x":668,"y":100},{"time":4396,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4551,"x":633,"y":104},{"type":"mousemove","time":4751,"x":413,"y":114},{"type":"mousemove","time":4952,"x":181,"y":133},{"type":"mousemove","time":5156,"x":81,"y":135},{"type":"mousedown","time":5179,"x":79,"y":135},{"type":"mouseup","time":5291,"x":79,"y":135},{"time":5292,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5375,"x":79,"y":135},{"type":"mousemove","time":5537,"x":81,"y":135},{"type":"mousemove","time":5743,"x":161,"y":135},{"type":"mousedown","time":5827,"x":162,"y":135},{"type":"mouseup","time":5943,"x":163,"y":135},{"time":5944,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5955,"x":163,"y":135},{"type":"mousemove","time":6287,"x":169,"y":136},{"type":"mousemove","time":6491,"x":330,"y":144},{"type":"mousemove","time":6651,"x":318,"y":143},{"type":"mousedown","time":6774,"x":286,"y":142},{"type":"mousemove","time":6851,"x":286,"y":142},{"type":"mouseup","time":6907,"x":286,"y":142},{"time":6908,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7267,"x":289,"y":141},{"type":"mousemove","time":7474,"x":364,"y":139},{"type":"mousedown","time":7673,"x":364,"y":139},{"type":"mouseup","time":7782,"x":364,"y":139},{"time":7783,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8268,"x":364,"y":139},{"type":"mousedown","time":8431,"x":367,"y":138},{"type":"mousemove","time":8474,"x":367,"y":138},{"type":"mouseup","time":8573,"x":367,"y":138},{"time":8574,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8701,"x":368,"y":138},{"type":"mousedown","time":9050,"x":368,"y":138},{"type":"mouseup","time":9148,"x":368,"y":138},{"time":9149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9284,"x":368,"y":138},{"type":"mousemove","time":9492,"x":451,"y":142},{"type":"mousedown","time":9692,"x":457,"y":141},{"type":"mousemove","time":9790,"x":456,"y":141},{"type":"mouseup","time":9808,"x":457,"y":141},{"time":9809,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9886,"x":459,"y":141},{"type":"mousemove","time":10092,"x":474,"y":141},{"type":"mousemove","time":10201,"x":476,"y":140},{"type":"mousedown","time":10281,"x":476,"y":140},{"type":"mouseup","time":10389,"x":476,"y":140},{"time":10390,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":10779,"x":476,"y":140},{"type":"mousemove","time":10900,"x":476,"y":141},{"type":"mouseup","time":10914,"x":475,"y":142},{"time":10915,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11100,"x":416,"y":148},{"type":"mousedown","time":11326,"x":364,"y":143},{"type":"mousemove","time":11331,"x":364,"y":143},{"type":"mouseup","time":11427,"x":364,"y":143},{"time":11428,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11617,"x":365,"y":143},{"type":"mousemove","time":11825,"x":408,"y":144},{"type":"mousemove","time":12073,"x":404,"y":145},{"type":"mousemove","time":12285,"x":392,"y":148},{"type":"mousedown","time":12439,"x":387,"y":148},{"type":"mousemove","time":12489,"x":387,"y":148},{"type":"mouseup","time":12540,"x":387,"y":148},{"time":12541,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12700,"x":461,"y":150},{"type":"mousedown","time":12935,"x":461,"y":150},{"type":"mouseup","time":13046,"x":461,"y":150},{"time":13047,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13467,"x":463,"y":150},{"type":"mousedown","time":13524,"x":463,"y":150},{"type":"mouseup","time":13647,"x":463,"y":150},{"time":13648,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13673,"x":463,"y":150},{"type":"mousemove","time":13890,"x":476,"y":136},{"type":"mousedown","time":13895,"x":476,"y":136},{"type":"mouseup","time":13995,"x":476,"y":149},{"time":13996,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14123,"x":476,"y":145},{"type":"mousedown","time":14290,"x":477,"y":140},{"type":"mousemove","time":14339,"x":477,"y":140},{"type":"mouseup","time":14396,"x":477,"y":140},{"time":14397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14421,"x":479,"y":140},{"type":"mousemove","time":14624,"x":490,"y":141},{"type":"mousedown","time":14729,"x":490,"y":141},{"type":"mouseup","time":14826,"x":491,"y":142},{"time":14827,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14840,"x":491,"y":142},{"type":"mousemove","time":15045,"x":510,"y":143},{"type":"mousemove","time":15250,"x":561,"y":143},{"type":"mousedown","time":15342,"x":564,"y":144},{"type":"mouseup","time":15442,"x":564,"y":144},{"time":15443,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":15471,"x":564,"y":144},{"type":"mousemove","time":15766,"x":565,"y":144},{"type":"mousemove","time":15967,"x":429,"y":150},{"type":"mousemove","time":16167,"x":127,"y":163},{"type":"mousedown","time":16373,"x":124,"y":184},{"type":"mousemove","time":16379,"x":124,"y":183},{"type":"mouseup","time":16457,"x":124,"y":184},{"time":16458,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":16833,"x":124,"y":185},{"type":"mousemove","time":17039,"x":146,"y":185},{"type":"mousedown","time":17147,"x":146,"y":185},{"type":"mouseup","time":17230,"x":146,"y":185},{"time":17231,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":17616,"x":145,"y":185},{"type":"mousemove","time":17816,"x":192,"y":186},{"type":"mousemove","time":18023,"x":201,"y":186},{"type":"mousemove","time":18184,"x":202,"y":186},{"type":"mousemove","time":18389,"x":455,"y":168},{"type":"mousedown","time":18562,"x":465,"y":145},{"type":"mousemove","time":18606,"x":466,"y":145},{"type":"mouseup","time":18674,"x":466,"y":144},{"time":18675,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":18824,"x":469,"y":144},{"type":"mousemove","time":18983,"x":466,"y":144},{"type":"mousemove","time":19183,"x":430,"y":144},{"type":"mousedown","time":19313,"x":374,"y":144},{"type":"mousemove","time":19389,"x":374,"y":144},{"type":"mouseup","time":19439,"x":374,"y":144},{"time":19440,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":19799,"x":375,"y":144},{"type":"mousemove","time":20005,"x":430,"y":142},{"type":"mousedown","time":20190,"x":378,"y":142},{"type":"mousemove","time":20249,"x":377,"y":142},{"type":"mouseup","time":20296,"x":377,"y":142},{"time":20297,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":20450,"x":379,"y":146},{"type":"mousemove","time":20657,"x":399,"y":146},{"type":"mousedown","time":20808,"x":469,"y":150},{"type":"mousemove","time":20875,"x":469,"y":150},{"type":"mouseup","time":20922,"x":469,"y":150},{"time":20923,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21116,"x":471,"y":150},{"type":"mousedown","time":21194,"x":472,"y":146},{"type":"mouseup","time":21293,"x":473,"y":146},{"time":21294,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21323,"x":473,"y":146},{"type":"mousemove","time":21574,"x":289,"y":142},{"type":"mousedown","time":21692,"x":281,"y":141},{"type":"mousemove","time":21791,"x":281,"y":141},{"type":"mouseup","time":21797,"x":281,"y":141},{"time":21798,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22216,"x":285,"y":141},{"type":"mousedown","time":22374,"x":372,"y":134},{"type":"mousemove","time":22425,"x":372,"y":134},{"type":"mouseup","time":22479,"x":372,"y":134},{"time":22480,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22632,"x":377,"y":134},{"type":"mousedown","time":22827,"x":383,"y":134},{"type":"mousemove","time":22842,"x":383,"y":134},{"type":"mouseup","time":22944,"x":383,"y":134},{"time":22945,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23117,"x":382,"y":134},{"type":"mousemove","time":23325,"x":373,"y":134},{"type":"mousedown","time":23446,"x":368,"y":137},{"type":"mouseup","time":23546,"x":368,"y":137},{"time":23547,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23567,"x":368,"y":137},{"type":"mousedown","time":23742,"x":368,"y":137},{"type":"mouseup","time":23875,"x":368,"y":137},{"time":23876,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24249,"x":367,"y":137},{"type":"mousemove","time":24456,"x":426,"y":134},{"type":"mousedown","time":24657,"x":490,"y":136},{"type":"mousemove","time":24722,"x":490,"y":136},{"type":"mouseup","time":24790,"x":490,"y":136},{"time":24791,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24803,"x":492,"y":137},{"type":"mousemove","time":25008,"x":468,"y":140},{"type":"mousedown","time":25212,"x":398,"y":143},{"type":"mousemove","time":25227,"x":398,"y":143},{"type":"mouseup","time":25310,"x":398,"y":143},{"time":25311,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":25465,"x":405,"y":143},{"type":"mousemove","time":25675,"x":460,"y":143},{"type":"mousemove","time":25889,"x":438,"y":142},{"type":"mousedown","time":25990,"x":436,"y":141},{"type":"mouseup","time":26082,"x":436,"y":141},{"time":26083,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26104,"x":436,"y":142},{"type":"mousemove","time":26265,"x":437,"y":140},{"type":"mousemove","time":26476,"x":441,"y":139},{"type":"mousedown","time":26574,"x":443,"y":139},{"type":"mouseup","time":26692,"x":443,"y":139},{"time":26693,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26774,"x":442,"y":139},{"type":"mousedown","time":27078,"x":443,"y":139},{"type":"mousemove","time":27132,"x":443,"y":139},{"type":"mouseup","time":27197,"x":443,"y":139},{"time":27198,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27341,"x":443,"y":139},{"type":"mousedown","time":27479,"x":443,"y":139},{"type":"mousemove","time":27498,"x":443,"y":140},{"type":"mouseup","time":27591,"x":443,"y":140},{"time":27592,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27698,"x":443,"y":140},{"type":"mousedown","time":28025,"x":443,"y":140},{"type":"mousemove","time":28132,"x":444,"y":140},{"type":"mouseup","time":28146,"x":444,"y":141},{"time":28147,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":28344,"x":448,"y":146},{"type":"mousedown","time":28631,"x":448,"y":146},{"type":"mouseup","time":28742,"x":448,"y":146},{"time":28743,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":29291,"x":448,"y":145},{"type":"mousemove","time":29348,"x":449,"y":145},{"type":"mouseup","time":29396,"x":449,"y":145},{"time":29397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":29558,"x":449,"y":145},{"type":"mousedown","time":30114,"x":449,"y":145},{"type":"mouseup","time":30205,"x":449,"y":145},{"time":30206,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30577,"x":449,"y":145},{"type":"mouseup","time":30691,"x":449,"y":145},{"time":30692,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30993,"x":449,"y":145},{"type":"mouseup","time":31110,"x":449,"y":145},{"time":31111,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":31772,"x":449,"y":145},{"type":"mouseup","time":31862,"x":449,"y":145},{"time":31863,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":32822,"x":449,"y":145},{"type":"mouseup","time":32911,"x":449,"y":145},{"time":32912,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33164,"x":449,"y":144},{"type":"mousedown","time":33528,"x":449,"y":144},{"type":"mouseup","time":33624,"x":449,"y":144},{"time":33625,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33799,"x":448,"y":145},{"type":"mousemove","time":34007,"x":342,"y":155},{"type":"mousemove","time":34265,"x":332,"y":147},{"type":"mousemove","time":34471,"x":373,"y":142},{"type":"mousemove","time":34569,"x":378,"y":142},{"type":"mousedown","time":34709,"x":387,"y":140},{"type":"mousemove","time":34771,"x":386,"y":140},{"type":"mouseup","time":34805,"x":387,"y":140},{"time":34806,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":34835,"x":388,"y":140},{"type":"mousemove","time":35039,"x":430,"y":141},{"type":"mousemove","time":35247,"x":448,"y":141},{"type":"mousedown","time":35391,"x":455,"y":141},{"type":"mousemove","time":35456,"x":455,"y":141},{"type":"mouseup","time":35477,"x":455,"y":141},{"time":35478,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":35681,"x":453,"y":141},{"type":"mousemove","time":35881,"x":293,"y":143},{"type":"mousedown","time":36022,"x":285,"y":142},{"type":"mousemove","time":36086,"x":285,"y":142},{"type":"mouseup","time":36092,"x":285,"y":142},{"time":36093,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":36214,"x":288,"y":142},{"type":"mousemove","time":36414,"x":391,"y":140},{"type":"mousedown","time":36575,"x":432,"y":140},{"type":"mousemove","time":36623,"x":432,"y":140},{"type":"mouseup","time":36672,"x":433,"y":141},{"time":36673,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":36869,"x":434,"y":142},{"type":"mousemove","time":36875,"x":434,"y":142},{"type":"mouseup","time":36980,"x":434,"y":142},{"time":36981,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":37091,"x":434,"y":142},{"type":"mouseup","time":37223,"x":434,"y":142},{"time":37224,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":37557,"x":434,"y":142},{"type":"mouseup","time":37660,"x":434,"y":142},{"time":37661,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":37687,"x":434,"y":142},{"type":"mousedown","time":37925,"x":434,"y":142},{"type":"mouseup","time":38041,"x":434,"y":142},{"time":38042,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":38173,"x":434,"y":142},{"type":"mouseup","time":38277,"x":434,"y":142},{"time":38278,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":38410,"x":434,"y":142},{"type":"mouseup","time":38516,"x":434,"y":142},{"time":38517,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39022,"x":434,"y":142},{"type":"mouseup","time":39121,"x":434,"y":142},{"time":39122,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39474,"x":434,"y":142},{"type":"mouseup","time":39589,"x":434,"y":142},{"time":39590,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":39839,"x":434,"y":142},{"type":"mouseup","time":39957,"x":434,"y":142},{"time":39958,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":41197,"x":438,"y":142},{"type":"mousemove","time":41404,"x":767,"y":129}],"scrollY":0,"scrollX":0,"timestamp":1641307511619}] \ No newline at end of file +[{"name":"Action 1","ops":[{"type":"mousemove","time":336,"x":641,"y":336},{"type":"mousemove","time":539,"x":633,"y":335},{"type":"mousemove","time":618,"x":632,"y":332},{"type":"mousemove","time":818,"x":632,"y":271},{"type":"mousemove","time":1018,"x":308,"y":160},{"type":"mousemove","time":1219,"x":161,"y":131},{"type":"mousemove","time":1423,"x":116,"y":94},{"type":"mousedown","time":1643,"x":116,"y":94},{"type":"mouseup","time":1781,"x":116,"y":94},{"time":1782,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1885,"x":118,"y":94},{"type":"mousemove","time":2091,"x":232,"y":104},{"type":"mousemove","time":2301,"x":254,"y":99},{"type":"mousedown","time":2448,"x":258,"y":98},{"type":"mousemove","time":2501,"x":260,"y":98},{"type":"mouseup","time":2581,"x":261,"y":98},{"time":2582,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2701,"x":261,"y":98},{"type":"mousemove","time":2801,"x":263,"y":98},{"type":"mousemove","time":3008,"x":314,"y":98},{"type":"mousemove","time":3235,"x":375,"y":102},{"type":"mousemove","time":3439,"x":421,"y":99},{"type":"mousedown","time":3541,"x":421,"y":99},{"type":"mouseup","time":3680,"x":422,"y":99},{"time":3681,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3692,"x":423,"y":99},{"type":"mousemove","time":3934,"x":426,"y":100},{"type":"mousemove","time":4134,"x":616,"y":102},{"type":"mousedown","time":4256,"x":668,"y":100},{"type":"mousemove","time":4340,"x":668,"y":100},{"type":"mouseup","time":4395,"x":668,"y":100},{"time":4396,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4551,"x":633,"y":104},{"type":"mousemove","time":4751,"x":413,"y":114},{"type":"mousemove","time":4952,"x":181,"y":133},{"type":"mousemove","time":5156,"x":81,"y":135},{"type":"mousedown","time":5179,"x":79,"y":135},{"type":"mouseup","time":5291,"x":79,"y":135},{"time":5292,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5375,"x":79,"y":135},{"type":"mousemove","time":5537,"x":81,"y":135},{"type":"mousemove","time":5743,"x":161,"y":135},{"type":"mousedown","time":5827,"x":162,"y":135},{"type":"mouseup","time":5943,"x":163,"y":135},{"time":5944,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5955,"x":163,"y":135},{"type":"mousemove","time":6287,"x":169,"y":136},{"type":"mousemove","time":6491,"x":330,"y":144},{"type":"mousemove","time":6651,"x":318,"y":143},{"type":"mousedown","time":6774,"x":286,"y":142},{"type":"mousemove","time":6851,"x":286,"y":142},{"type":"mouseup","time":6907,"x":286,"y":142},{"time":6908,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7267,"x":289,"y":141},{"type":"mousemove","time":7474,"x":364,"y":139},{"type":"mousedown","time":7673,"x":364,"y":139},{"type":"mouseup","time":7782,"x":364,"y":139},{"time":7783,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8268,"x":364,"y":139},{"type":"mousedown","time":8431,"x":367,"y":138},{"type":"mousemove","time":8474,"x":367,"y":138},{"type":"mouseup","time":8573,"x":367,"y":138},{"time":8574,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8701,"x":368,"y":138},{"type":"mousedown","time":9050,"x":368,"y":138},{"type":"mouseup","time":9148,"x":368,"y":138},{"time":9149,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9284,"x":368,"y":138},{"type":"mousemove","time":9492,"x":451,"y":142},{"type":"mousedown","time":9692,"x":457,"y":141},{"type":"mousemove","time":9790,"x":456,"y":141},{"type":"mouseup","time":9808,"x":457,"y":141},{"time":9809,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9886,"x":459,"y":141},{"type":"mousemove","time":10092,"x":474,"y":141},{"type":"mousemove","time":10201,"x":476,"y":140},{"type":"mousedown","time":10281,"x":476,"y":140},{"type":"mouseup","time":10389,"x":476,"y":140},{"time":10390,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":10779,"x":476,"y":140},{"type":"mousemove","time":10900,"x":476,"y":141},{"type":"mouseup","time":10914,"x":475,"y":142},{"time":10915,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11100,"x":416,"y":148},{"type":"mousedown","time":11326,"x":364,"y":143},{"type":"mousemove","time":11331,"x":364,"y":143},{"type":"mouseup","time":11427,"x":364,"y":143},{"time":11428,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11617,"x":365,"y":143},{"type":"mousemove","time":11825,"x":408,"y":144},{"type":"mousemove","time":12073,"x":404,"y":145},{"type":"mousemove","time":12285,"x":392,"y":148},{"type":"mousedown","time":12439,"x":387,"y":148},{"type":"mousemove","time":12489,"x":387,"y":148},{"type":"mouseup","time":12540,"x":387,"y":148},{"time":12541,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12700,"x":461,"y":150},{"type":"mousedown","time":12935,"x":461,"y":150},{"type":"mouseup","time":13046,"x":461,"y":150},{"time":13047,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13467,"x":463,"y":150},{"type":"mousedown","time":13524,"x":463,"y":150},{"type":"mouseup","time":13647,"x":463,"y":150},{"time":13648,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13673,"x":463,"y":150},{"type":"mousemove","time":13890,"x":476,"y":136},{"type":"mousedown","time":13895,"x":476,"y":136},{"type":"mouseup","time":13995,"x":476,"y":149},{"time":13996,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14123,"x":476,"y":145},{"type":"mousedown","time":14290,"x":477,"y":140},{"type":"mousemove","time":14339,"x":477,"y":140},{"type":"mouseup","time":14396,"x":477,"y":140},{"time":14397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14421,"x":479,"y":140},{"type":"mousemove","time":14624,"x":490,"y":141},{"type":"mousedown","time":14729,"x":490,"y":141},{"type":"mouseup","time":14826,"x":491,"y":142},{"time":14827,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":14840,"x":491,"y":142},{"type":"mousemove","time":15045,"x":510,"y":143},{"type":"mousemove","time":15250,"x":561,"y":143},{"type":"mousedown","time":15342,"x":564,"y":144},{"type":"mouseup","time":15442,"x":564,"y":144},{"time":15443,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":15471,"x":564,"y":144},{"type":"mousemove","time":15766,"x":565,"y":144},{"type":"mousemove","time":15967,"x":429,"y":150},{"type":"mousemove","time":16167,"x":127,"y":163},{"type":"mousedown","time":16373,"x":124,"y":184},{"type":"mousemove","time":16379,"x":124,"y":183},{"type":"mouseup","time":16457,"x":124,"y":184},{"time":16458,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":16833,"x":124,"y":185},{"type":"mousemove","time":17039,"x":146,"y":185},{"type":"mousedown","time":17147,"x":146,"y":185},{"type":"mouseup","time":17230,"x":146,"y":185},{"time":17231,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":17616,"x":145,"y":185},{"type":"mousemove","time":17816,"x":192,"y":186},{"type":"mousemove","time":18023,"x":201,"y":186},{"type":"mousemove","time":18184,"x":202,"y":186},{"type":"mousemove","time":18389,"x":455,"y":168},{"type":"mousedown","time":18562,"x":465,"y":145},{"type":"mousemove","time":18606,"x":466,"y":145},{"type":"mouseup","time":18674,"x":466,"y":144},{"time":18675,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":18824,"x":469,"y":144},{"type":"mousemove","time":18983,"x":466,"y":144},{"type":"mousemove","time":19183,"x":430,"y":144},{"type":"mousedown","time":19313,"x":374,"y":144},{"type":"mousemove","time":19389,"x":374,"y":144},{"type":"mouseup","time":19439,"x":374,"y":144},{"time":19440,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":19799,"x":375,"y":144},{"type":"mousemove","time":20005,"x":430,"y":142},{"type":"mousedown","time":20190,"x":378,"y":142},{"type":"mousemove","time":20249,"x":377,"y":142},{"type":"mouseup","time":20296,"x":377,"y":142},{"time":20297,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":20450,"x":379,"y":146},{"type":"mousemove","time":20657,"x":399,"y":146},{"type":"mousedown","time":20808,"x":469,"y":150},{"type":"mousemove","time":20875,"x":469,"y":150},{"type":"mouseup","time":20922,"x":469,"y":150},{"time":20923,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21116,"x":471,"y":150},{"type":"mousedown","time":21194,"x":472,"y":146},{"type":"mouseup","time":21293,"x":473,"y":146},{"time":21294,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21323,"x":473,"y":146},{"type":"mousemove","time":21574,"x":289,"y":142},{"type":"mousedown","time":21692,"x":281,"y":141},{"type":"mousemove","time":21791,"x":281,"y":141},{"type":"mouseup","time":21797,"x":281,"y":141},{"time":21798,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22216,"x":285,"y":141},{"type":"mousedown","time":22374,"x":372,"y":134},{"type":"mousemove","time":22425,"x":372,"y":134},{"type":"mouseup","time":22479,"x":372,"y":134},{"time":22480,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":22632,"x":377,"y":134},{"type":"mousedown","time":22827,"x":383,"y":134},{"type":"mousemove","time":22842,"x":383,"y":134},{"type":"mouseup","time":22944,"x":383,"y":134},{"time":22945,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23117,"x":382,"y":134},{"type":"mousemove","time":23325,"x":373,"y":134},{"type":"mousedown","time":23446,"x":368,"y":137},{"type":"mouseup","time":23546,"x":368,"y":137},{"time":23547,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":23567,"x":368,"y":137},{"type":"mousedown","time":23742,"x":368,"y":137},{"type":"mouseup","time":23875,"x":368,"y":137},{"time":23876,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24249,"x":367,"y":137},{"type":"mousemove","time":24456,"x":426,"y":134},{"type":"mousedown","time":24657,"x":490,"y":136},{"type":"mousemove","time":24722,"x":490,"y":136},{"type":"mouseup","time":24790,"x":490,"y":136},{"time":24791,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":24803,"x":492,"y":137},{"type":"mousemove","time":25008,"x":468,"y":140},{"type":"mousedown","time":25212,"x":398,"y":143},{"type":"mousemove","time":25227,"x":398,"y":143},{"type":"mouseup","time":25310,"x":398,"y":143},{"time":25311,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":25465,"x":405,"y":143},{"type":"mousemove","time":25675,"x":460,"y":143},{"type":"mousemove","time":25889,"x":438,"y":142},{"type":"mousedown","time":25990,"x":436,"y":141},{"type":"mouseup","time":26082,"x":436,"y":141},{"time":26083,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26104,"x":436,"y":142},{"type":"mousemove","time":26265,"x":437,"y":140},{"type":"mousemove","time":26476,"x":441,"y":139},{"type":"mousedown","time":26574,"x":443,"y":139},{"type":"mouseup","time":26692,"x":443,"y":139},{"time":26693,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":26774,"x":442,"y":139},{"type":"mousedown","time":27078,"x":443,"y":139},{"type":"mousemove","time":27132,"x":443,"y":139},{"type":"mouseup","time":27197,"x":443,"y":139},{"time":27198,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27341,"x":443,"y":139},{"type":"mousedown","time":27479,"x":443,"y":139},{"type":"mousemove","time":27498,"x":443,"y":140},{"type":"mouseup","time":27591,"x":443,"y":140},{"time":27592,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":27698,"x":443,"y":140},{"type":"mousedown","time":28025,"x":443,"y":140},{"type":"mousemove","time":28132,"x":444,"y":140},{"type":"mouseup","time":28146,"x":444,"y":141},{"time":28147,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":28344,"x":448,"y":146},{"type":"mousedown","time":28631,"x":448,"y":146},{"type":"mouseup","time":28742,"x":448,"y":146},{"time":28743,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":29291,"x":448,"y":145},{"type":"mousemove","time":29348,"x":449,"y":145},{"type":"mouseup","time":29396,"x":449,"y":145},{"time":29397,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":29558,"x":449,"y":145},{"type":"mousedown","time":30114,"x":449,"y":145},{"type":"mouseup","time":30205,"x":449,"y":145},{"time":30206,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30577,"x":449,"y":145},{"type":"mouseup","time":30691,"x":449,"y":145},{"time":30692,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":30993,"x":449,"y":145},{"type":"mouseup","time":31110,"x":449,"y":145},{"time":31111,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":31772,"x":449,"y":145},{"type":"mouseup","time":31862,"x":449,"y":145},{"time":31863,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":32822,"x":449,"y":145},{"type":"mouseup","time":32911,"x":449,"y":145},{"time":32912,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33164,"x":449,"y":144},{"type":"mousedown","time":33528,"x":449,"y":144},{"type":"mouseup","time":33624,"x":449,"y":144},{"time":33625,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":33799,"x":448,"y":145},{"type":"mousemove","time":34007,"x":342,"y":155},{"type":"mousemove","time":34265,"x":332,"y":147},{"type":"mousemove","time":34471,"x":373,"y":142},{"type":"mousemove","time":34569,"x":378,"y":142},{"type":"mousedown","time":34709,"x":387,"y":140},{"type":"mousemove","time":34771,"x":386,"y":140},{"type":"mouseup","time":34805,"x":387,"y":140},{"time":34806,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":34835,"x":388,"y":140},{"type":"mousemove","time":35039,"x":430,"y":141},{"type":"mousemove","time":35247,"x":448,"y":141},{"type":"mousedown","time":35391,"x":455,"y":141},{"type":"mousemove","time":35456,"x":455,"y":141},{"type":"mouseup","time":35477,"x":455,"y":141},{"time":35478,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":35681,"x":453,"y":141},{"type":"mousemove","time":35881,"x":293,"y":143},{"type":"mousedown","time":36022,"x":285,"y":142},{"type":"mousemove","time":36086,"x":285,"y":142},{"type":"mouseup","time":36092,"x":285,"y":142},{"time":36093,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":36214,"x":288,"y":142},{"type":"mousemove","time":36414,"x":391,"y":140},{"type":"mousedown","time":36575,"x":432,"y":140},{"type":"mousemove","time":36623,"x":432,"y":140},{"type":"mouseup","time":36672,"x":433,"y":141},{"time":36673,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1641307511619}] \ No newline at end of file