javascript/rive-react
1
0
Fork 0
mirror of https://github.com/rive-app/rive-react.git synced 2026-03-13 08:22:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

update canvas dimensions to use clientWidth and Height as opposed to BoundingClient, to avoid getting scaled information

Browse Source
This commit is contained in:
Maxwell Talbot
2022-07-14 13:08:11 +01:00
parent 45aec2db1c
commit fd1c00a995
2 changed files with 12 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/hooks/useRive.tsx
View File

@@ -104,8 +104,12 @@ export default function useRive(
* @returns Dimensions object.
*/
function getCanvasDimensions() {
const { width, height } =
containerRef.current?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0);
// getBoundingClientRect returns the scaled width and height
// this will result in double scaling
// https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
const width = containerRef.current?.clientWidth ?? 0;
const height = containerRef.current?.clientHeight ?? 0;
if (rive && options.fitCanvasToArtboardHeight) {
const { maxY, maxX } = rive.bounds;

18
test/useRive.test.tsx
View File

@@ -136,10 +136,8 @@ describe('useRive', () => {
const canvasSpy = document.createElement('canvas');
const containerSpy = document.createElement('div');
containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
width: 100,
height: 100,
}));
jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
const { result } = renderHook(() => useRive(params));
@@ -176,10 +174,8 @@ describe('useRive', () => {
const canvasSpy = document.createElement('canvas');
const containerSpy = document.createElement('div');
containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
width: 100,
height: 100,
}));
jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
const { result } = renderHook(() => useRive(params, opts));
@@ -216,10 +212,8 @@ describe('useRive', () => {
const canvasSpy = document.createElement('canvas');
const containerSpy = document.createElement('div');
containerSpy.getBoundingClientRect = jest.fn().mockImplementation(() => ({
width: 100,
height: 100,
}));
jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100);
jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100);
const { result } = renderHook(() => useRive(params, opts));