nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +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

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

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