Fix canvas / background resizing

src/components/room/RoomColorView.tsx

@@ -1,135 +0,0 @@
-import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineDimmerStateEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
-import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent } from '../../api';
-import { useRoom, useRoomEngineEvent, useUiEvent } from '../../hooks';
-
-export const RoomColorView: FC<{}> = props =>
-{
-    const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
-    const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
-    const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
-    const { roomSession = null } = useRoom();
-
-    const updateRoomBackgroundColor = (hue: number, saturation: number, lightness: number, original: boolean = false) =>
-    {
-        if(!roomBackground) return;
-        
-        const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
-
-        if(original) setOriginalRoomBackgroundColor(newColor);
-
-        if(!hue && !saturation && !lightness)
-        {
-            roomBackground.tint = 0;
-        }
-        else
-        {
-            roomBackground.tint = newColor;
-        }
-    }
-
-    const updateRoomFilter = (color: number) =>
-    {
-        if(!roomFilter) return;
-
-        const r = ((color >> 16) & 0xFF);
-        const g = ((color >> 8) & 0xFF);
-        const b = (color & 0xFF);
-
-        roomFilter.red = (r / 255);
-        roomFilter.green = (g / 255);
-        roomFilter.blue = (b / 255);
-    }
-
-    useRoomEngineEvent<RoomObjectHSLColorEnabledEvent>(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, event =>
-    {
-        if(RoomId.isRoomPreviewerId(event.roomId)) return;
-
-        if(event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true);
-        else updateRoomBackgroundColor(0, 0, 0, true);
-    });
-
-    useRoomEngineEvent<RoomBackgroundColorEvent>(RoomBackgroundColorEvent.ROOM_COLOR, event =>
-    {
-        if(RoomId.isRoomPreviewerId(event.roomId)) return;
-
-        let color = 0x000000;
-        let brightness = 0xFF;
-
-        if(!event.bgOnly)
-        {
-            color = event.color;
-            brightness = event.brightness;
-        }
-        
-        updateRoomFilter(ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness)));
-    });
-
-    useRoomEngineEvent<RoomEngineDimmerStateEvent>(RoomEngineDimmerStateEvent.ROOM_COLOR, event =>
-    {
-        if(RoomId.isRoomPreviewerId(event.roomId)) return;
-    });
-
-    useUiEvent<RoomWidgetUpdateBackgroundColorPreviewEvent>(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, event => updateRoomBackgroundColor(event.hue, event.saturation, event.lightness));
-
-    useUiEvent<RoomWidgetUpdateBackgroundColorPreviewEvent>(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, event =>
-    {
-        if(!roomBackground) return;
-
-        roomBackground.tint = originalRoomBackgroundColor;
-    });
-
-    useEffect(() =>
-    {
-        if(!roomSession) return;
-
-        const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId, 1);
-
-        if(!canvas) return;
-
-        const background = new NitroSprite(NitroTexture.WHITE);
-        const filter = new NitroAdjustmentFilter();
-        const master = (canvas.master as NitroContainer);
-
-        background.tint = 0;
-        background.width = GetNitroInstance().width;
-        background.height = GetNitroInstance().height;
-
-        master.addChildAt(background, 0);
-        master.filters = [ filter ];
-
-        setRoomBackground(background);
-        setRoomFilter(filter);
-
-        const resize = (event: UIEvent) =>
-        {
-            background.width = GetNitroInstance().width;
-            background.height = GetNitroInstance().height;
-        }
-
-        window.addEventListener('resize', resize);
-
-        return () =>
-        {
-            setRoomBackground(prevValue =>
-            {
-                if(prevValue) prevValue.destroy();
-
-                return null;
-            });
-
-            setRoomFilter(prevValue =>
-            {
-                if(prevValue) prevValue.destroy();
-
-                return null;
-            });
-            
-            setOriginalRoomBackgroundColor(0);
-
-            window.removeEventListener('resize', resize);
-        }
-    }, [ roomSession ]);
-
-    return null;
-}

src/components/room/RoomView.tsx

@@ -2,13 +2,12 @@ import { FC, useEffect, useRef } from 'react';
 import { DispatchMouseEvent, DispatchTouchEvent, GetNitroInstance } from '../../api';
 import { Base } from '../../common';
 import { useRoom } from '../../hooks';
-import { RoomColorView } from './RoomColorView';
 import { RoomSpectatorView } from './spectator/RoomSpectatorView';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
 
 export const RoomView: FC<{}> = props =>
 {
-    const { roomSession = null, resize = null } = useRoom();
+    const { roomSession = null } = useRoom();
     const elementRef = useRef<HTMLDivElement>();
 
     useEffect(() =>
@@ -27,27 +26,17 @@ export const RoomView: FC<{}> = props =>
         canvas.ontouchend = event => DispatchTouchEvent(event);
         canvas.ontouchcancel = event => DispatchTouchEvent(event);
 
-        resize();
-
         const element = elementRef.current;
 
-        if(element) element.appendChild(canvas);
+        if(!element) return;
-
+        
-        window.addEventListener('resize', resize);
+        element.appendChild(canvas);
-
+    }, []);
-        return () =>
-        {
-            if(element) element.removeChild(canvas);
-            
-            window.removeEventListener('resize', resize);
-        }
-    }, [ resize ]);
 
     return (
         <Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
             { roomSession &&
                 <>
-                    <RoomColorView />
                     <RoomWidgetsView />
                     { roomSession.isSpectator && <RoomSpectatorView /> }
                 </> }

src/hooks/rooms/useRoom.ts

@@ -1,31 +1,79 @@
-import { IRoomSession, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
+import { ColorConverter, IRoomSession, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectHSLColorEnabledEvent, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useBetween } from 'use-between';
-import { CanManipulateFurniture, DispatchUiEvent, GetNitroInstance, GetRoomEngine, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
+import { CanManipulateFurniture, DispatchUiEvent, GetNitroInstance, GetRoomEngine, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
-import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../events';
+import { useRoomEngineEvent, useRoomSessionManagerEvent, useUiEvent } from '../events';
 
 const useRoomState = () =>
 {
     const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
+    const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
+    const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
+    const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
 
-    const resize = useCallback((event: UIEvent = null) =>
+    const updateRoomBackgroundColor = (hue: number, saturation: number, lightness: number, original: boolean = false) =>
     {
-        const canvas = GetNitroInstance().renderer.view;
+        if(!roomBackground) return;
-
-        if(!canvas) return;
-
-        canvas.style.width = `${ Math.floor(window.innerWidth) }px`;
-        canvas.style.height = `${ Math.floor(window.innerHeight) }px`;
-    
-        const nitroInstance = GetNitroInstance();
-
-        nitroInstance.renderer.resolution = window.devicePixelRatio;
-        nitroInstance.renderer.resize(window.innerWidth, window.innerHeight);
         
-        InitializeRoomInstanceRenderingCanvas(window.innerWidth, window.innerHeight, 1);
+        const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
 
-        nitroInstance.render();
+        if(original) setOriginalRoomBackgroundColor(newColor);
-    }, []);
+
+        if(!hue && !saturation && !lightness)
+        {
+            roomBackground.tint = 0;
+        }
+        else
+        {
+            roomBackground.tint = newColor;
+        }
+    }
+
+    const updateRoomFilter = (color: number) =>
+    {
+        if(!roomFilter) return;
+
+        const r = ((color >> 16) & 0xFF);
+        const g = ((color >> 8) & 0xFF);
+        const b = (color & 0xFF);
+
+        roomFilter.red = (r / 255);
+        roomFilter.green = (g / 255);
+        roomFilter.blue = (b / 255);
+    }
+
+    useUiEvent<RoomWidgetUpdateBackgroundColorPreviewEvent>(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, event => updateRoomBackgroundColor(event.hue, event.saturation, event.lightness));
+
+    useUiEvent<RoomWidgetUpdateBackgroundColorPreviewEvent>(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, event =>
+    {
+        if(!roomBackground) return;
+    
+        roomBackground.tint = originalRoomBackgroundColor;
+    });
+
+    useRoomEngineEvent<RoomObjectHSLColorEnabledEvent>(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, event =>
+    {
+        if(RoomId.isRoomPreviewerId(event.roomId)) return;
+
+        if(event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true);
+        else updateRoomBackgroundColor(0, 0, 0, true);
+    });
+
+    useRoomEngineEvent<RoomBackgroundColorEvent>(RoomBackgroundColorEvent.ROOM_COLOR, event =>
+    {
+        if(RoomId.isRoomPreviewerId(event.roomId)) return;
+
+        let color = 0x000000;
+        let brightness = 0xFF;
+
+        if(!event.bgOnly)
+        {
+            color = event.color;
+            brightness = event.brightness;
+        }
+        
+        updateRoomFilter(ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness)));
+    });
 
     useRoomEngineEvent<RoomEngineEvent>([
         RoomEngineEvent.INITIALIZED,
@@ -145,15 +193,40 @@ const useRoomState = () =>
     {
         if(!roomSession) return;
 
+        const nitroInstance = GetNitroInstance();
         const roomEngine = GetRoomEngine();
         const roomId = roomSession.roomId;
         const canvasId = 1;
+        const width = Math.floor(window.innerWidth);
+        const height = Math.floor(window.innerHeight);
+        const renderer = nitroInstance.renderer;
 
-        resize();
+        if(renderer)
+        {
+            renderer.view.style.width = `${ width }px`;
+            renderer.view.style.height = `${ height }px`;
+            renderer.resolution = window.devicePixelRatio;
+            renderer.resize(width, height);
+        }
         
-        const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, window.innerWidth, window.innerHeight, RoomGeometry.SCALE_ZOOMED_IN);
+        const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, width, height, RoomGeometry.SCALE_ZOOMED_IN);
+        const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomId, canvasId);
 
-        if(!displayObject) return;
+        if(!displayObject || !canvas) return;
+
+        const background = new NitroSprite(NitroTexture.WHITE);
+        const filter = new NitroAdjustmentFilter();
+        const master = (canvas.master as NitroContainer);
+
+        background.tint = 0;
+        background.width = width;
+        background.height = height;
+
+        master.addChildAt(background, 0);
+        master.filters = [ filter ];
+
+        setRoomBackground(background);
+        setRoomFilter(filter);
 
         const geometry = (roomEngine.getRoomInstanceGeometry(roomId, canvasId) as RoomGeometry);
 
@@ -177,16 +250,57 @@ const useRoomState = () =>
             geometry.location = new Vector3d(x, y, z);
         }
 
-        const stage = GetNitroInstance().stage;
+        const stage = nitroInstance.stage;
 
         if(!stage) return;
 
         stage.addChild(displayObject);
 
         SetActiveRoomId(roomSession.roomId);
-    }, [ roomSession, resize ]);
 
-    return { roomSession, resize };
+        const resize = (event: UIEvent) =>
+        {
+            const width = Math.floor(window.innerWidth);
+            const height = Math.floor(window.innerHeight);
+
+            renderer.view.style.width = `${ width }px`;
+            renderer.view.style.height = `${ height }px`;
+            renderer.resolution = window.devicePixelRatio;
+            renderer.resize(width, height);
+
+            background.width = width;
+            background.height = height;
+
+            InitializeRoomInstanceRenderingCanvas(width, height, 1);
+
+            nitroInstance.render();
+        }
+
+        window.addEventListener('resize', resize);
+
+        return () =>
+        {
+            setRoomBackground(prevValue =>
+            {
+                if(prevValue) prevValue.destroy();
+
+                return null;
+            });
+
+            setRoomFilter(prevValue =>
+            {
+                if(prevValue) prevValue.destroy();
+
+                return null;
+            });
+            
+            setOriginalRoomBackgroundColor(0);
+
+            window.removeEventListener('resize', resize);
+        }
+    }, [ roomSession ]);
+
+    return { roomSession };
 }
 
 export const useRoom = () => useBetween(useRoomState);

src/hooks/rooms/widgets/furniture/useFurnitureDimmerWidget.ts

@@ -1,4 +1,4 @@
-import { RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomSessionDimmerPresetsEvent } from '@nitrots/nitro-renderer';
+import { RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomId, RoomSessionDimmerPresetsEvent } from '@nitrots/nitro-renderer';
 import { useEffect, useState } from 'react';
 import { DimmerFurnitureWidgetPresetItem, FurnitureDimmerUtilities, GetSessionDataManager } from '../../../../api';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../events';
@@ -84,6 +84,8 @@ const useFurnitureDimmerWidgetState = () =>
 
     useRoomEngineEvent<RoomEngineDimmerStateEvent>(RoomEngineDimmerStateEvent.ROOM_COLOR, event =>
     {
+        if(RoomId.isRoomPreviewerId(event.roomId)) return;
+
         setLastDimmerState(dimmerState);
         setDimmerState(event.state);
         setSelectedPresetId(event.presetId);