-
Notifications
You must be signed in to change notification settings - Fork 53
Description
Title:
Fit.Layout doesn't reflow layout-constrained elements in canvas-lite — elements render at top-left instead of
anchored position
Description:
When using @rive-app/react-canvas-lite with Fit.Layout, elements that use Rive Layout constraints (e.g.
pinned to bottom-left) are not reflowed correctly. They render at the top-left of the canvas instead of their
anchored position. The exact same .riv file works correctly with @rive-app/react-canvas (full runtime).
Environment:
- @rive-app/canvas-lite: 2.35.0 (also reproduced on 2.34.3)
- @rive-app/react-canvas-lite: 4.27.0
- Works correctly with: @rive-app/react-canvas@4.26.2 + @rive-app/canvas@2.34.2
- Browser: Chrome / Safari on macOS
Artboard info (from rive.bounds and rive.layout?.layoutScaleFactor):
layoutScaleFactor: 1
bounds: { minX: 0, minY: 0, maxX: 1512, maxY: 798 }
Canvas at runtime: correctly fills the viewport. The canvas
sizing itself is fine — the bug is purely the position of elements within the canvas.
Code:
const { rive, RiveComponent } = useRive({
src: animationUrl,
stateMachines: 'Training Machine',
layout: new Layout({ fit: Fit.Layout }),
});
return (
<div style={{ position: 'fixed', inset: 0 }}>
<RiveComponent />
</div>
);
Expected: elements pinned to bottom-left via Rive Layout constraints render at the bottom-left of the canvas
(as they do with react-canvas).
Actual: elements render at the top-left of the canvas regardless of their layout constraints.