fix: element z-index sorting rendering abnormality

[wang1212]

🤔 This is a ...

• New feature
• Bug fix
• Site / Document optimization
• TypeScript definition update
• Refactoring
• Performance improvement
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

fixed #1910

💡 Background and solution

In the rendering process, in order to ensure the correct rendering order of child elements, we need to check whether there are child elements with z-index != 0. If so, we first sort them and save them to the sorted list for rendering. If not, we will directly render them in the childNodes list (that is, the order in which the elements are mounted).

There are 3 problems here:

1. In each frame rendering process, by updating the z-index of the element, if a parent element no longer has a child element with z-index != 0, the rendering list will be abnormal

To solve this problem, it is necessary to determine whether there is a child element with z-index != 0 after the child elements are sorted. If not, we will clear the sorted list to obtain the correct rendering list and order

2. If the parent element has both z-index == 0 and z-index != 0 child elements, since the sorted list has not been truly refreshed during the element mounting (needs to be triggered by calling render()), some elements do not appear in the sorted list in the end and cannot be rendered normally

To solve this problem, you only need to determine whether the sorted list is marked as dirty = true during the element mounting to ensure that the logic of the data processing process does not depend on the rendering result

3. If the element is unmounted and mounted multiple times before calling render(), the final sorted There will be multiple references to the same element in the list, which means that the same element will be rendered multiple times (for example, text elements will appear jagged)

When sorting sub-elements in each frame, we need to remove the sub-elements from the sorted list first, and then perform subsequent logical processing based on whether the element is mounted or unmounted. If it is a mounted sub-element, we will calculate the element's sorting index and insert it into the appropriate position in the sorted list again.

📝 Changelog

Language	Changelog
🇺🇸 English	fix: element z-index sorting rendering abnormality
🇨🇳 Chinese	fix: 元素 z-index 排序渲染异常

☑️ Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[petercat-assistant]

Walkthrough

This PR addresses a bug related to the rendering order of elements with different z-index values. It ensures that elements are sorted correctly based on their z-index during rendering, resolving issues where elements were rendered multiple times or in the wrong order.

Changes

Files	Summary
.changeset/sour-dogs-fly.md	Added changeset notes for patch updates to several packages.
tests/demos/bugfix/1910.ts	Added a test case to reproduce and verify the fix for issue #1910.
tests/demos/bugfix/index.ts	Exported the new test case for issue #1910.
packages/g-lite/src/services/RenderingService.ts	Modified rendering logic to handle z-index sorting and list management.
packages/g-lite/src/services/SceneGraphService.ts	Updated logic for detaching elements and managing sorted lists.
packages/g-plugin-canvas-renderer/src/CanvasRendererPlugin.ts	Adjusted rendering logic to use sorted lists when available.
packages/g-plugin-canvaskit-renderer/src/CanvaskitRendererPlugin.ts	Similar adjustments as in CanvasRendererPlugin for rendering logic.

[hustcc]

这个 PR 会有额外的性能开销吗?

[wang1212]

这个 PR 会有额外的性能开销吗?

不会