fix(custom): fix crash when removing an element with leaveTo

[vicuts]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Save the element option on custom series elements, so that removing an element that has leaveTo no longer throws.

Fixed issues

• close [Bug] custom series NPE when removing element if transition animation is specified #18402

Details

Before: What was the problem?

When a custom series element that has leaveTo is removed, the chart throws. This happens when setOption is called with fewer data items, and also when a group returned by renderItem gets fewer children:

TypeError: Cannot read properties of undefined (reading 'updateAnimation')
    at getElementAnimationConfig (src/animation/customGraphicTransition.ts:124)
    at applyLeaveTransition (src/animation/customGraphicTransition.ts:240)

CustomView passes customInnerStore(el).option to applyLeaveTransition in three places:

• removed data items in render
• extra children of a group in removeChildFromGroup (it passes the option of the parent group)
• removed children in processRemove, when $mergeChildren: 'byName' is used

But customInnerStore(el).option is never assigned, so it is always undefined. Elements without leaveTo are not affected, because applyLeaveTransition only reads the option when there is a leave animation to play. These reads came in 5.3.0, when the transition code of the custom series moved to customGraphicTransition.ts. In 5.2.x the leave animation did not need the element option.

After: How does it behave after the fixing?

doCreateOrUpdateEl now saves the option with customInnerStore(el).option = elOption;, right after info is saved. This line runs for every element: new or reused, at the root or inside a group. It also runs before mergeChildren, so a group already has its option when removeChildFromGroup reads it. Removed elements now play their leaveTo animation and are taken out of the group when it ends.

#18075 had the same idea and set the option in createEl. It was closed as stale, and the test case asked for in its review was never added. This PR sets the option in doCreateOrUpdateEl instead, so the saved option is also refreshed when an existing element is updated, and it adds unit tests. As explained in the review of #18075, the leave transition still uses the update animation config. This PR does not change that.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

New unit tests in test/ut/spec/series/custom.test.ts, one for each of the three places above:

• a data item rect with leaveTo (the setup from the issue): one element is removed right after it was created, and the other is removed after it was updated
• a group child with leaveTo, with children merged by index
• a group child with leaveTo, with $mergeChildren: 'byName'

Each test checks that setOption does not throw and that the removed elements are gone once the leave animation has ended. Without the fix, all three tests fail with the TypeError above.

Checks run locally:

• npm run test: 33 test suites, 229 tests passed
• npm run lint: no errors
• npm run checktype: no errors
• npm run checkheader: passed

Merging options

• Please squash the commits into a single one when merging.

Other information

None.

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.