2021-09-16 00:58:11 +02:00
|
|
|
import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineDimmerStateEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
|
2021-07-13 06:31:56 +02:00
|
|
|
import { FC, useCallback, useState } from 'react';
|
2021-08-17 05:38:07 +02:00
|
|
|
import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomViewEvent } from '../../api';
|
2021-07-13 06:31:56 +02:00
|
|
|
import { UseMountEffect } from '../../hooks';
|
|
|
|
import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../hooks/events';
|
|
|
|
import { useRoomContext } from './context/RoomContext';
|
|
|
|
|
|
|
|
export const RoomColorView: FC<{}> = props =>
|
|
|
|
{
|
|
|
|
const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
|
2021-07-16 19:17:52 +02:00
|
|
|
const [ roomBackgroundColor, setRoomBackgroundColor ] = useState(0);
|
|
|
|
const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
|
2021-07-13 06:31:56 +02:00
|
|
|
const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
|
2021-09-16 00:58:11 +02:00
|
|
|
const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
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);
|
2021-07-13 19:30:20 +02:00
|
|
|
const background = new NitroSprite(NitroTexture.WHITE);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
displayObject.addChildAt(background, 0);
|
|
|
|
|
|
|
|
setRoomBackground(background);
|
|
|
|
|
|
|
|
return background;
|
|
|
|
}, [ roomBackground, getRenderingCanvas ]);
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
const updateRoomBackground = useCallback((color: number) =>
|
2021-07-13 06:31:56 +02:00
|
|
|
{
|
|
|
|
const background = getRoomBackground();
|
|
|
|
|
|
|
|
if(!background) return;
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
if(color === undefined) color = 0x000000;
|
|
|
|
|
|
|
|
background.tint = color;
|
2021-07-22 07:10:13 +02:00
|
|
|
background.width = GetNitroInstance().width;
|
|
|
|
background.height = GetNitroInstance().height;
|
2021-07-16 19:17:52 +02:00
|
|
|
}, [ getRoomBackground ]);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
const updateRoomBackgroundColor = useCallback((hue: number, saturation: number, lightness: number, original: boolean = false) =>
|
2021-07-13 06:31:56 +02:00
|
|
|
{
|
2021-07-16 19:17:52 +02:00
|
|
|
const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
|
|
|
|
|
|
|
|
setRoomBackgroundColor(newColor);
|
|
|
|
if(original) setOriginalRoomBackgroundColor(newColor);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
const background = getRoomBackground();
|
|
|
|
|
|
|
|
if(!background) return;
|
|
|
|
|
|
|
|
if(!hue && !saturation && !lightness)
|
|
|
|
{
|
|
|
|
background.visible = false;
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
2021-07-16 19:17:52 +02:00
|
|
|
updateRoomBackground(newColor);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
background.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;
|
|
|
|
|
2021-07-13 19:30:20 +02:00
|
|
|
const filter = new NitroAdjustmentFilter();
|
|
|
|
|
|
|
|
setRoomFilter(filter);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
2021-07-13 19:30:20 +02:00
|
|
|
display.filters = [ filter ];
|
2021-07-13 06:31:56 +02:00
|
|
|
|
2021-07-13 19:30:20 +02:00
|
|
|
return filter;
|
2021-07-13 06:31:56 +02:00
|
|
|
}, [ roomFilter, getRenderingCanvas ]);
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
const updateRoomFilter = useCallback((color: number) =>
|
2021-07-13 06:31:56 +02:00
|
|
|
{
|
|
|
|
const colorMatrix = getRoomFilter();
|
|
|
|
|
|
|
|
if(!colorMatrix) return;
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
const r = ((color >> 16) & 0xFF);
|
|
|
|
const g = ((color >> 8) & 0xFF);
|
|
|
|
const b = (color & 0xFF);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
colorMatrix.red = (r / 255);
|
|
|
|
colorMatrix.green = (g / 255);
|
|
|
|
colorMatrix.blue = (b / 255);
|
2021-07-16 19:17:52 +02:00
|
|
|
}, [ getRoomFilter ]);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
const updateRoomFilterColor = useCallback((color: number, brightness: number) =>
|
|
|
|
{
|
2021-07-16 19:17:52 +02:00
|
|
|
const newColor = ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness));
|
2021-07-13 06:31:56 +02:00
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
updateRoomFilter(newColor);
|
2021-07-13 06:31:56 +02:00
|
|
|
}, [ updateRoomFilter ]);
|
|
|
|
|
|
|
|
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
|
|
|
|
{
|
2021-07-13 19:30:20 +02:00
|
|
|
if(RoomId.isRoomPreviewerId(event.roomId)) return;
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR: {
|
|
|
|
const hslColorEvent = (event as RoomObjectHSLColorEnabledEvent);
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
if(hslColorEvent.enable) updateRoomBackgroundColor(hslColorEvent.hue, hslColorEvent.saturation, hslColorEvent.lightness, true);
|
|
|
|
else updateRoomBackgroundColor(0, 0, 0, true);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
case RoomBackgroundColorEvent.ROOM_COLOR: {
|
|
|
|
const colorEvent = (event as RoomBackgroundColorEvent);
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
if(colorEvent.bgOnly) updateRoomFilterColor(0x000000, 0xFF);
|
2021-07-13 06:31:56 +02:00
|
|
|
else updateRoomFilterColor(colorEvent.color, colorEvent.brightness);
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
2021-09-16 00:58:11 +02:00
|
|
|
case RoomEngineDimmerStateEvent.ROOM_COLOR: {
|
|
|
|
widgetHandler.processEvent(event);
|
|
|
|
}
|
2021-07-13 06:31:56 +02:00
|
|
|
}
|
2021-09-16 00:58:11 +02:00
|
|
|
}, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilterColor ]);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
useRoomEngineEvent(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, onRoomEngineEvent);
|
|
|
|
useRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, onRoomEngineEvent);
|
2021-09-16 00:58:11 +02:00
|
|
|
useRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
const onRoomWidgetUpdateRoomViewEvent = useCallback((event: RoomWidgetUpdateRoomViewEvent) =>
|
|
|
|
{
|
2021-07-16 19:17:52 +02:00
|
|
|
updateRoomBackground(roomBackgroundColor);
|
|
|
|
}, [ roomBackgroundColor, updateRoomBackground ]);
|
2021-07-13 06:31:56 +02:00
|
|
|
|
|
|
|
CreateEventDispatcherHook(RoomWidgetUpdateRoomViewEvent.SIZE_CHANGED, eventDispatcher, onRoomWidgetUpdateRoomViewEvent);
|
|
|
|
|
2021-07-16 19:17:52 +02:00
|
|
|
const onRoomWidgetUpdateBackgroundColorPreviewEvent = useCallback((event: RoomWidgetUpdateBackgroundColorPreviewEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW: {
|
|
|
|
updateRoomBackgroundColor(event.hue, event.saturation, event.lightness);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
case RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW: {
|
|
|
|
const color = originalRoomBackgroundColor;
|
|
|
|
|
|
|
|
setRoomBackgroundColor(color);
|
|
|
|
updateRoomBackground(color);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [ originalRoomBackgroundColor, updateRoomBackgroundColor, updateRoomBackground ]);
|
|
|
|
|
|
|
|
CreateEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent);
|
|
|
|
CreateEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent);
|
|
|
|
|
2021-07-13 06:31:56 +02:00
|
|
|
UseMountEffect(updateRoomBackground);
|
|
|
|
|
|
|
|
return null;
|
|
|
|
}
|