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

src/chart/custom/CustomView.ts

@@ -99,6 +99,7 @@ import {
     applyKeyframeAnimation,
     stopPreviousKeyframeAnimationAndRestore
 } from '../../animation/customGraphicKeyframeAnimation';
+import { SeriesModel } from '../../echarts.all';
 
 const EMPHASIS = 'emphasis' as const;
 const NORMAL = 'normal' as const;
@@ -1264,16 +1265,21 @@ function retrieveStyleOptionOnState(
 
 
 // Usage:
-// (1) By default, `elOption.$mergeChildren` is `'byIndex'`, which indicates that
-//     the existing children will not be removed, and enables the feature that
-//     update some of the props of some of the children simply by construct
+// (1) By default, `elOption.$mergeChildren` is `'byIndex'`, which indicates
+//     that the existing children will not be removed, and enables the feature
+//     that update some of the props of some of the children simply by construct
 //     the returned children of `renderItem` like:
 //     `var children = group.children = []; children[3] = {opacity: 0.5};`
 // (2) If `elOption.$mergeChildren` is `'byName'`, add/update/remove children
 //     by child.name. But that might be lower performance.
 // (3) If `elOption.$mergeChildren` is `false`, the existing children will be
 //     replaced totally.
-// (4) If `!elOption.children`, following the "merge" principle, nothing will happen.
+// (4) If `!elOption.children`, following the "merge" principle, nothing will
+//     happen.
+// (5) If `elOption.$mergeChildren` is not `false` neither `'byName'` and the
+//     `el` is a group, and if any of the new child is null, it means to remove
+//     the element at the same index, if exists. On the other hand, if the new
+//     child is and empty object `{}`, it means to keep the element not changed.
 //
 // For implementation simpleness, do not provide a direct way to remove sinlge
 // child (otherwise the total indicies of the children array have to be modified).
@@ -1316,24 +1322,52 @@ 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];
+        const oldChild = el.childAt(index);
+        if (newChild) {
+            if (newChild.ignore == null) {
+                // The old child is set to be ignored if null (see comments
+                // below). So we need to set ignore to be false back.
+                newChild.ignore = false;
+            }
+            doCreateOrUpdateEl(
+                api,
+                oldChild,
+                dataIndex,
+                newChild as CustomElementOption,
+                seriesModel,
+                el
+            );
+        }
+        else {
+            // If the new element option is null, it means to remove the old
+            // element. But we cannot really remove the element from the group
+            // directly, because the element order may not be stable when this
+            // element is added back. So we set the element to be ignored.
+            oldChild.ignore = true;
+        }
     }
     for (let i = el.childCount() - 1; i >= index; i--) {
-        // Do not support leave elements that are not mentioned in the latest
-        // `renderItem` return. Otherwise users may not have a clear and simple
-        // concept that how to control all of the elements.
         const child = el.childAt(i);
-        child && applyLeaveTransition(child, customInnerStore(el).option, seriesModel);
+        removeChildFromGroup(el, child, seriesModel);
     }
 }
 
+function removeChildFromGroup(
+    group: graphicUtil.Group,
+    child: Element,
+    seriesModel: SeriesModel
+) {
+    // Do not support leave elements that are not mentioned in the latest
+    // `renderItem` return. Otherwise users may not have a clear and simple
+    // concept that how to control all of the elements.
+    child && applyLeaveTransition(
+        child,
+        customInnerStore(group).option,
+        seriesModel
+    );
+}
+
 type DiffGroupContext = {
     api: ExtensionAPI;
     oldChildren: Element[];