From de4a753de9c083a4314a24ac117bbec1a54650ec Mon Sep 17 00:00:00 2001 From: Yuri Date: Sat, 13 Apr 2024 19:42:37 +0200 Subject: [PATCH] use use-resize-observer package --- packages/rmrk-2d-renderer/package.json | 3 +- .../src/lib/rmrk-2d-renderer.tsx | 31 +++---------------- pnpm-lock.yaml | 18 +++++++++++ 3 files changed, 25 insertions(+), 27 deletions(-) diff --git a/packages/rmrk-2d-renderer/package.json b/packages/rmrk-2d-renderer/package.json index 1b9119b..72ba7d9 100644 --- a/packages/rmrk-2d-renderer/package.json +++ b/packages/rmrk-2d-renderer/package.json @@ -54,7 +54,8 @@ "isomorphic-dompurify": "^2.2.0", "lucide-react": "^0.303.0", "pixi.js": "^7.2.4", - "use-image": "^1.1.1" + "use-image": "^1.1.1", + "use-resize-observer": "^9.1.0" }, "devDependencies": { "@changesets/changelog-github": "^0.5.0", diff --git a/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx b/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx index f58a38e..9e7a4f9 100644 --- a/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx +++ b/packages/rmrk-2d-renderer/src/lib/rmrk-2d-renderer.tsx @@ -12,27 +12,7 @@ import { css, cx } from 'styled-system/css'; import useImage from 'use-image'; import { Skeleton } from '../ui/skeleton.js'; import { INHERIT_RENDER_CONTEXT } from './consts.js'; - -const useObserveElementDimensions = (ref?: React.RefObject) => { - const [width, setWidth] = useState(0); - const [height, setHeight] = useState(0); - useEffect(() => { - const resizeObserver = new ResizeObserver((event) => { - // Depending on the layout, you may need to swap inlineSize with blockSize - // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentBoxSize - setWidth(event[0]?.contentBoxSize[0]?.inlineSize || 0); - setHeight(event[0]?.contentBoxSize[0]?.blockSize || 0); - }); - - if (ref?.current) { - resizeObserver.observe(ref.current); - } - }, [ref?.current]); - - const isLoading = width === 0 || height === 0; - - return { width, height, isLoading }; -}; +import useResizeObserver from 'use-resize-observer'; const useGetResourceDimensions = () => { const [w, setW] = useState(0); @@ -58,11 +38,10 @@ const useGetResourceDimensions = () => { }; const useGetCanvasStateDimensions = (ref?: React.RefObject) => { - const { - width, - height, - isLoading: isLoadingParentDimensions, - } = useObserveElementDimensions(ref); + const { width = 0, height = 0 } = useResizeObserver({ ref }); + + const isLoadingParentDimensions = width === 0 || height === 0; + const { onResourceLoad, isLoading: isLoadingResourceDimensions, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8dad6dc..33afdd5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -278,6 +278,9 @@ importers: use-image: specifier: ^1.1.1 version: 1.1.1(react-dom@18.2.0)(react@18.2.0) + use-resize-observer: + specifier: ^9.1.0 + version: 9.1.0(react-dom@18.2.0)(react@18.2.0) devDependencies: '@changesets/changelog-github': specifier: ^0.5.0 @@ -3139,6 +3142,10 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true + /@juggle/resize-observer@3.4.0: + resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} + dev: false + /@lit-labs/ssr-dom-shim@1.1.2: resolution: {integrity: sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==} @@ -13843,6 +13850,17 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==} + peerDependencies: + react: 16.8.0 - 18 + react-dom: 16.8.0 - 18 + dependencies: + '@juggle/resize-observer': 3.4.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /use-sidecar@1.1.2(@types/react@18.2.33)(react@18.2.0): resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'}