import { useRef , useEffect } from 'react' ; import { useIdeContext } from './useIdeContext' ; import { requestRender } from './useIdeState' ; export const use3dViewerResize = ( ) => { const viewerDomRef = useRef ( null ) ; const debounceTimeoutId = useRef < number > ( ) ; const { thunkDispatch } = useIdeContext ( ) ; useEffect ( handleViewerSizeUpdate , [ viewerDomRef ] ) ; function handleViewerSizeUpdate ( ) { if ( viewerDomRef !== null && viewerDomRef . current ) { const { width , height } = viewerDomRef . current . getBoundingClientRect ( ) ; thunkDispatch ( { type : 'updateViewerSize' , payload : { viewerSize : { width , height } } , } ) ; thunkDispatch ( ( dispatch , getState ) => { const state = getState ( ) ; if ( state . objectData ?. type === 'png' ) { dispatch ( { type : 'setLoading' } ) ; requestRender ( { state , dispatch , viewerSize : { width , height } , viewAll : state . objectData ?. type === 'INIT' , } ) ; } } ) ; } } const debouncedViewerSizeUpdate = ( ) => { clearTimeout ( debounceTimeoutId . current ) ; debounceTimeoutId . current = setTimeout ( ( ) => { handleViewerSizeUpdate ( ) ; } , 1000 ) as unknown as number ; } ; useEffect ( ( ) => { window . addEventListener ( 'resize' , debouncedViewerSizeUpdate ) ; return ( ) => { window . removeEventListener ( 'resize' , debouncedViewerSizeUpdate ) ; } ; } , [ ] ) ; return { viewerDomRef , handleViewerSizeUpdate , } ; } ;