2021-07-13 06:31:56 +02:00
|
|
|
import { EventDispatcher, Nitro, NitroRectangle, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, RoomZoomEvent, Vector3d } from 'nitro-renderer';
|
2021-06-17 19:23:34 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
2021-04-18 06:58:57 +02:00
|
|
|
import { createPortal } from 'react-dom';
|
2021-07-13 06:31:56 +02:00
|
|
|
import { CanManipulateFurniture, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation } from '../../api';
|
2021-04-18 06:58:57 +02:00
|
|
|
import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent';
|
|
|
|
import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
|
|
|
|
import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
|
2021-06-17 19:23:34 +02:00
|
|
|
import { useRoomEngineEvent } from '../../hooks/events';
|
|
|
|
import { RoomContextProvider } from './context/RoomContext';
|
|
|
|
import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from './events';
|
2021-07-13 06:31:56 +02:00
|
|
|
import { RoomWidgetUpdateRoomViewEvent } from './events/RoomWidgetUpdateRoomViewEvent';
|
2021-07-12 09:59:40 +02:00
|
|
|
import { FurnitureContextMenuWidgetHandler, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
|
2021-07-13 06:31:56 +02:00
|
|
|
import { RoomColorView } from './RoomColorView';
|
2021-04-18 06:58:57 +02:00
|
|
|
import { RoomViewProps } from './RoomView.types';
|
2021-06-17 19:23:34 +02:00
|
|
|
import { RoomWidgetsView } from './widgets/RoomWidgetsView';
|
|
|
|
|
|
|
|
export const RoomView: FC<RoomViewProps> = props =>
|
2021-04-18 06:58:57 +02:00
|
|
|
{
|
2021-06-17 19:23:34 +02:00
|
|
|
const { roomSession = null } = props;
|
2021-04-18 06:58:57 +02:00
|
|
|
const [ roomCanvas, setRoomCanvas ] = useState<HTMLCanvasElement>(null);
|
2021-07-13 06:31:56 +02:00
|
|
|
const [ canvasId, setCanvasId ] = useState(-1);
|
2021-06-17 19:23:34 +02:00
|
|
|
const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
|
2021-04-18 06:58:57 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-06-17 19:23:34 +02:00
|
|
|
if(!roomSession)
|
2021-04-18 06:58:57 +02:00
|
|
|
{
|
|
|
|
window.onresize = null;
|
|
|
|
|
|
|
|
setRoomCanvas(null);
|
2021-07-13 06:31:56 +02:00
|
|
|
setCanvasId(-1);
|
2021-06-17 19:23:34 +02:00
|
|
|
setWidgetHandler(null);
|
2021-04-18 06:58:57 +02:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-06-17 19:23:34 +02:00
|
|
|
const widgetHandlerManager = new RoomWidgetHandlerManager(roomSession, new EventDispatcher());
|
|
|
|
|
2021-06-24 09:58:43 +02:00
|
|
|
widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler());
|
2021-06-17 19:23:34 +02:00
|
|
|
widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler());
|
2021-07-02 08:50:17 +02:00
|
|
|
widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler());
|
2021-07-03 05:50:45 +02:00
|
|
|
widgetHandlerManager.registerHandler(new RoomWidgetChatHandler());
|
2021-07-12 09:59:40 +02:00
|
|
|
widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler());
|
2021-06-17 19:23:34 +02:00
|
|
|
|
|
|
|
setWidgetHandler(widgetHandlerManager);
|
|
|
|
|
2021-05-10 19:11:16 +02:00
|
|
|
Nitro.instance.renderer.resize(window.innerWidth, window.innerHeight);
|
|
|
|
|
2021-04-18 06:58:57 +02:00
|
|
|
const canvasId = 1;
|
|
|
|
|
|
|
|
const displayObject = GetRoomEngine().getRoomInstanceDisplay(roomSession.roomId, canvasId, Nitro.instance.width, Nitro.instance.height, RoomGeometry.SCALE_ZOOMED_IN);
|
|
|
|
|
|
|
|
if(!displayObject) return;
|
|
|
|
|
|
|
|
const geometry = (GetRoomEngine().getRoomInstanceGeometry(roomSession.roomId, canvasId) as RoomGeometry);
|
|
|
|
|
|
|
|
if(geometry)
|
|
|
|
{
|
|
|
|
const minX = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MIN_X) || 0);
|
|
|
|
const maxX = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MAX_X) || 0);
|
|
|
|
const minY = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MIN_Y) || 0);
|
|
|
|
const maxY = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MAX_Y) || 0);
|
|
|
|
|
|
|
|
let x = ((minX + maxX) / 2);
|
|
|
|
let y = ((minY + maxY) / 2);
|
|
|
|
|
|
|
|
const offset = 20;
|
|
|
|
|
|
|
|
x = (x + (offset - 1));
|
|
|
|
y = (y + (offset - 1));
|
|
|
|
|
|
|
|
const z = (Math.sqrt(((offset * offset) + (offset * offset))) * Math.tan(((30 / 180) * Math.PI)));
|
|
|
|
|
|
|
|
geometry.location = new Vector3d(x, y, z);
|
|
|
|
}
|
|
|
|
|
|
|
|
const stage = Nitro.instance.stage;
|
|
|
|
|
|
|
|
if(!stage) return;
|
|
|
|
|
|
|
|
stage.addChild(displayObject);
|
|
|
|
|
|
|
|
const canvas = Nitro.instance.renderer.view;
|
|
|
|
|
|
|
|
if(!canvas) return;
|
|
|
|
|
|
|
|
canvas.onclick = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.onmousemove = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.onmousedown = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.onmouseup = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
|
|
|
|
|
|
|
|
canvas.ontouchstart = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.ontouchmove = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.ontouchend = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
|
|
|
|
canvas.ontouchcancel = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
|
|
|
|
|
2021-07-13 06:31:56 +02:00
|
|
|
window.onresize = () =>
|
|
|
|
{
|
|
|
|
Nitro.instance.renderer.resize(window.innerWidth, window.innerHeight);
|
|
|
|
|
|
|
|
InitializeRoomInstanceRenderingCanvas(roomSession.roomId, canvasId, Nitro.instance.width, Nitro.instance.height);
|
|
|
|
|
|
|
|
const bounds = canvas.getBoundingClientRect();
|
|
|
|
const rectangle = new NitroRectangle((bounds.x || 0), (bounds.y || 0), (bounds.width || 0), (bounds.height || 0));
|
|
|
|
|
|
|
|
widgetHandlerManager.eventDispatcher.dispatchEvent(new RoomWidgetUpdateRoomViewEvent(RoomWidgetUpdateRoomViewEvent.SIZE_CHANGED, rectangle));
|
|
|
|
|
|
|
|
Nitro.instance.render();
|
|
|
|
}
|
2021-04-18 06:58:57 +02:00
|
|
|
|
|
|
|
setRoomCanvas(canvas);
|
2021-07-13 06:31:56 +02:00
|
|
|
setCanvasId(canvasId);
|
2021-06-17 19:23:34 +02:00
|
|
|
}, [ roomSession ]);
|
|
|
|
|
|
|
|
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
|
|
|
|
{
|
|
|
|
if(!widgetHandler || RoomId.isRoomPreviewerId(event.roomId)) return;
|
2021-04-18 06:58:57 +02:00
|
|
|
|
2021-06-17 19:23:34 +02:00
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomEngineEvent.NORMAL_MODE:
|
|
|
|
widgetHandler.eventDispatcher.dispatchEvent(new RoomWidgetRoomEngineUpdateEvent(RoomWidgetRoomEngineUpdateEvent.NORMAL_MODE, event.roomId));
|
|
|
|
return;
|
|
|
|
case RoomEngineEvent.GAME_MODE:
|
|
|
|
widgetHandler.eventDispatcher.dispatchEvent(new RoomWidgetRoomEngineUpdateEvent(RoomWidgetRoomEngineUpdateEvent.GAME_MODE, event.roomId));
|
|
|
|
return;
|
2021-07-13 06:31:56 +02:00
|
|
|
case RoomZoomEvent.ROOM_ZOOM: {
|
|
|
|
const zoomEvent = (event as RoomZoomEvent);
|
|
|
|
|
|
|
|
let zoomLevel = ((zoomEvent.level < 1) ? 0.5 : (1 << (Math.floor(zoomEvent.level) - 1)));
|
|
|
|
|
|
|
|
if(zoomEvent.forceFlip || zoomEvent.asDelta) zoomLevel = zoomEvent.level;
|
|
|
|
|
|
|
|
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, zoomLevel, null, null, false, zoomEvent.asDelta);
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
2021-06-17 19:23:34 +02:00
|
|
|
}
|
2021-07-13 06:31:56 +02:00
|
|
|
}, [ widgetHandler, roomSession ]);
|
2021-06-17 19:23:34 +02:00
|
|
|
|
|
|
|
useRoomEngineEvent(RoomEngineEvent.NORMAL_MODE, onRoomEngineEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent);
|
2021-07-13 06:31:56 +02:00
|
|
|
useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent);
|
2021-06-17 19:23:34 +02:00
|
|
|
|
|
|
|
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
|
|
|
|
{
|
|
|
|
if(!roomSession || !widgetHandler) return;
|
|
|
|
|
|
|
|
const objectId = event.objectId;
|
|
|
|
const category = event.category;
|
|
|
|
|
|
|
|
let updateEvent: RoomWidgetRoomObjectUpdateEvent = null;
|
|
|
|
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomEngineObjectEvent.SELECTED:
|
|
|
|
if(!IsFurnitureSelectionDisabled(event)) updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.DESELECTED:
|
|
|
|
updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.ADDED: {
|
|
|
|
let addedEventType: string = null;
|
|
|
|
|
|
|
|
switch(category)
|
|
|
|
{
|
|
|
|
case RoomObjectCategory.FLOOR:
|
|
|
|
case RoomObjectCategory.WALL:
|
|
|
|
addedEventType = RoomWidgetRoomObjectUpdateEvent.FURNI_ADDED;
|
|
|
|
break;
|
|
|
|
case RoomObjectCategory.UNIT:
|
|
|
|
addedEventType = RoomWidgetRoomObjectUpdateEvent.USER_ADDED;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(addedEventType) updateEvent = new RoomWidgetRoomObjectUpdateEvent(addedEventType, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case RoomEngineObjectEvent.REMOVED: {
|
|
|
|
let removedEventType: string = null;
|
|
|
|
|
|
|
|
switch(category)
|
|
|
|
{
|
|
|
|
case RoomObjectCategory.FLOOR:
|
|
|
|
case RoomObjectCategory.WALL:
|
|
|
|
removedEventType = RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED;
|
|
|
|
break;
|
|
|
|
case RoomObjectCategory.UNIT:
|
|
|
|
removedEventType = RoomWidgetRoomObjectUpdateEvent.USER_REMOVED;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(removedEventType) updateEvent = new RoomWidgetRoomObjectUpdateEvent(removedEventType, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case RoomEngineObjectEvent.MOUSE_ENTER:
|
|
|
|
updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OVER, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.MOUSE_LEAVE:
|
|
|
|
updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OUT, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.REQUEST_MOVE:
|
|
|
|
if(CanManipulateFurniture(roomSession, objectId, category)) ProcessRoomObjectOperation(objectId, category, RoomObjectOperationType.OBJECT_MOVE);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.REQUEST_ROTATE:
|
|
|
|
if(CanManipulateFurniture(roomSession, objectId, category)) ProcessRoomObjectOperation(objectId, category, RoomObjectOperationType.OBJECT_ROTATE_POSITIVE);
|
|
|
|
break;
|
|
|
|
case RoomEngineObjectEvent.REQUEST_MANIPULATION:
|
|
|
|
if(CanManipulateFurniture(roomSession, objectId, category)) updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_REQUEST_MANIPULATION, objectId, category, event.roomId);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(updateEvent)
|
|
|
|
{
|
|
|
|
let dispatchEvent = true;
|
|
|
|
|
|
|
|
if(updateEvent instanceof RoomWidgetRoomObjectUpdateEvent) dispatchEvent = (!RoomId.isRoomPreviewerId(updateEvent.roomId));
|
|
|
|
|
|
|
|
if(dispatchEvent) widgetHandler.eventDispatcher.dispatchEvent(updateEvent);
|
|
|
|
}
|
|
|
|
}, [ roomSession, widgetHandler ]);
|
|
|
|
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.DESELECTED, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.REMOVED, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.PLACED, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_ENTER, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.MOUSE_LEAVE, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.REQUEST_MOVE, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.REQUEST_ROTATE, onRoomEngineObjectEvent);
|
|
|
|
useRoomEngineEvent(RoomEngineObjectEvent.REQUEST_MANIPULATION, onRoomEngineObjectEvent);
|
2021-04-18 06:58:57 +02:00
|
|
|
|
|
|
|
if(!roomSession) return null;
|
|
|
|
|
|
|
|
return (
|
2021-07-13 06:31:56 +02:00
|
|
|
<RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
|
2021-06-17 19:23:34 +02:00
|
|
|
<div className="nitro-room w-100 h-100">
|
|
|
|
<div id="room-view" className="nitro-room-container"></div>
|
|
|
|
{ roomCanvas && createPortal(null, document.getElementById('room-view').appendChild(roomCanvas)) }
|
2021-07-13 06:31:56 +02:00
|
|
|
{ widgetHandler &&
|
|
|
|
<>
|
|
|
|
<RoomColorView />
|
|
|
|
<RoomWidgetsView />
|
|
|
|
</> }
|
2021-06-17 19:23:34 +02:00
|
|
|
</div>
|
|
|
|
</RoomContextProvider>
|
2021-04-18 06:58:57 +02:00
|
|
|
);
|
|
|
|
}
|