fix: multiple canvas rendering errors

[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

💡 Background and solution

In #2031, during the code refactoring process, the state related to the canvas instance was maintained in a global singleton, which caused rendering errors in scenarios with multiple canvas instances.

Now, state is maintained on the element instance to avoid state chaos between multiple canvas instances.

📝 Changelog

Language	Changelog
🇺🇸 English	fix: multiple canvas rendering errors
🇨🇳 Chinese	fix: 多 canvas 渲染异常

☑️ 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

[changeset-bot]

🦋 Changeset detected

Latest commit: de5a6de

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 47 packages

Name	Type
@antv/g-plugin-device-renderer	Minor
@antv/g-lite	Minor
@antv/g	Minor
@antv/g-plugin-a11y	Minor
@antv/g-plugin-canvas-picker	Minor
@antv/g-plugin-canvas-renderer	Minor
@antv/g-plugin-canvaskit-renderer	Minor
@antv/g-plugin-html-renderer	Minor
@antv/g-plugin-image-loader	Minor
@antv/g-plugin-svg-renderer	Minor
@antv/g-plugin-yoga	Minor
@antv/g-mobile-webgl	Patch
@antv/g-plugin-3d	Patch
@antv/g-webgl	Patch
@antv/g-webgpu	Patch
@antv/g-camera-api	Patch
@antv/g-canvas	Patch
@antv/g-canvaskit	Patch
@antv/g-components	Patch
@antv/g-dom-mutation-observer-api	Patch
@antv/g-gesture	Patch
@antv/g-image-exporter	Patch
@antv/g-lottie-player	Patch
@antv/g-mobile-canvas-element	Patch
@antv/g-mobile-canvas	Patch
@antv/g-mobile-svg	Patch
@antv/g-pattern	Patch
@antv/g-plugin-annotation	Patch
@antv/g-plugin-box2d	Patch
@antv/g-plugin-canvas-path-generator	Patch
@antv/g-plugin-control	Patch
@antv/g-plugin-css-select	Patch
@antv/g-plugin-dom-interaction	Patch
@antv/g-plugin-dragndrop	Patch
@antv/g-plugin-gesture	Patch
@antv/g-plugin-matterjs	Patch
@antv/g-plugin-mobile-interaction	Patch
@antv/g-plugin-physx	Patch
@antv/g-plugin-rough-canvas-renderer	Patch
@antv/g-plugin-rough-svg-renderer	Patch
@antv/g-plugin-svg-picker	Patch
@antv/g-plugin-zdog-canvas-renderer	Patch
@antv/g-plugin-zdog-svg-renderer	Patch
@antv/g-svg	Patch
@antv/g-web-animations-api	Patch
@antv/g-web-components	Patch
@antv/react-g	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gemini-code-assist]

Summary of Changes

Hello @wang1212, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves critical rendering issues that arose in multi-canvas environments due to improper global state management. It refactors the internal state handling mechanism by associating mutation records directly with individual canvas elements rather than a shared global service, ensuring isolated and correct rendering behavior across multiple canvas instances. Additionally, the PR includes updates to test case naming conventions and introduces a new comprehensive demo for the HTML rendering plugin.

Highlights

• Fix for Multiple Canvas Rendering Errors: Addressed an issue where a global singleton maintained canvas instance state, leading to rendering errors when multiple canvas instances were present.
• Refactored State Management: Moved canvas-related state management from a global singleton to individual element instances by introducing a mutations property directly on the Node class.
• Updated Scene Graph Service: Modified the SceneGraphService to store and retrieve mutation records directly from Node instances, eliminating the need for a global mutationsMap and its associated clearMutationObserverData method.
• Test Case Renaming: Renamed several test and demo functions across various files (e.g., html to issue_1610_html, image to issue_1636_image, circle to event_circle) for improved clarity and to prevent naming conflicts.
• New HTML Renderer Demo: Introduced a new comprehensive demo (html-renderer.ts) showcasing the capabilities of the HTML rendering plugin, including basic elements, styled elements, animations, event handling, and form elements within the canvas.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively addresses a bug causing rendering errors in multi-canvas scenarios by refactoring state management from a global singleton to per-element instances. The core logic changes in SceneGraphService are sound and directly solve the described problem. The accompanying updates to test files, including renaming for clarity and adding a new comprehensive test case for the HTML renderer, are also good additions. I have one suggestion to improve the robustness of the new mutation handling logic for future extensions.