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:44 UTC

[echarts] branch fix-17333 created (now bc4ee6c95)

This is an automated email from the ASF dual-hosted git repository.

ovilia pushed a change to branch fix-17333
in repository https://gitbox.apache.org/repos/asf/echarts.git


      at bc4ee6c95 fix(custom): fix elements may not be removed after updates #17333

This branch includes the following new commits:

     new bc4ee6c95 fix(custom): fix elements may not be removed after updates #17333

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org


[echarts] 01/01: fix(custom): fix elements may not be removed after updates #17333

Posted by ov...@apache.org.
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