chore: [draft] ui default virtual screen + screen inset, ported to auth-server for scene testing - #1517
Draft
leanmendoza wants to merge 6 commits into
Draft
chore: [draft] ui default virtual screen + screen inset, ported to auth-server for scene testing#1517leanmendoza wants to merge 6 commits into
leanmendoza wants to merge 6 commits into
Conversation
(cherry picked from commit c0477f1)
(cherry picked from commit 2dab9fa)
(cherry picked from commit e43237f)
`uiScaleFactor` is now exactly the contain-fit of the design resolution inside the canvas, and `scaleOnDim` resolves 'Nvw'/'Nvh' and string `fontSize` to N% of the canvas dimension, as in CSS. devicePixelRatio is a density hint for picking a 1x/2x/3x asset, and each renderer computes it differently, so dividing by it made UI size inversely proportional to whichever value the scene happened to get. The field stays on PBUiCanvasInformation and `ScaleContext.ratio` stays in the public API. No renderer change is required. BREAKING CHANGE: scenes that set a virtual size and were calibrated against the current behaviour will render devicePixelRatio times larger. Scenes that pass no virtual size keep uiScaleFactor === 1 and are unaffected. (cherry picked from commit 2995d67) (cherry picked from commit 266483d)
Drawing under a notch, a status bar or a rounded corner is a bug in every scene that ships it, so the device safe area is now what a renderer gets when it doesn't ask for anything. Creators who do want the whole screen opt in with `screenInset: 'none'`, and `'interactable'` is still there for UI that must also clear the Explorer's native HUD. Both setUiRenderer and addUiRenderer default to it, each renderer still honoring its own value. Test suites that assert the UI tree hanging directly off the canvas root now pass the shared WHOLE_SCREEN option, so the wrapper entity stays covered in ui-renderer-screen-inset.spec.tsx and out of everyone else's assertions. BREAKING CHANGE: a scene that passes no screenInset now renders inside the device safe area instead of the whole screen, with one extra wrapper entity in the UI tree. (cherry picked from commit 96a0cea)
Deploying js-sdk-toolchain with
|
| Latest commit: |
7fcc349
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://97971aa6.js-sdk-toolchain.pages.dev |
| Branch Preview URL: | https://chore-ui-default-vscreen-ins.js-sdk-toolchain.pages.dev |
Contributor
Test this pull request
|
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
2 participants
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.
Draft — testing vehicle, not for merge as-is.
Port of #1489 (default virtual screen + default screen inset area) onto
auth-server, plus two follow-up changes, so we can publish an SDK build the studio scenes can actually consume and measure the blast radius on real experiences instead of estimating it from source.Why a branch off
auth-server10 of the 11 studio scenes we want to test pin an
auth-serverbuild, not a prod release:@dcl/sdk7.24.1^7.25.1-30310486734.commit-5ffe8737.24.6-29505165911.commit-d2704347.24.4-28592331167.commit-697ce9e7.23.4-26106700711.commit-2afa13b^7.23.2-25521226778.commit-18281007.21.1-22918726402.commit-ee210eeSo the path to those scenes is a build from this branch, not from
main.Contents
Cherry-picks of #1489's own commits, unchanged:
chore: ui renderer default virtual screencorrected mistaken file changefeat: screenInset property for ui rendererPlus two follow-ups also pushed to #1489:
fix(react-ecs): stop dividing UI layout by devicePixelRatio—uiScaleFactorbecomes exactly the contain-fit of the design resolution in the canvas, andscaleOnDimresolvesNvw/Nvhto N% of the canvas dimension, as in CSS. devicePixelRatio is a density hint each renderer computes differently, so dividing by it made UI size inversely proportional to whichever value the scene happened to get.feat(react-ecs): default screenInset to 'device'— a renderer that passes noscreenInsetnow lands in the device safe area.'none'opts back into the whole screen.#1489'srebuilt snapshotscommit is deliberately not cherry-picked: it also reverts 94 lines ofmain-specific lockfile churn. Snapshots are regenerated againstauth-serverhere instead.The UI feature code is byte-identical to #1489 — the only diffs against that branch are pre-existing
auth-servervsmaindifferences (auth-serverhas nouiInputBinding).Verification
Full clean cycle on this branch —
git clean -xdf && make install && make build && make test:Working tree clean after the rebuild, so the committed snapshots are exactly what a from-scratch build produces. No
ERR!lines intest/snapshots/.What we want to measure
Both follow-ups only bite where
devicePixelRatio != 1(mobile, Retina desktop) or wherescreenInsetAreais non-zero (notched devices), which is exactly what source review cannot settle. Highest-signal scenes:src/ui.tsxis calibrated explicitly against the olduiScaleFactor = canvasH/VIRTUAL_H/dpr, andsrc/client/safeArea.tsalready derives its own insets frominteractableAreaas fractions of the full canvas, so the device-inset wrapper compounds with it.width:'100%', height:'100%', absolute) is the clearest failure mode for the inset default.lobbyStoreUi.tsx:71-74) and is the only scene mixingvw/vhwith%.