You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2022/07/11 09:30:45 UTC
[echarts] 01/01: fix(custom): fix elements may not be removed after updates #17333
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 <zw...@gmail.com>
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: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org