Fix canvas / background resizing

This commit is contained in:
Bill 2022-08-02 13:47:59 -04:00
parent 5fd0cdd21b
commit 9888183ff2
4 changed files with 147 additions and 177 deletions

View File

@ -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;
}

View File

@ -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);
window.addEventListener('resize', resize);
return () =>
{
if(element) element.removeChild(canvas);
window.removeEventListener('resize', resize);
}
}, [ resize ]);
if(!element) return;
element.appendChild(canvas);
}, []);
return (
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
{ roomSession &&
<>
<RoomColorView />
<RoomWidgetsView />
{ roomSession.isSpectator && <RoomSpectatorView /> }
</> }

View File

@ -1,31 +1,79 @@
import { IRoomSession, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
import { useCallback, useEffect, useState } from 'react';
import { ColorConverter, IRoomSession, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectHSLColorEnabledEvent, RoomObjectOperationType, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
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 { useRoomEngineEvent, useRoomSessionManagerEvent } from '../events';
import { CanManipulateFurniture, DispatchUiEvent, GetNitroInstance, GetRoomEngine, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomObjectEvent, SetActiveRoomId, StartRoomSession } from '../../api';
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(!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);
if(!roomBackground) return;
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);

View File

@ -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);