Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances VRender’s background image rendering to support more flexible layout behavior (sizing + positioning), and wires those options through stage/group/text/background rendering paths. It also adds a browser demo page and Jest coverage around the new layout behavior.
Changes:
- Add shared background image layout utilities (
backgroundSizing,backgroundPosition) and route multiple renderers through them. - Extend public types/defaults to expose
BackgroundSizingandBackgroundPosition. - Add demo + unit tests validating cover/contain/fill/auto and positioning behavior.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/vrender/tests/browser/src/pages/index.ts | Adds a new browser demo entry for background layout. |
| packages/vrender/tests/browser/src/pages/background.ts | New browser demo page showcasing sizing/position/clip across stage/group/text. |
| packages/vrender-core/src/render/contributions/render/draw-contribution.ts | Stage clear-screen path now uses shared background image drawing logic. |
| packages/vrender-core/src/render/contributions/render/contributions/text-contribution-render.ts | Text background rendering now supports sizing/positioning + clip/opacity handling for images. |
| packages/vrender-core/src/render/contributions/render/contributions/group-contribution-render.ts | Group background rendering now forwards sizing/positioning/opacity + unwraps background resource keys. |
| packages/vrender-core/src/render/contributions/render/contributions/base-contribution-render.ts | Introduces drawBackgroundImage, sizing/position resolution, and getBackgroundImage helper. |
| packages/vrender-core/src/interface/stage.ts | Expands stage background typing to accept IGraphicAttribute['background']. |
| packages/vrender-core/src/interface/render.ts | Expands render clear typing to accept IGraphicAttribute['background']. |
| packages/vrender-core/src/interface/layer.ts | Aligns layer background typing with IGraphicAttribute['background']. |
| packages/vrender-core/src/interface/graphic.ts | Adds BackgroundSizing/BackgroundPosition public types + docs. |
| packages/vrender-core/src/graphic/graphic.ts | Unwraps wrapped background.background when loading background images. |
| packages/vrender-core/src/graphic/config.ts | Adds defaults for backgroundSizing and backgroundPosition. |
| packages/vrender-core/src/core/stage.ts | Stage background typing updated; background image loading behavior adjusted. |
| packages/vrender-core/src/core/layer.ts | Fixes layer background declaration type. |
| packages/vrender-core/tests/background/background-image-layout.test.ts | Adds unit tests for sizing/position behavior + renderer parameter forwarding. |
| common/changes/@visactor/vrender/feat-enhance-background_2026-03-31-08-53.json | Changeset entry. |
| common/changes/@visactor/vrender-core/feat-enhance-background_2026-03-31-08-53.json | Changeset entry. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/vrender-core/src/render/contributions/render/draw-contribution.ts
Show resolved
Hide resolved
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
xuefei1313
approved these changes
Mar 31, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
...ages/vrender-core/src/render/contributions/render/contributions/group-contribution-render.ts
Show resolved
Hide resolved
packages/vrender-core/src/render/contributions/render/contributions/text-contribution-render.ts
Show resolved
Hide resolved
packages/vrender-core/src/render/contributions/render/contributions/base-contribution-render.ts
Show resolved
Hide resolved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
🐞 Bugserver case id
💡 Background and solution
📝 Changelog
☑️ Self-Check before Merge
🚀 Summary
copilot:summary
🔍 Walkthrough
copilot:walkthrough