From f96118d5388469edae7ef274e2ecb2a7b6ba9897 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 11:19:03 -0500 Subject: [PATCH 01/10] Use contentBoxSize --- src/hooks/useGridDimensions.ts | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index 507b282617..d5edc0d318 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -7,8 +7,8 @@ export function useGridDimensions(): [ height: number ] { const gridRef = useRef(null); - const [gridWidth, setGridWidth] = useState(1); - const [gridHeight, setGridHeight] = useState(1); + const [inlineSize, setInlineSize] = useState(1); + const [blockSize, setBlockSize] = useState(1); useLayoutEffect(() => { const { ResizeObserver } = window; @@ -17,20 +17,18 @@ export function useGridDimensions(): [ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (ResizeObserver == null) return; - function saveDimensions() { - // Get dimensions without scrollbars. - // The dimensions given by the callback entries in Firefox do not substract the scrollbar sizes. - // https://bugzilla.mozilla.org/show_bug.cgi?id=1733042 - const { clientWidth, clientHeight } = gridRef.current!; + const { clientWidth, clientHeight } = gridRef.current!; + setInlineSize(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1)); + setBlockSize(clientHeight); + + const resizeObserver = new ResizeObserver((entries) => { + const size = entries[0].contentBoxSize[0]; // TODO: remove once fixed upstream // we reduce width by 1px here to avoid layout issues in Chrome // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298 - setGridWidth(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1)); - setGridHeight(clientHeight); - } - - saveDimensions(); - const resizeObserver = new ResizeObserver(saveDimensions); + setInlineSize(size.inlineSize - (devicePixelRatio % 1 === 0 ? 0 : 1)); + setBlockSize(size.blockSize); + }); resizeObserver.observe(gridRef.current!); return () => { @@ -38,5 +36,5 @@ export function useGridDimensions(): [ }; }, []); - return [gridRef, gridWidth, gridHeight]; + return [gridRef, inlineSize, blockSize]; } From 97d925fabcb00b93e9ba4ccadd0aa7899a181de0 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 11:24:53 -0500 Subject: [PATCH 02/10] Remove logic to set initial dimensions --- src/hooks/useGridDimensions.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index d5edc0d318..ac256e6982 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -17,10 +17,6 @@ export function useGridDimensions(): [ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (ResizeObserver == null) return; - const { clientWidth, clientHeight } = gridRef.current!; - setInlineSize(clientWidth - (devicePixelRatio % 1 === 0 ? 0 : 1)); - setBlockSize(clientHeight); - const resizeObserver = new ResizeObserver((entries) => { const size = entries[0].contentBoxSize[0]; // TODO: remove once fixed upstream From e460874c44cbd1ce6131c38029f7fd36d313954e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 11:49:13 -0500 Subject: [PATCH 03/10] Fix tests --- test/setup.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/setup.ts b/test/setup.ts index cca0fa5f6f..9538b20c3a 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -9,7 +9,9 @@ if (typeof window !== 'undefined') { } observe() { - this.callback([], this); + // patch inlineSize/blockSize to pretend we're rendering DataGrid at 1920p/1080p + // @ts-expect-error + this.callback([{ contentBoxSize: [{ inlineSize: 1920, blockSize: 1080 }] }], this); } unobserve() {} From 5ff7b04e5cf961af9692db80fa4b061361034866 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:23:26 -0500 Subject: [PATCH 04/10] Set width early --- src/hooks/useGridDimensions.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index ac256e6982..2f0fd138c6 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -17,12 +17,16 @@ export function useGridDimensions(): [ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (ResizeObserver == null) return; + const { clientWidth, clientHeight } = gridRef.current!; + setInlineSize(handleDevicePixelRatio(clientWidth)); + setBlockSize(clientHeight); + const resizeObserver = new ResizeObserver((entries) => { const size = entries[0].contentBoxSize[0]; // TODO: remove once fixed upstream // we reduce width by 1px here to avoid layout issues in Chrome // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298 - setInlineSize(size.inlineSize - (devicePixelRatio % 1 === 0 ? 0 : 1)); + setInlineSize(handleDevicePixelRatio(size.inlineSize)); setBlockSize(size.blockSize); }); resizeObserver.observe(gridRef.current!); @@ -34,3 +38,10 @@ export function useGridDimensions(): [ return [gridRef, inlineSize, blockSize]; } + +// TODO: remove once fixed upstream +// we reduce width by 1px here to avoid layout issues in Chrome +// https://bugs.chromium.org/p/chromium/issues/detail?id=1206298 +function handleDevicePixelRatio(size: number) { + return size - (devicePixelRatio % 1 === 0 ? 0 : 1); +} From 00f17e08b0552845d8915700935a26024336399d Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:44:18 -0500 Subject: [PATCH 05/10] Correctly set initial value --- src/hooks/useGridDimensions.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index 2f0fd138c6..3ec27ddb13 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -17,9 +17,13 @@ export function useGridDimensions(): [ // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition if (ResizeObserver == null) return; - const { clientWidth, clientHeight } = gridRef.current!; - setInlineSize(handleDevicePixelRatio(clientWidth)); - setBlockSize(clientHeight); + const { clientWidth, clientHeight, offsetWidth, offsetHeight } = gridRef.current!; + const { width, height } = gridRef.current!.getBoundingClientRect(); + const initialWidth = width - offsetWidth + clientWidth; + const initialHeight = height - offsetHeight + clientHeight; + + setInlineSize(handleDevicePixelRatio(initialWidth)); + setBlockSize(initialHeight); const resizeObserver = new ResizeObserver((entries) => { const size = entries[0].contentBoxSize[0]; From ec3d886b55c7ada44bf463b0bc11ac6542dbce0d Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:53:15 -0500 Subject: [PATCH 06/10] Update src/hooks/useGridDimensions.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- src/hooks/useGridDimensions.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index 3ec27ddb13..b01ec9f578 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -27,9 +27,6 @@ export function useGridDimensions(): [ const resizeObserver = new ResizeObserver((entries) => { const size = entries[0].contentBoxSize[0]; - // TODO: remove once fixed upstream - // we reduce width by 1px here to avoid layout issues in Chrome - // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298 setInlineSize(handleDevicePixelRatio(size.inlineSize)); setBlockSize(size.blockSize); }); From 1b4bd77e4e5552ba83cb026447e904dea46bf767 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:53:35 -0500 Subject: [PATCH 07/10] Update src/hooks/useGridDimensions.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- src/hooks/useGridDimensions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index b01ec9f578..36941947f1 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -44,5 +44,5 @@ export function useGridDimensions(): [ // we reduce width by 1px here to avoid layout issues in Chrome // https://bugs.chromium.org/p/chromium/issues/detail?id=1206298 function handleDevicePixelRatio(size: number) { - return size - (devicePixelRatio % 1 === 0 ? 0 : 1); + return size - (devicePixelRatio === 1 ? 0 : ceil(devicePixelRatio)); } From e7754ec92ca8dd7a45d01ae8982f7fba21a9855d Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:56:29 -0500 Subject: [PATCH 08/10] Import ceil --- src/hooks/useGridDimensions.ts | 2 ++ src/utils/index.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts index 36941947f1..749ba42004 100644 --- a/src/hooks/useGridDimensions.ts +++ b/src/hooks/useGridDimensions.ts @@ -1,6 +1,8 @@ import { useRef, useState } from 'react'; import { useLayoutEffect } from './useLayoutEffect'; +import { ceil } from '../utils'; + export function useGridDimensions(): [ ref: React.RefObject, width: number, diff --git a/src/utils/index.ts b/src/utils/index.ts index a532f85fd5..0b16258fbb 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -6,7 +6,7 @@ export * from './keyboardUtils'; export * from './selectedCellUtils'; export * from './styleUtils'; -export const { min, max, round, floor, sign, abs } = Math; +export const { min, max, round, floor, sign, abs, ceil } = Math; export function assertIsValidKeyGetter( keyGetter: unknown From 8b92d6dfc98a93e2dc1ddd20d0ea2e9460c43613 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:56:51 -0500 Subject: [PATCH 09/10] Revert --- test/setup.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/setup.ts b/test/setup.ts index 9538b20c3a..cca0fa5f6f 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -9,9 +9,7 @@ if (typeof window !== 'undefined') { } observe() { - // patch inlineSize/blockSize to pretend we're rendering DataGrid at 1920p/1080p - // @ts-expect-error - this.callback([{ contentBoxSize: [{ inlineSize: 1920, blockSize: 1080 }] }], this); + this.callback([], this); } unobserve() {} From 046475c3f1c706aa1c84e6a7cfacf30c2ec87559 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 6 Apr 2022 12:59:45 -0500 Subject: [PATCH 10/10] Add back mock contentBoxSize --- test/setup.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/test/setup.ts b/test/setup.ts index cca0fa5f6f..9538b20c3a 100644 --- a/test/setup.ts +++ b/test/setup.ts @@ -9,7 +9,9 @@ if (typeof window !== 'undefined') { } observe() { - this.callback([], this); + // patch inlineSize/blockSize to pretend we're rendering DataGrid at 1920p/1080p + // @ts-expect-error + this.callback([{ contentBoxSize: [{ inlineSize: 1920, blockSize: 1080 }] }], this); } unobserve() {}