nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update RoomPreviewerView

Browse Source
This commit is contained in:
Bill 2021-09-24 01:38:45 -04:00
parent c1f73bebd0
commit fa0f8d5e8e
1 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/shared/room-previewer/RoomPreviewerView.tsx
View File

@ -6,9 +6,7 @@ import { RoomPreviewerViewProps } from './RoomPreviewerView.types';
export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props => export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
{ {
const { roomPreviewer = null, height = 0 } = props; const { roomPreviewer = null, height = 0 } = props;
const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null); const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
const elementRef = useRef<HTMLDivElement>(); const elementRef = useRef<HTMLDivElement>();
const update = useCallback((time: number) => const update = useCallback((time: number) =>
@ -41,9 +39,6 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
const canvas = roomPreviewer.getRenderingCanvas(); const canvas = roomPreviewer.getRenderingCanvas();
elementRef.current.style.width = `${ width }px`;
elementRef.current.style.height = `${ height }px`;
setRenderingCanvas(canvas); setRenderingCanvas(canvas);
canvas.canvasUpdated = true; canvas.canvasUpdated = true;
@ -59,34 +54,31 @@ export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
GetNitroInstance().ticker.add(update); GetNitroInstance().ticker.add(update);
function resize(): void const resizeObserver = new ResizeObserver(() =>
{ {
if(!roomPreviewer) return; if(!roomPreviewer || !elementRef.current) return;
const width = elementRef.current.parentElement.offsetWidth; const width = elementRef.current.parentElement.offsetWidth;
elementRef.current.style.width = `${ width }px`;
elementRef.current.style.height = `${ height }px`;
roomPreviewer.modifyRoomCanvas(width, height); roomPreviewer.modifyRoomCanvas(width, height);
update(-1); update(-1);
} });
window.addEventListener('resize', resize); resizeObserver.observe(elementRef.current);
return () => return () =>
{ {
GetNitroInstance().ticker.remove(update); resizeObserver.disconnect();
window.removeEventListener('resize', resize); GetNitroInstance().ticker.remove(update);
} }
}, [ renderingCanvas, roomPreviewer, elementRef, height, setupPreviewer, update ]); }, [ renderingCanvas, roomPreviewer, elementRef, height, setupPreviewer, update ]);
return ( return (
<div className="room-preview-container"> <div className="room-preview-container">
<div ref={ elementRef } className="room-preview-image" /> <div ref={ elementRef } className="room-preview-image" style={ { height } } />
{ props.children } { props.children }
</div> </div>
); );