From 25276ad3ec68f10645e018778bf26086adb5f566 Mon Sep 17 00:00:00 2001 From: Hernan Torrisi Date: Tue, 28 May 2024 15:57:45 -0700 Subject: [PATCH 1/2] use getBoundingClientRect to account for decimals in container size --- src/hooks/useResizeCanvas.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/hooks/useResizeCanvas.ts b/src/hooks/useResizeCanvas.ts index 1151577..5aa6ff7 100644 --- a/src/hooks/useResizeCanvas.ts +++ b/src/hooks/useResizeCanvas.ts @@ -95,8 +95,9 @@ export default function useResizeCanvas({ const { maxX, maxY } = artboardBounds ?? {}; const getContainerDimensions = useCallback(() => { - const width = containerRef.current?.clientWidth ?? 0; - const height = containerRef.current?.clientHeight ?? 0; + const boundingBox = containerRef.current?.getBoundingClientRect(); + const width = Math.ceil(boundingBox?.width ?? 0); + const height = Math.ceil(boundingBox?.height ?? 0); if (fitCanvasToArtboardHeight && artboardBounds) { const { maxY, maxX } = artboardBounds; return { width, height: width * (maxY / maxX) }; From 45dacb646dd5e666ad9752061a6918e6ff268daf Mon Sep 17 00:00:00 2001 From: Hernan Torrisi Date: Tue, 28 May 2024 16:15:12 -0700 Subject: [PATCH 2/2] fix test --- test/useRive.test.tsx | 51 +++++++++++++++++++++++++++++-------------- 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/test/useRive.test.tsx b/test/useRive.test.tsx index f342420..01ea7e9 100644 --- a/test/useRive.test.tsx +++ b/test/useRive.test.tsx @@ -31,6 +31,17 @@ jest.mock('@rive-app/canvas', () => ({ describe('useRive', () => { let controlledRiveloadCb: () => void; let baseRiveMock: Partial; + const mockBoundingBox = { + width: 100, + height: 100, + x: 0, + top: 0, + y: 0, + bottom: 100, + left: 0, + right: 100, + toJSON: () => '', + }; beforeEach(() => { baseRiveMock = { @@ -162,8 +173,9 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params)); @@ -200,8 +212,9 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params, { customDevicePixelRatio: 1 }) @@ -241,8 +254,9 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params, opts)); @@ -284,8 +298,9 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params, opts)); @@ -468,8 +483,9 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params)); @@ -500,16 +516,18 @@ describe('useRive', () => { const canvasSpy = document.createElement('canvas'); const containerSpy = document.createElement('div'); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(100); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(100); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue(mockBoundingBox); const { result } = renderHook(() => useRive(params)); await act(async () => { result.current.setCanvasRef(canvasSpy); result.current.setContainerRef(containerSpy); - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(200); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(200); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue({...mockBoundingBox, width: 200, height: 200}); }); await waitFor(() => { expect(result.current.canvas).toBe(canvasSpy); @@ -559,8 +577,9 @@ describe('useRive', () => { }); await act(async () => { - jest.spyOn(containerSpy, 'clientWidth', 'get').mockReturnValue(500); - jest.spyOn(containerSpy, 'clientHeight', 'get').mockReturnValue(500); + jest + .spyOn(containerSpy, 'getBoundingClientRect') + .mockReturnValue({...mockBoundingBox, width: 500, height: 500}); containerSpy.dispatchEvent(new Event('resize')); });