This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch fix-17333 in repository https://gitbox.apache.org/repos/asf/echarts.git
commit bc4ee6c952ca25ab48a6b72545300d368535ed33 Author: Ovilia <[email protected]> AuthorDate: Mon Jul 11 17:29:40 2022 +0800 fix(custom): fix elements may not be removed after updates #17333 --- src/chart/custom/CustomView.ts | 23 ++-- test/custom-update.html | 181 ++++++++++++++++++++++++++++++++ test/runTest/actions/__meta__.json | 1 + test/runTest/actions/custom-update.json | 1 + 4 files changed, 198 insertions(+), 8 deletions(-) diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index 156807826..b415e391a 100644 --- a/src/chart/custom/CustomView.ts +++ b/src/chart/custom/CustomView.ts @@ -1316,14 +1316,21 @@ function mergeChildren( // might be better performance. let index = 0; for (; index < newLen; index++) { - newChildren[index] && doCreateOrUpdateEl( - api, - el.childAt(index), - dataIndex, - newChildren[index] as CustomElementOption, - seriesModel, - el - ); + const newChild = newChildren[index]; + if (newChild) { + doCreateOrUpdateEl( + api, + el.childAt(index), + dataIndex, + newChild as CustomElementOption, + seriesModel, + el + ); + } + else { + // The element is being null after updating, remove the old element + el.remove(el.childAt(index)); + } } for (let i = el.childCount() - 1; i >= index; i--) { // Do not support leave elements that are not mentioned in the latest diff --git a/test/custom-update.html b/test/custom-update.html new file mode 100644 index 000000000..ca91a3cc9 --- /dev/null +++ b/test/custom-update.html @@ -0,0 +1,181 @@ +<!DOCTYPE html> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + + +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="lib/simpleRequire.js"></script> + <script src="lib/config.js"></script> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <!-- <script src="ut/lib/canteen.js"></script> --> + <link rel="stylesheet" href="lib/reset.css" /> + </head> + <body> + <style> + </style> + + + + <div id="main0"></div> + + + + + + + <script> + require([ + 'echarts', + // 'map/js/china', + // './data/nutrients.json' + ], function (echarts) { + var option; + var cellSize = [50, 51]; + var isFirst = true; + + option = { + calendar: [ + { + orient: 'vertical', + cellSize: cellSize, + yearLabel: { + show: false + }, + monthLabel: { + show: false + }, + range: ['2022-1'] + } + ], + series: [ + { + type: 'custom', + universalTransition: { + enabled: false + }, + name: 'a', + coordinateSystem: 'calendar', + animation: 0, + data: [ + ['2022-01-16', 'e', false] + ], + renderItem: (params, api) => { + const date = api.value(0); + const cellPoint = api.coord(date); + const xPos = cellPoint[0] - cellSize[0] / 2; + const yPos = cellPoint[1] - cellSize[1] / 2; + const name = api.value(1); + const cellWidth = params.coordSys.cellWidth; + const position = [xPos, yPos]; + const rect = { + type: 'rect', + shape: { + x: 0, + y: 0, + width: cellWidth, + height: 15 + }, + position, + style: { + fill: isFirst ? '#eee' : '#6ee' + }, + textContent: { + style: { + text: name, + fill: '#888', + overflow: 'truncate', + width: cellWidth, + height: 13, + y: 1 + } + }, + textConfig: { + position: 'insideLeft', + distance: 2 + } + }; + + const borderLeft = api.value(2) + ? null + : { + type: 'rect', + shape: { + x: -20, + y: 0, + width: 20, + height: 15 + }, + position, + style: { + fill: 'red' + } + }; + + const group = { + type: 'group', + children: [rect, borderLeft] + }; + return group; + }, + silent: true, + z: 2, + legendHoverLink: true, + clip: false, + label: {}, + emphasis: { label: {} } + } + ] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + 'The red bar should not be rendered after "Update"' + ], + option: option, + // height: 300, + buttons: [{text: 'Update', onclick: function () { + isFirst = false; + chart.setOption({ + calendar: { + range: ['2022-02'] + }, + series: [ + { + type: 'custom', + name: 'a', + data: [ + ['2022-02-13', 'e', true] + ] + } + ] + }); + }}], + // recordCanvas: true, + }); + }); + </script> + + + </body> +</html> diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index baadde980..69339014d 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -63,6 +63,7 @@ "custom-large": 1, "custom-shape-morphing": 1, "custom-text-content": 6, + "custom-update": 1, "dataSelect": 7, "dataset-case": 6, "dataZoom-action": 4, diff --git a/test/runTest/actions/custom-update.json b/test/runTest/actions/custom-update.json new file mode 100644 index 000000000..bfc1d94cb --- /dev/null +++ b/test/runTest/actions/custom-update.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":420,"x":14,"y":161},{"type":"mousemove","time":620,"x":27,"y":69},{"type":"mousemove","time":825,"x":28,"y":53},{"type":"mousemove","time":1036,"x":37,"y":74},{"type":"mousedown","time":1162,"x":37,"y":76},{"type":"mousemove","time":1237,"x":37,"y":76},{"type":"mouseup","time":1311,"x":37,"y":76},{"time":1312,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1657531346385}] \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
