Skip to content

Fix: Prevent canvas resolution resizing if user passes in resolution values on canvas - #116

Open
zplata wants to merge 2 commits into
mainfrom
zp/prevent-resize
Open

Fix: Prevent canvas resolution resizing if user passes in resolution values on canvas#116
zplata wants to merge 2 commits into
mainfrom
zp/prevent-resize

Conversation

@zplata

@zplata zplata commented Aug 2, 2022

Copy link
Copy Markdown
Collaborator

Addresses an issue where someone's setting of width/height on the RiveComponent from useRive doesn't get overridden (brought up in Discord).

This is setting data- attributes on the canvas for user-passed in values for width/height resolutions as an indicator for us to see whether or not to override the width/height with our devicePixelRatio logic. This is because from the internals of the hook, we can't tell what user passed-in props (i.e width and/or height) are set on the RiveComponent, but we can look into the ref of the canvas element to check for these attributes.

Definitely open to other ideas here; had to find a way to distinguish between us setting the width/height internally vs consumers setting it via props.

@zplata
zplata requested review from avivian and mjtalbot August 2, 2022 04:22
Comment thread src/hooks/useRive.tsx
if (!heightProp) {
canvasRef.current.height = dpr * height;
}
canvasRef.current.style.width = width + 'px';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we still set the style to these new widths / heights?

Comment thread src/hooks/useRive.tsx
@@ -130,18 +138,28 @@ export default function useRive(
const boundsChanged =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updateBounds be called at all if we have width & height fixed?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants