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

RoomView changes

Browse Source
This commit is contained in:
Bill 2022-04-05 20:06:51 -04:00
parent 7dee962785
commit 366ac6cf4c
20 changed files with 202 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/nitro/room/DispatchMouseEvent.ts
View File

@ -1,12 +1,11 @@
import { MouseEventType } from '@nitrots/nitro-renderer';
import { GetRoomEngine } from './GetRoomEngine';
import { SetActiveRoomId } from './SetActiveRoomId';
let didMouseMove = false;
let lastClick = 0;
let clickCount = 0;
export function DispatchMouseEvent(roomId: number, canvasId: number, event: MouseEvent)
export const DispatchMouseEvent = (event: MouseEvent, canvasId: number = 1) =>
{
const x = (event.clientX * window.devicePixelRatio);
const y = (event.clientY * window.devicePixelRatio);
@ -51,7 +50,6 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous
break;
default: return;
}
SetActiveRoomId(roomId);
GetRoomEngine().dispatchMouseEvent(canvasId, x, y, eventType, event.altKey, (event.ctrlKey || event.metaKey), event.shiftKey, false);
}

6
src/api/nitro/room/DispatchTouchEvent.ts
View File

@ -6,7 +6,7 @@ let lastClick = 0;
let clickCount = 0;
let touchTimer: ReturnType<typeof setTimeout> = null;
export function DispatchTouchEvent(roomId: number, canvasId: number, event: TouchEvent, longTouch: boolean = false, altKey: boolean = false, ctrlKey: boolean = false, shiftKey: boolean = false)
export const DispatchTouchEvent = (event: TouchEvent, canvasId: number = 1, longTouch: boolean = false, altKey: boolean = false, ctrlKey: boolean = false, shiftKey: boolean = false) =>
{
let eventType = event.type;
@ -51,8 +51,6 @@ export function DispatchTouchEvent(roomId: number, canvasId: number, event: Touc
y = event.changedTouches[0].clientY;
}
GetRoomEngine().setActiveRoomId(roomId);
switch(eventType)
{
case MouseEventType.MOUSE_CLICK:
@ -64,7 +62,7 @@ export function DispatchTouchEvent(roomId: number, canvasId: number, event: Touc
{
if(didMouseMove) return;
DispatchTouchEvent(roomId, canvasId, event, true);
DispatchTouchEvent(event, canvasId, true);
}, 300);
eventType = MouseEventType.MOUSE_DOWN;

4
src/api/nitro/room/GetRoomObjectBounds.ts
View File

@ -8,8 +8,8 @@ export const GetRoomObjectBounds = (roomId: number, objectId: number, category:
if(window.devicePixelRatio !== 1)
{
rectangle.x /= window.devicePixelRatio;
rectangle.y /= window.devicePixelRatio;
rectangle.x = Math.round(rectangle.x / window.devicePixelRatio);
rectangle.y = Math.round(rectangle.y / window.devicePixelRatio);
}
return rectangle;

4
src/api/nitro/room/GetRoomObjectScreenLocation.ts
View File

@ -8,8 +8,8 @@ export const GetRoomObjectScreenLocation = (roomId: number, objectId: number, ca
if(window.devicePixelRatio !== 1)
{
point.x /= window.devicePixelRatio;
point.y /= window.devicePixelRatio;
point.x = Math.round(point.x / window.devicePixelRatio);
point.y = Math.round(point.y / window.devicePixelRatio);
}
return point;

7
src/api/nitro/room/InitializeRoomInstanceRenderingCanvas.ts
View File

@ -1,6 +1,9 @@
import { GetRoomEngine } from './GetRoomEngine';
export function InitializeRoomInstanceRenderingCanvas(roomId: number, canvasId: number, width: number, height: number): void
export const InitializeRoomInstanceRenderingCanvas = (width: number, height: number, canvasId: number = 1) =>
{
GetRoomEngine().initializeRoomInstanceRenderingCanvas(roomId, canvasId, width, height);
const roomEngine = GetRoomEngine();
const roomId = roomEngine.activeRoomId;
roomEngine.initializeRoomInstanceRenderingCanvas(roomId, canvasId, width, height);
}

21
src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomViewEvent.ts
View File

@ -1,21 +0,0 @@
import { NitroRectangle } from '@nitrots/nitro-renderer';
import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
export class RoomWidgetUpdateRoomViewEvent extends RoomWidgetUpdateEvent
{
public static SIZE_CHANGED: string = 'RWURVE_SIZE_CHANGED';
private _roomViewRectangle: NitroRectangle;
constructor(type: string, view: NitroRectangle)
{
super(type);
this._roomViewRectangle = view;
}
public get roomViewRectangle(): NitroRectangle
{
return this._roomViewRectangle;
}
}

1
src/api/nitro/room/widgets/events/index.ts
View File

@ -27,7 +27,6 @@ export * from './RoomWidgetUpdatePresentDataEvent';
export * from './RoomWidgetUpdateRentableBotChatEvent';
export * from './RoomWidgetUpdateRoomEngineEvent';
export * from './RoomWidgetUpdateRoomObjectEvent';
export * from './RoomWidgetUpdateRoomViewEvent';
export * from './RoomWidgetUpdateSongEvent';
export * from './RoomWidgetUpdateTrophyEvent';
export * from './RoomWidgetUpdateUserDataEvent';

2
src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts
View File

@ -124,7 +124,7 @@ export class RoomWidgetChatInputHandler extends RoomWidgetHandler
return null;
case ':zoom':
GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(this.container.roomSession.roomId, parseInt(secondPart), false));
GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(this.container.roomSession.roomId, parseFloat(secondPart), false));
return null;
case ':screenshot':

38
src/api/nitro/room/widgets/handlers/RoomWidgetRoomToolsHandler.ts
View File

@ -1,38 +0,0 @@
import { NitroEvent, RoomWidgetEnum, RoomZoomEvent } from '@nitrots/nitro-renderer';
import { GetRoomEngine } from '../../../..';
import { RoomWidgetUpdateEvent } from '../events';
import { RoomWidgetMessage, RoomWidgetZoomToggleMessage } from '../messages';
import { RoomWidgetHandler } from './RoomWidgetHandler';
export class RoomWidgetRoomToolsHandler extends RoomWidgetHandler
{
public processEvent(event: NitroEvent): void
{}
public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
{
if(message instanceof RoomWidgetZoomToggleMessage)
{
GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(GetRoomEngine().activeRoomId, message.zoomedIn ? 0 : 1, false));
}
return null;
}
public get type(): string
{
return RoomWidgetEnum.ROOM_TOOLS;
}
public get eventTypes(): string[]
{
return [];
}
public get messageTypes(): string[]
{
return [
RoomWidgetZoomToggleMessage.ZOOM_TOGGLE
];
}
}

1
src/api/nitro/room/widgets/handlers/index.ts
View File

@ -19,6 +19,5 @@ export * from './RoomWidgetChatInputHandler';
export * from './RoomWidgetHandler';
export * from './RoomWidgetHandlerManager';
export * from './RoomWidgetInfostandHandler';
export * from './RoomWidgetRoomToolsHandler';
export * from './UserChooserWidgetHandler';
export * from './WordQuizWidgetHandler';

18
src/api/nitro/room/widgets/messages/RoomWidgetZoomToggleMessage.ts
View File

@ -1,18 +0,0 @@
import { RoomWidgetMessage } from '.';
export class RoomWidgetZoomToggleMessage extends RoomWidgetMessage
{
public static ZOOM_TOGGLE: string = 'RWZTM_ZOOM_TOGGLE';
private _zoomedIn: boolean;
constructor(zoomedIn: boolean)
{
super(RoomWidgetZoomToggleMessage.ZOOM_TOGGLE);
this._zoomedIn = zoomedIn;
}
public get zoomedIn(): boolean
{
return this._zoomedIn;
}
}

1
src/api/nitro/room/widgets/messages/index.ts
View File

@ -18,4 +18,3 @@ export * from './RoomWidgetRequestWidgetMessage';
export * from './RoomWidgetRoomObjectMessage';
export * from './RoomWidgetUseProductMessage';
export * from './RoomWidgetUserActionMessage';
export * from './RoomWidgetZoomToggleMessage';

4
src/components/main/MainView.tsx
View File

@ -21,7 +21,7 @@ import { ModToolsView } from '../mod-tools/ModToolsView';
import { NavigatorView } from '../navigator/NavigatorView';
import { NitropediaView } from '../nitropedia/NitropediaView';
import { RightSideView } from '../right-side/RightSideView';
import { RoomHostView } from '../room/RoomHostView';
import { RoomView } from '../room/RoomView';
import { ToolbarView } from '../toolbar/ToolbarView';
import { UserProfileView } from '../user-profile/UserProfileView';
import { UserSettingsView } from '../user-settings/UserSettingsView';
@ -99,7 +99,7 @@ export const MainView: FC<{}> = props =>
</TransitionAnimation>
<ToolbarView isInRoom={ !landingViewVisible } />
<ModToolsView />
<RoomHostView />
<RoomView />
<ChatHistoryView />
<WiredView />
<AvatarEditorView />

177
src/components/room/RoomColorView.tsx
View File

@ -1,118 +1,49 @@
import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineDimmerStateEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomViewEvent } from '../../api';
import { UseEventDispatcherHook, UseMountEffect, UseRoomEngineEvent } from '../../hooks';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent } from '../../api';
import { UseEventDispatcherHook, UseRoomEngineEvent } from '../../hooks';
import { useRoomContext } from './RoomContext';
export const RoomColorView: FC<{}> = props =>
{
const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
const [ roomBackgroundColor, setRoomBackgroundColor ] = useState(0);
const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
const getRenderingCanvas = useCallback(() =>
{
return GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId, canvasId);
}, [ roomSession, canvasId ]);
const getRoomBackground = useCallback(() =>
{
if(roomBackground) return roomBackground;
const canvas = getRenderingCanvas();
if(!canvas) return null;
const displayObject = (canvas.master as NitroContainer);
const background = new NitroSprite(NitroTexture.WHITE);
displayObject.addChildAt(background, 0);
setRoomBackground(background);
return background;
}, [ roomBackground, getRenderingCanvas ]);
const updateRoomBackground = useCallback((color: number) =>
{
const background = getRoomBackground();
if(!background) return;
if(color === undefined) color = 0x000000;
background.tint = color;
background.width = GetNitroInstance().width;
background.height = GetNitroInstance().height;
}, [ getRoomBackground ]);
const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
const { roomSession = null, widgetHandler = null, eventDispatcher = null } = useRoomContext();
const updateRoomBackgroundColor = useCallback((hue: number, saturation: number, lightness: number, original: boolean = false) =>
{
if(!roomBackground) return;
const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
setRoomBackgroundColor(newColor);
if(original) setOriginalRoomBackgroundColor(newColor);
const background = getRoomBackground();
if(!background) return;
if(!hue && !saturation && !lightness)
{
background.visible = false;
roomBackground.visible = false;
}
else
{
updateRoomBackground(newColor);
background.visible = true;
roomBackground.tint = newColor;
roomBackground.width = GetNitroInstance().width;
roomBackground.height = GetNitroInstance().height;
roomBackground.visible = true;
}
}, [ getRoomBackground, updateRoomBackground ]);
const getRoomFilter = useCallback(() =>
{
if(roomFilter) return roomFilter;
const canvas = getRenderingCanvas();
if(!canvas) return null;
const display = canvas.master;
if(!display) return null;
const filter = new NitroAdjustmentFilter();
setRoomFilter(filter);
display.filters = [ filter ];
return filter;
}, [ roomFilter, getRenderingCanvas ]);
}, [ roomBackground ]);
const updateRoomFilter = useCallback((color: number) =>
{
const colorMatrix = getRoomFilter();
if(!colorMatrix) return;
if(!roomFilter) return;
const r = ((color >> 16) & 0xFF);
const g = ((color >> 8) & 0xFF);
const b = (color & 0xFF);
colorMatrix.red = (r / 255);
colorMatrix.green = (g / 255);
colorMatrix.blue = (b / 255);
}, [ getRoomFilter ]);
const updateRoomFilterColor = useCallback((color: number, brightness: number) =>
{
const newColor = ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness));
updateRoomFilter(newColor);
}, [ updateRoomFilter ]);
roomFilter.red = (r / 255);
roomFilter.green = (g / 255);
roomFilter.blue = (b / 255);
}, [ roomFilter ]);
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
{
@ -131,8 +62,16 @@ export const RoomColorView: FC<{}> = props =>
case RoomBackgroundColorEvent.ROOM_COLOR: {
const colorEvent = (event as RoomBackgroundColorEvent);
if(colorEvent.bgOnly) updateRoomFilterColor(0x000000, 0xFF);
else updateRoomFilterColor(colorEvent.color, colorEvent.brightness);
let color = 0x000000;
let brightness = 0xFF;
if(!colorEvent.bgOnly)
{
color = colorEvent.color;
brightness = colorEvent.brightness;
}
updateRoomFilter(ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness)));
return;
}
@ -140,19 +79,12 @@ export const RoomColorView: FC<{}> = props =>
widgetHandler.processEvent(event);
}
}
}, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilterColor ]);
}, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilter ]);
UseRoomEngineEvent(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, onRoomEngineEvent);
UseRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, onRoomEngineEvent);
UseRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
const onRoomWidgetUpdateRoomViewEvent = useCallback((event: RoomWidgetUpdateRoomViewEvent) =>
{
updateRoomBackground(roomBackgroundColor);
}, [ roomBackgroundColor, updateRoomBackground ]);
UseEventDispatcherHook(RoomWidgetUpdateRoomViewEvent.SIZE_CHANGED, eventDispatcher, onRoomWidgetUpdateRoomViewEvent);
const onRoomWidgetUpdateBackgroundColorPreviewEvent = useCallback((event: RoomWidgetUpdateBackgroundColorPreviewEvent) =>
{
switch(event.type)
@ -162,19 +94,60 @@ export const RoomColorView: FC<{}> = props =>
return;
}
case RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW: {
const color = originalRoomBackgroundColor;
if(!roomBackground) return;
setRoomBackgroundColor(color);
updateRoomBackground(color);
roomBackground.tint = originalRoomBackgroundColor;
roomBackground.width = GetNitroInstance().width;
roomBackground.height = GetNitroInstance().height;
roomBackground.visible = true;
return;
}
}
}, [ originalRoomBackgroundColor, updateRoomBackgroundColor, updateRoomBackground ]);
}, [ roomBackground, originalRoomBackgroundColor, updateRoomBackgroundColor ]);
UseEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent);
UseEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent);
UseMountEffect(updateRoomBackground);
useEffect(() =>
{
if(!roomSession) return;
const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId);
if(!canvas) return;
const background = new NitroSprite(NitroTexture.WHITE);
const filter = new NitroAdjustmentFilter();
const master = (canvas.master as NitroContainer);
background.visible = false;
master.addChildAt(background, 0);
master.filters = [ filter ];
setRoomBackground(background);
setRoomFilter(filter);
return () =>
{
setRoomBackground(prevValue =>
{
if(prevValue) prevValue.destroy();
return null;
});
setRoomFilter(prevValue =>
{
if(prevValue) prevValue.destroy();
return null;
});
setOriginalRoomBackgroundColor(0);
}
}, [ roomSession ]);
return null;
}

2
src/components/room/RoomContext.tsx
View File

@ -5,14 +5,12 @@ import { IRoomWidgetHandlerManager } from '../../api';
interface IRoomContext
{
roomSession: IRoomSession;
canvasId: number;
eventDispatcher: IEventDispatcher;
widgetHandler: IRoomWidgetHandlerManager;
}
const RoomContext = createContext<IRoomContext>({
roomSession: null,
canvasId: -1,
eventDispatcher: null,
widgetHandler: null
});

58
src/components/room/RoomHostView.tsx
View File

@ -1,58 +0,0 @@
import { IRoomSession, RoomEngineEvent, RoomId, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api';
import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks';
import { RoomView } from './RoomView';
export const RoomHostView: FC<{}> = props =>
{
const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
const session = GetRoomSession();
if(!session) return;
switch(event.type)
{
case RoomEngineEvent.INITIALIZED:
SetActiveRoomId(event.roomId);
setRoomSession(session);
return;
case RoomEngineEvent.DISPOSED:
setRoomSession(null);
return;
}
}, []);
UseRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
UseRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
{
switch(event.type)
{
case RoomSessionEvent.CREATED:
StartRoomSession(event.session);
return;
case RoomSessionEvent.ENDED:
setRoomSession(null);
return;
}
}, []);
UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
UseRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ !!roomSession } timeout={ 300 }>
<Base fit>
<RoomView roomSession={ roomSession } />
</Base>
</TransitionAnimation>
);
}

2
src/components/room/RoomView.scss
View File

@ -1 +1 @@
@import './widgets/RoomWidgets';
@import "./widgets/RoomWidgets";

149
src/components/room/RoomView.tsx
View File

@ -1,30 +1,61 @@
import { EventDispatcher, IRoomSession, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react';
import { DispatchMouseEvent, DispatchTouchEvent, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureInternalLinkHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, FurnitureRoomLinkHandler, FurnitureYoutubeDisplayWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, PollWidgetHandler, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler, WordQuizWidgetHandler } from '../../api';
import { EventDispatcher, IRoomSession, RoomEngineEvent, RoomGeometry, RoomId, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { DispatchMouseEvent, DispatchTouchEvent, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureInternalLinkHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, FurnitureRoomLinkHandler, FurnitureYoutubeDisplayWidgetHandler, GetNitroInstance, GetRoomEngine, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, PollWidgetHandler, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, SetActiveRoomId, StartRoomSession, UserChooserWidgetHandler, WordQuizWidgetHandler } from '../../api';
import { Base } from '../../common';
import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks';
import { RoomColorView } from './RoomColorView';
import { RoomContextProvider } from './RoomContext';
import { RoomWidgetsView } from './widgets/RoomWidgetsView';
interface RoomViewProps
export const RoomView: FC<{}> = props =>
{
roomSession: IRoomSession;
}
export const RoomView: FC<RoomViewProps> = props =>
{
const { roomSession = null } = props;
const [ canvasId, setCanvasId ] = useState(-1);
const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
const elementRef = useRef<HTMLDivElement>();
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
const session = GetRoomSession();
if(!session) return;
switch(event.type)
{
case RoomEngineEvent.INITIALIZED:
SetActiveRoomId(event.roomId);
setRoomSession(session);
return;
case RoomEngineEvent.DISPOSED:
setRoomSession(null);
return;
}
}, []);
UseRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
UseRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
{
switch(event.type)
{
case RoomSessionEvent.CREATED:
StartRoomSession(event.session);
return;
case RoomSessionEvent.ENDED:
setRoomSession(null);
return;
}
}, []);
UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
UseRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
useEffect(() =>
{
if(!roomSession)
{
window.onresize = null;
setCanvasId(-1);
setWidgetHandler(null);
return;
@ -34,7 +65,6 @@ export const RoomView: FC<RoomViewProps> = props =>
widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler());
widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler());
widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler());
widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler());
widgetHandlerManager.registerHandler(new RoomWidgetChatHandler());
widgetHandlerManager.registerHandler(new UserChooserWidgetHandler());
@ -55,22 +85,23 @@ export const RoomView: FC<RoomViewProps> = props =>
setWidgetHandler(widgetHandlerManager);
GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio));
const roomEngine = GetRoomEngine();
const roomId = roomSession.roomId;
const canvasId = 1;
const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height, RoomGeometry.SCALE_ZOOMED_IN);
const displayObject = GetRoomEngine().getRoomInstanceDisplay(roomSession.roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height, RoomGeometry.SCALE_ZOOMED_IN);
if((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) roomEngine.setRoomInstanceRenderingCanvasScale(roomId, canvasId, window.devicePixelRatio);
if(!displayObject) return;
const geometry = (GetRoomEngine().getRoomInstanceGeometry(roomSession.roomId, canvasId) as RoomGeometry);
const geometry = (roomEngine.getRoomInstanceGeometry(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);
const minX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MIN_X) || 0);
const maxX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MAX_X) || 0);
const minY = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MIN_Y) || 0);
const maxY = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MAX_Y) || 0);
let x = ((minX + maxX) / 2);
let y = ((minY + maxY) / 2);
@ -91,57 +122,71 @@ export const RoomView: FC<RoomViewProps> = props =>
stage.addChild(displayObject);
SetActiveRoomId(roomSession.roomId);
}, [ roomSession ]);
useEffect(() =>
{
const canvas = GetNitroInstance().renderer.view;
if(!canvas) return;
canvas.onclick = event => DispatchMouseEvent(event);
canvas.onmousemove = event => DispatchMouseEvent(event);
canvas.onmousedown = event => DispatchMouseEvent(event);
canvas.onmouseup = event => DispatchMouseEvent(event);
canvas.ontouchstart = event => DispatchTouchEvent(event);
canvas.ontouchmove = event => DispatchTouchEvent(event);
canvas.ontouchend = event => DispatchTouchEvent(event);
canvas.ontouchcancel = event => DispatchTouchEvent(event);
if(window.devicePixelRatio !== 1)
{
let scaleValue = (1 / window.devicePixelRatio);
canvas.style.transform = `scale(${ scaleValue })`;
canvas.style.transformOrigin = 'top left';
canvas.style.width = `${ (100 * window.devicePixelRatio) }%`;
canvas.style.height = `${ (100 * window.devicePixelRatio) }%`;
}
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);
window.onresize = () =>
{
GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio));
const nitroInstance = GetNitroInstance();
const width = (window.innerWidth * window.devicePixelRatio);
const height = (window.innerHeight * window.devicePixelRatio);
nitroInstance.renderer.resize(width, height);
InitializeRoomInstanceRenderingCanvas(roomSession.roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height);
InitializeRoomInstanceRenderingCanvas(width, height, 1);
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));
GetNitroInstance().render();
nitroInstance.render();
}
if(elementRef && elementRef.current) elementRef.current.replaceChildren(canvas);
const element = elementRef.current;
setCanvasId(canvasId);
}, [ roomSession ]);
if(!element) return;
if(!roomSession) return null;
element.appendChild(canvas);
return () =>
{
element.removeChild(canvas);
window.onresize = null;
}
}, []);
return (
<RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
<Base innerRef={ elementRef } id="room-view" className="nitro-room-container" />
{ widgetHandler &&
<>
<RoomColorView />
<RoomWidgetsView />
</> }
<RoomContextProvider value={ { roomSession, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
<Base fit className={ (!roomSession && 'd-none') }>
<Base innerRef={ elementRef } />
{ (roomSession && widgetHandler) &&
<>
<RoomColorView />
<RoomWidgetsView />
</> }
</Base>
</RoomContextProvider>
);
}

6
src/components/room/widgets/RoomWidgetsView.tsx
View File

@ -35,11 +35,7 @@ export const RoomWidgetsView: FC<{}> = props =>
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(event.roomId, 1, zoomLevel, null, null, false, zoomEvent.asDelta);
GetRoomEngine().setRoomInstanceRenderingCanvasScale(event.roomId, 1, zoomEvent.level, null, null, false, zoomEvent.asDelta);
return;
}

16
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,7 +1,7 @@
import { GetGuestRoomResultEvent, RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { CreateLinkEvent, LocalizeText, RoomWidgetZoomToggleMessage, SendMessageComposer } from '../../../../api';
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
import { UseMessageEventHook, useSharedNavigatorData } from '../../../../hooks';
import { useRoomContext } from '../../RoomContext';
@ -15,7 +15,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
const [ roomInfoDisplay, setRoomInfoDisplay ] = useState<boolean>(false);
const [ isOpen, setIsOpen ] = useState<boolean>(false);
const [ navigatorData, setNavigatorData ] = useSharedNavigatorData();
const { widgetHandler = null } = useRoomContext();
const { roomSession = null, widgetHandler = null } = useRoomContext();
const handleToolClick = (action: string) =>
{
@ -25,8 +25,16 @@ export const RoomToolsWidgetView: FC<{}> = props =>
CreateLinkEvent('navigator/toggle-room-info');
return;
case 'zoom':
widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn));
setIsZoomedIn(value => !value);
setIsZoomedIn(prevValue =>
{
let scale = ((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) ? window.devicePixelRatio : 1;
if(!prevValue) scale /= 2;
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
return !prevValue;
});
return;
case 'chat_history':
CreateLinkEvent('chat-history/toggle');