mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 15:40:51 +01:00
Fix canvas / background resizing
This commit is contained in:
Bill
parent
5fd0cdd21b
commit
9888183ff2
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
return () =>
|
||||
{
|
||||
if(element) element.removeChild(canvas);
|
||||
|
||||
window.removeEventListener('resize', resize);
|
||||
}
|
||||
}, [ resize ]);
|
||||
element.appendChild(canvas);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
|
||||
{ roomSession &&
|
||||
<>
|
||||
<RoomColorView />
|
||||
<RoomWidgetsView />
|
||||
{ roomSession.isSpectator && <RoomSpectatorView /> }
|
||||
</> }
|
||||
|
||||
@ -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(!roomBackground) return;
|
||||
|
||||
if(!canvas) return;
|
||||
const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
|
||||
|
||||
canvas.style.width = `${ Math.floor(window.innerWidth) }px`;
|
||||
canvas.style.height = `${ Math.floor(window.innerHeight) }px`;
|
||||
if(original) setOriginalRoomBackgroundColor(newColor);
|
||||
|
||||
const nitroInstance = GetNitroInstance();
|
||||
if(!hue && !saturation && !lightness)
|
||||
{
|
||||
roomBackground.tint = 0;
|
||||
}
|
||||
else
|
||||
{
|
||||
roomBackground.tint = newColor;
|
||||
}
|
||||
}
|
||||
|
||||
nitroInstance.renderer.resolution = window.devicePixelRatio;
|
||||
nitroInstance.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
const updateRoomFilter = (color: number) =>
|
||||
{
|
||||
if(!roomFilter) return;
|
||||
|
||||
InitializeRoomInstanceRenderingCanvas(window.innerWidth, window.innerHeight, 1);
|
||||
const r = ((color >> 16) & 0xFF);
|
||||
const g = ((color >> 8) & 0xFF);
|
||||
const b = (color & 0xFF);
|
||||
|
||||
nitroInstance.render();
|
||||
}, []);
|
||||
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);
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user