nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update RoomView

Browse Source
This commit is contained in:
Bill 2021-08-10 15:08:09 -04:00
parent 3b5974a67b
commit 63f41afe58
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/room/RoomView.tsx
View File

@ -1,6 +1,5 @@
import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer'; import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { GetNitroInstance, InitializeRoomInstanceRenderingCanvas } from '../../api'; import { GetNitroInstance, InitializeRoomInstanceRenderingCanvas } from '../../api';
import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent'; import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent';
import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent'; import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
@ -21,6 +20,7 @@ export const RoomView: FC<RoomViewProps> = props =>
const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null); const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null);
const [ canvasId, setCanvasId ] = useState(-1); const [ canvasId, setCanvasId ] = useState(-1);
const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null); const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
const elementRef = useRef<HTMLDivElement>();
useEffect(() => useEffect(() =>
{ {
@ -111,6 +111,8 @@ export const RoomView: FC<RoomViewProps> = props =>
GetNitroInstance().render(); GetNitroInstance().render();
} }
if(elementRef && elementRef.current) elementRef.current.appendChild(canvas);
setRoomCanvas(canvas); setRoomCanvas(canvas);
setCanvasId(canvasId); setCanvasId(canvasId);
}, [ roomSession ]); }, [ roomSession ]);
@ -119,15 +121,12 @@ export const RoomView: FC<RoomViewProps> = props =>
return ( return (
<RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }> <RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
<div className="nitro-room w-100 h-100"> <div ref={ elementRef } id="room-view" className="nitro-room-container" />
<div id="room-view" className="nitro-room-container"></div>
{ roomCanvas && createPortal(null, document.getElementById('room-view').appendChild(roomCanvas)) }
{ widgetHandler && { widgetHandler &&
<> <>
<RoomColorView /> <RoomColorView />
<RoomWidgetsView /> <RoomWidgetsView />
</> } </> }
</div>
</RoomContextProvider> </RoomContextProvider>
); );
} }