fix: Keep Element layout props and convert Element colors

[willeastcott]

<Element> in 0.11.5 cannot size an image element or take a color string, which makes in-canvas UI in React unreliable beyond auto-sized text. Found while rewriting the User Interface chapter of the User Manual, whose React examples depend on this.

Layout props. <Element> validated its props with validatePropsWithDefaults and applied every prop of its schema on each render, in the order of the engine's setters. The defaults of the props that were not given include margin and its left/bottom/right/top aliases, which come after height, so they overwrote the element's rectangle on every render:

Props	Result before	After
anchor={[0.5, 0.5, 0.5, 0.5]} width={200} height={100}	200 × 82	200 × 100
anchor={[0, 0, 1, 1]} margin={[20, 20, 20, 20]} in a 400 × 300 parent	412 × 214	360 × 260
anchor={[0, 1, 1, 1]} margin={[0, 0, 0, 0]} height={50} in a 400 × 300 parent	432 × 82	400 × 50

It now uses validatePropsPartial, as Camera, Collision and Render do, and applies type first and anchor, pivot and the margins before width and height, which is the order the engine applies them in. Applying type first also means props like color reach the image or text even when they are written before type.

Colors. The schema was built from a group element, whose color, outlineColor and shadowColor are null, so a color given as "#ff8000" or [1, 0.5, 0] was assigned as it was and the element's color became NaN (it rendered black). The schema is now built from a text element, so those props get the color schema, and the color schema also accepts Color objects (the one form that happened to work before) and four-component arrays.

<Screen scaleMode> only allowed "blend", "stretch" and "fit", so the engine's "none" was replaced by the "blend" default. It now allows "blend" and "none", the engine's two modes; "stretch" and "fit" never existed in the engine, which turns unknown values into "none".

Tests: seven new Element tests (point-anchored size, split-anchor margins, size after a re-render, hex, array and Color colors, outline and shadow colors, type applied first), all failing before the change, and a Screen test for scaleMode="none". Also checked in Chrome with engine 2.22.4: images, stretched panels and top bars keep their sizes and colors, and positioned labels stay where they are.

A changeset is included (patch).

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 821421e

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

This PR includes changesets to release 2 packages

Name	Type
@playcanvas/react	Patch
@playcanvas/blocks	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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@playcanvas/blocks@352

npm i https://pkg.pr.new/@playcanvas/react@352

commit: 821421e