mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 15:40:51 +01:00
Dimmer updates
This commit is contained in:
Bill
parent
a55f33578e
commit
ae0bf4d777
@ -1,14 +1,14 @@
|
||||
export class RoomDimmerPreset
|
||||
{
|
||||
private _id: number;
|
||||
private _bgOnly: boolean;
|
||||
private _color: string;
|
||||
private _type: number;
|
||||
private _color: number;
|
||||
private _brightness: number;
|
||||
|
||||
constructor(id: number, bgOnly: boolean, color: string, brightness: number)
|
||||
constructor(id: number, type: number, color: number, brightness: number)
|
||||
{
|
||||
this._id = id;
|
||||
this._bgOnly = bgOnly;
|
||||
this._type = type;
|
||||
this._color = color;
|
||||
this._brightness = brightness;
|
||||
}
|
||||
@ -18,12 +18,12 @@ export class RoomDimmerPreset
|
||||
return this._id;
|
||||
}
|
||||
|
||||
public get bgOnly(): boolean
|
||||
public get type(): number
|
||||
{
|
||||
return this._bgOnly;
|
||||
return this._type;
|
||||
}
|
||||
|
||||
public get color(): string
|
||||
public get color(): number
|
||||
{
|
||||
return this._color;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { RoomDimmerPreset } from './RoomDimmerPreset';
|
||||
import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
|
||||
|
||||
export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
|
||||
export class RoomWidgetUpdateDimmerEvent extends RoomWidgetUpdateEvent
|
||||
{
|
||||
public static PRESETS: string = 'RWDUE_PRESETS';
|
||||
public static HIDE: string = 'RWDUE_HIDE';
|
||||
public static PRESETS: string = 'RWUDE_PRESETS';
|
||||
public static HIDE: string = 'RWUDE_HIDE';
|
||||
|
||||
private _selectedPresetId: number = 0;
|
||||
private _presets: RoomDimmerPreset[];
|
||||
@ -36,9 +36,9 @@ export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
|
||||
this._selectedPresetId = k;
|
||||
}
|
||||
|
||||
public setPresetValues(id: number, bgOnly: boolean, color: string, brightness: number):void
|
||||
public setPresetValues(id: number, type: number, color: number, brightness: number):void
|
||||
{
|
||||
const preset = new RoomDimmerPreset(id, bgOnly, color, brightness);
|
||||
const preset = new RoomDimmerPreset(id, type, color, brightness);
|
||||
|
||||
this._presets[(id - 1)] = preset;
|
||||
}
|
||||
@ -1,8 +1,8 @@
|
||||
import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
|
||||
|
||||
export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
|
||||
export class RoomWidgetUpdateDimmerStateEvent extends RoomWidgetUpdateEvent
|
||||
{
|
||||
public static DIMMER_STATE: string = 'RWDSUE_DIMMER_STATE';
|
||||
public static DIMMER_STATE: string = 'RWUDSE_DIMMER_STATE';
|
||||
|
||||
private _state: number;
|
||||
private _presetId: number;
|
||||
@ -12,7 +12,7 @@ export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
|
||||
|
||||
constructor(state: number, presetId: number, effectId: number, color: number, brightness: number)
|
||||
{
|
||||
super(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE);
|
||||
super(RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE);
|
||||
|
||||
this._state = state;
|
||||
this._presetId = presetId;
|
||||
@ -1,8 +1,8 @@
|
||||
export * from './IPhotoData';
|
||||
export * from './RoomDimmerPreset';
|
||||
export * from './RoomObjectItem';
|
||||
export * from './RoomWidgetAvatarInfoEvent';
|
||||
export * from './RoomWidgetChooserContentEvent';
|
||||
export * from './RoomWidgetDimmerUpdateEvent';
|
||||
export * from './RoomWidgetDoorbellEvent';
|
||||
export * from './RoomWidgetFloodControlEvent';
|
||||
export * from './RoomWidgetObjectNameEvent';
|
||||
@ -13,6 +13,8 @@ export * from './RoomWidgetUpdateChatEvent';
|
||||
export * from './RoomWidgetUpdateChatInputContentEvent';
|
||||
export * from './RoomWidgetUpdateCustomStackHeightEvent';
|
||||
export * from './RoomWidgetUpdateDanceStatusEvent';
|
||||
export * from './RoomWidgetUpdateDimmerEvent';
|
||||
export * from './RoomWidgetUpdateDimmerStateEvent';
|
||||
export * from './RoomWidgetUpdateEvent';
|
||||
export * from './RoomWidgetUpdateExternalImageEvent';
|
||||
export * from './RoomWidgetUpdateInfostandEvent';
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import { NitroEvent, RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomSessionDimmerPresetsEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
|
||||
import { GetRoomEngine } from '../..';
|
||||
import { GetSessionDataManager } from '../../..';
|
||||
import { RoomWidgetDimmerUpdateEvent, RoomWidgetUpdateEvent } from '../events';
|
||||
import { RoomWidgetDimmerStateUpdateEvent } from '../events/RoomWidgetDimmerStateUpdateEvent';
|
||||
import { RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateEvent } from '../events';
|
||||
import { RoomWidgetUpdateDimmerStateEvent } from '../events/RoomWidgetUpdateDimmerStateEvent';
|
||||
import { RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
|
||||
import { RoomWidgetDimmerSavePresetMessage } from '../messages/RoomWidgetDimmerSavePresetMessage';
|
||||
import { RoomWidgetHandler } from './RoomWidgetHandler';
|
||||
@ -14,8 +14,8 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
|
||||
switch(event.type)
|
||||
{
|
||||
case RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS: {
|
||||
const presetsEvent = (event as RoomSessionDimmerPresetsEvent);
|
||||
const updateEvent = new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.PRESETS);
|
||||
const presetsEvent = (event as RoomSessionDimmerPresetsEvent);
|
||||
const updateEvent = new RoomWidgetUpdateDimmerEvent(RoomWidgetUpdateDimmerEvent.PRESETS);
|
||||
|
||||
updateEvent.selectedPresetId = presetsEvent.selectedPresetId;
|
||||
|
||||
@ -25,7 +25,7 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
|
||||
{
|
||||
const preset = presetsEvent.getPreset(i);
|
||||
|
||||
if(preset) updateEvent.setPresetValues(preset.id, preset.bgOnly, preset.color, preset.brightness);
|
||||
if(preset) updateEvent.setPresetValues(preset.id, preset.type, preset.color, preset.brightness);
|
||||
|
||||
i++;
|
||||
}
|
||||
@ -36,11 +36,11 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
|
||||
case RoomEngineDimmerStateEvent.ROOM_COLOR: {
|
||||
const stateEvent = (event as RoomEngineDimmerStateEvent);
|
||||
|
||||
this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
|
||||
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateDimmerStateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
|
||||
return;
|
||||
}
|
||||
case RoomEngineTriggerWidgetEvent.REMOVE_DIMMER: {
|
||||
this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.HIDE));
|
||||
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateDimmerEvent(RoomWidgetUpdateDimmerEvent.HIDE));
|
||||
return;
|
||||
}
|
||||
}
|
||||
@ -52,27 +52,30 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
|
||||
{
|
||||
case RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER: {
|
||||
if(this.canOpenWidget()) this.container.roomSession.requestMoodlightSettings();
|
||||
|
||||
break;
|
||||
}
|
||||
case RoomWidgetDimmerSavePresetMessage.SAVE_PRESET: {
|
||||
if(this.canOpenWidget())
|
||||
{
|
||||
const savePresetMessage = (message as RoomWidgetDimmerSavePresetMessage);
|
||||
|
||||
this.container.roomSession.updateMoodlightData(savePresetMessage.presetNumber, savePresetMessage.effectTypeId, savePresetMessage.color, savePresetMessage.brightness, savePresetMessage.apply);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case RoomWidgetDimmerChangeStateMessage.CHANGE_STATE: {
|
||||
if(this.canOpenWidget()) this.container.roomSession.toggleMoodlightState();
|
||||
|
||||
break;
|
||||
}
|
||||
case RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET: {
|
||||
const roomId = this.container.roomSession.roomId;
|
||||
const previewMessage = (message as RoomWidgetDimmerPreviewMessage);
|
||||
|
||||
if(!previewMessage || !GetRoomEngine()) return null;
|
||||
const roomId = this.container.roomSession.roomId;
|
||||
const previewMessage = (message as RoomWidgetDimmerPreviewMessage);
|
||||
|
||||
GetRoomEngine().updateObjectRoomColor(roomId, previewMessage.color, previewMessage.brightness, previewMessage.bgOnly);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,4 +4,14 @@ export class ColorUtils
|
||||
{
|
||||
return ('#' + color);
|
||||
}
|
||||
|
||||
public static makeColorNumberHex(color: number): string
|
||||
{
|
||||
return ( '#' + color.toString(16));
|
||||
}
|
||||
|
||||
public static convertFromHex(color: string): number
|
||||
{
|
||||
return parseInt(color.replace('#', ''), 16);
|
||||
}
|
||||
}
|
||||
|
||||
6
src/hooks/BatchUpdates.ts
Normal file
6
src/hooks/BatchUpdates.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { unstable_batchedUpdates } from 'react-dom';
|
||||
|
||||
export const BatchUpdates = (callback: () => any) =>
|
||||
{
|
||||
return unstable_batchedUpdates(callback);
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
export * from './BatchUpdates';
|
||||
export * from './events';
|
||||
export * from './events/core';
|
||||
export * from './events/nitro';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer';
|
||||
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 { UseMountEffect } from '../../hooks';
|
||||
@ -12,7 +12,7 @@ export const RoomColorView: FC<{}> = props =>
|
||||
const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
|
||||
const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
|
||||
const [ roomFilterColor, setRoomFilterColor ] = useState(-1);
|
||||
const { roomSession = null, canvasId = -1, eventDispatcher = null } = useRoomContext();
|
||||
const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
|
||||
|
||||
const getRenderingCanvas = useCallback(() =>
|
||||
{
|
||||
@ -139,11 +139,15 @@ export const RoomColorView: FC<{}> = props =>
|
||||
|
||||
return;
|
||||
}
|
||||
case RoomEngineDimmerStateEvent.ROOM_COLOR: {
|
||||
widgetHandler.processEvent(event);
|
||||
}
|
||||
}
|
||||
}, [ updateRoomBackgroundColor, updateRoomFilterColor ]);
|
||||
}, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilterColor ]);
|
||||
|
||||
useRoomEngineEvent(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, onRoomEngineEvent);
|
||||
useRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, onRoomEngineEvent);
|
||||
useRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
|
||||
|
||||
const onRoomWidgetUpdateRoomViewEvent = useCallback((event: RoomWidgetUpdateRoomViewEvent) =>
|
||||
{
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { RoomEngineDimmerStateEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
|
||||
import { RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback } from 'react';
|
||||
import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
|
||||
import { RoomWidgetDimmerStateUpdateEvent } from '../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
|
||||
import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
|
||||
import { useRoomContext } from '../context/RoomContext';
|
||||
import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
|
||||
@ -42,19 +41,12 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
|
||||
|
||||
return;
|
||||
}
|
||||
case RoomEngineDimmerStateEvent.ROOM_COLOR: {
|
||||
const stateEvent = (event as RoomEngineDimmerStateEvent);
|
||||
|
||||
eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, [ eventDispatcher ]);
|
||||
|
||||
useRoomEngineEvent(RoomEngineEvent.NORMAL_MODE, onRoomEngineEvent);
|
||||
useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent);
|
||||
useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent);
|
||||
useRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent);
|
||||
|
||||
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
|
||||
{
|
||||
@ -125,6 +117,9 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
|
||||
case RoomEngineTriggerWidgetEvent.REQUEST_PRESENT:
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_PRESENT, objectId, category, event.roomId));
|
||||
break;
|
||||
case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER:
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, objectId, category, event.roomId));
|
||||
break;
|
||||
case RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY:
|
||||
case RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM:
|
||||
case RoomEngineTriggerWidgetEvent.OPEN_WIDGET:
|
||||
@ -156,6 +151,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
|
||||
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_WIDGET, onRoomEngineObjectEvent);
|
||||
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_WIDGET, onRoomEngineObjectEvent);
|
||||
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
|
||||
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onRoomEngineObjectEvent);
|
||||
useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_INVENTORY, onRoomEngineObjectEvent);
|
||||
useRoomEngineEvent(RoomEngineUseProductEvent.USE_PRODUCT_FROM_ROOM, onRoomEngineObjectEvent);
|
||||
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
export class DimmerFurnitureWidgetPresetItem
|
||||
{
|
||||
constructor(
|
||||
public id: number = 0,
|
||||
public type: number = 0,
|
||||
public color: number = 0,
|
||||
public light: number = 0) {}
|
||||
}
|
||||
@ -1,175 +1,206 @@
|
||||
import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
|
||||
import { NitroEvent } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import ReactSlider from 'react-slider';
|
||||
import { GetConfiguration, GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
|
||||
import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
|
||||
import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
|
||||
import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
|
||||
import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks';
|
||||
import { ColorUtils, GetConfiguration, LocalizeText, RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetUpdateDimmerEvent, RoomWidgetUpdateDimmerStateEvent } from '../../../../../api';
|
||||
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
|
||||
import { useRoomContext } from '../../../context/RoomContext';
|
||||
import { FurnitureDimmerData } from './FurnitureDimmerData';
|
||||
import { DimmerFurnitureWidgetPresetItem } from './DimmerFurnitureWidgetPresetItem';
|
||||
|
||||
const DEFAULT_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
|
||||
const AVAILABLE_COLORS: number[] = [7665141, 21495, 15161822, 15353138, 15923281, 8581961, 0];
|
||||
const HTML_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
|
||||
const MIN_BRIGHTNESS: number = 75;
|
||||
const MAX_BRIGHTNESS: number = 255;
|
||||
|
||||
export const FurnitureDimmerView: FC<{}> = props =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const [ presets, setPresets ] = useState<DimmerFurnitureWidgetPresetItem[]>([]);
|
||||
const [ selectedPresetId, setSelectedPresetId ] = useState(0);
|
||||
const [ dimmerState, setDimmerState ] = useState(0);
|
||||
const [ lastDimmerState, setLastDimmerState ] = useState(0);
|
||||
const [ effectId, setEffectId ] = useState(0);
|
||||
const [ color, setColor ] = useState(0xFFFFFF);
|
||||
const [ brightness, setBrightness ] = useState(0xFF);
|
||||
const [ selectedEffectId, setSelectedEffectId ] = useState(0);
|
||||
const [ selectedColor, setSelectedColor ] = useState(0);
|
||||
const [ selectedBrightness, setSelectedBrightness ] = useState(0);
|
||||
const [ needsUpdate, setNeedsUpdate ] = useState(true);
|
||||
|
||||
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
|
||||
const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
|
||||
|
||||
const [ isActive, setIsActive ] = useState<boolean>(false);
|
||||
const [ isFreeColorMode, setIsFreeColorMode ] = useState<boolean>(false);
|
||||
const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
|
||||
const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
|
||||
|
||||
const [ previewColor, setPreviewColor ] = useState<string>('#000000');
|
||||
const [ previewBrightness, setPreviewBrightness ] = useState<number>(125);
|
||||
const [ previewBgOnly, setPreviewBgOnly ] = useState<boolean>(false);
|
||||
|
||||
const previewColorInt = useMemo(() =>
|
||||
{
|
||||
return parseInt(previewColor.replace('#', ''), 16);
|
||||
}, [ previewColor ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(GetConfiguration<boolean>('widget.dimmer.colorwheel')) setIsFreeColorMode(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
|
||||
|
||||
const preset = presets[selectedPresetId - 1];
|
||||
|
||||
if(!preset) return;
|
||||
|
||||
setPreviewColor(preset.color);
|
||||
setPreviewBrightness(preset.brightness);
|
||||
setPreviewBgOnly(preset.bgOnly);
|
||||
}, [ selectedPresetId, presets ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!widgetHandler || selectedPresetId === -1 || !isActive) return;
|
||||
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(previewColorInt, previewBrightness, previewBgOnly));
|
||||
}, [ previewBgOnly, previewBrightness, previewColor ]);
|
||||
|
||||
const onNitroEvent = useCallback((event: NitroEvent) =>
|
||||
{
|
||||
switch(event.type)
|
||||
{
|
||||
case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
|
||||
const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
|
||||
|
||||
const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
|
||||
|
||||
if(!roomObject) return;
|
||||
case RoomWidgetUpdateDimmerEvent.PRESETS: {
|
||||
const widgetEvent = (event as RoomWidgetUpdateDimmerEvent);
|
||||
|
||||
setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category));
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId));
|
||||
return;
|
||||
}
|
||||
case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
|
||||
const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
|
||||
const presets: DimmerFurnitureWidgetPresetItem[] = [];
|
||||
|
||||
setDimmerData(prevState =>
|
||||
{
|
||||
if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
|
||||
for(const preset of widgetEvent.presets) presets.push(new DimmerFurnitureWidgetPresetItem(preset.id, preset.type, preset.color, preset.brightness));
|
||||
|
||||
return null;
|
||||
});
|
||||
return;
|
||||
}
|
||||
case RoomWidgetDimmerUpdateEvent.PRESETS: {
|
||||
const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
|
||||
|
||||
setPresets(widgetEvent.presets);
|
||||
setPresets(presets);
|
||||
setSelectedPresetId(widgetEvent.selectedPresetId);
|
||||
setIsVisible(true);
|
||||
return;
|
||||
}
|
||||
case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
|
||||
const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
|
||||
case RoomWidgetUpdateDimmerEvent.HIDE: {
|
||||
setIsVisible(false);
|
||||
|
||||
setIsActive(widgetEvent.state === 1);
|
||||
return;
|
||||
}
|
||||
case RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE: {
|
||||
const widgetEvent = (event as RoomWidgetUpdateDimmerStateEvent);
|
||||
|
||||
BatchUpdates(() =>
|
||||
{
|
||||
let prevDimmerState = 0;
|
||||
|
||||
setDimmerState(prevValue =>
|
||||
{
|
||||
prevDimmerState = prevValue;
|
||||
|
||||
return widgetEvent.state;
|
||||
});
|
||||
|
||||
setLastDimmerState(prevDimmerState);
|
||||
setSelectedPresetId(widgetEvent.presetId);
|
||||
setEffectId(widgetEvent.effectId);
|
||||
setSelectedEffectId(widgetEvent.effectId);
|
||||
setColor(widgetEvent.color);
|
||||
setSelectedColor(widgetEvent.color);
|
||||
setBrightness(widgetEvent.brightness);
|
||||
setSelectedBrightness(widgetEvent.brightness);
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.PRESETS, eventDispatcher, onNitroEvent);
|
||||
CreateEventDispatcherHook(RoomWidgetUpdateDimmerEvent.HIDE, eventDispatcher, onNitroEvent);
|
||||
CreateEventDispatcherHook(RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
|
||||
|
||||
const selectPresetId = useCallback((id: number) =>
|
||||
{
|
||||
const preset = presets[(id - 1)];
|
||||
|
||||
if(!preset) return;
|
||||
|
||||
setSelectedPresetId(preset.id);
|
||||
setSelectedEffectId(preset.type);
|
||||
setSelectedColor(preset.color);
|
||||
setSelectedBrightness(preset.light);
|
||||
}, [ presets ]);
|
||||
|
||||
const close = useCallback(() =>
|
||||
{
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(color, brightness, (effectId === 2)));
|
||||
|
||||
setIsVisible(false);
|
||||
}, [ widgetHandler, color, brightness, effectId ]);
|
||||
|
||||
const toggleState = useCallback(() =>
|
||||
{
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
|
||||
}, [ widgetHandler ]);
|
||||
|
||||
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
|
||||
CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
|
||||
CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.PRESETS, eventDispatcher, onNitroEvent);
|
||||
CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
|
||||
|
||||
const processAction = useCallback((type: string) =>
|
||||
const applyChanges = useCallback(() =>
|
||||
{
|
||||
switch(type)
|
||||
{
|
||||
case 'toggle_state':
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
|
||||
return;
|
||||
case 'close':
|
||||
setDimmerData(null);
|
||||
return;
|
||||
case 'save':
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(selectedPresetId, previewBgOnly ? 2 : 1, previewColorInt, previewBrightness, true));
|
||||
return;
|
||||
}
|
||||
}, [ previewBgOnly, previewBrightness, previewColorInt, selectedPresetId, widgetHandler ]);
|
||||
if(dimmerState === 0) return;
|
||||
|
||||
if(!dimmerData) return null;
|
||||
const selectedPresetIndex = (selectedPresetId - 1);
|
||||
|
||||
if((selectedPresetId < 1) || (selectedPresetId > presets.length)) return;
|
||||
|
||||
const preset = presets[selectedPresetIndex];
|
||||
|
||||
if(!preset || ((selectedEffectId === preset.type) && (selectedColor === preset.color) && (selectedBrightness === preset.light))) return;
|
||||
|
||||
setPresets(prevValue =>
|
||||
{
|
||||
const newValue = [ ...prevValue ];
|
||||
|
||||
newValue[selectedPresetIndex] = new DimmerFurnitureWidgetPresetItem(preset.id, selectedEffectId, selectedColor, selectedBrightness);
|
||||
|
||||
return newValue;
|
||||
});
|
||||
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(preset.id, selectedEffectId, selectedColor, selectedBrightness, true));
|
||||
}, [ widgetHandler, dimmerState, selectedPresetId, presets, selectedEffectId, selectedColor, selectedBrightness ]);
|
||||
|
||||
const scaledBrightness = useCallback((value: number) =>
|
||||
{
|
||||
return ~~((((value - MIN_BRIGHTNESS) * (100 - 0)) / (MAX_BRIGHTNESS - MIN_BRIGHTNESS)) + 0);
|
||||
}, []);
|
||||
|
||||
const isFreeColorMode = useMemo(() =>
|
||||
{
|
||||
return GetConfiguration<boolean>('widget.dimmer.colorwheel', false);
|
||||
}, []);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if((dimmerState === 0) && (lastDimmerState === 0)) return;
|
||||
|
||||
widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(selectedColor, selectedBrightness, (selectedEffectId === 2)));
|
||||
}, [ widgetHandler, dimmerState, lastDimmerState, selectedColor, selectedBrightness, selectedEffectId ]);
|
||||
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="nitro-dimmer">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
|
||||
<NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ close } />
|
||||
<NitroCardContentView className="p-0">
|
||||
{ !isActive && <div className="d-flex flex-column gap-2 align-items-center p-2">
|
||||
<div className="dimmer-banner"></div>
|
||||
<div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
|
||||
<button className="btn-success btn w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.on') }</button>
|
||||
</div> }
|
||||
{ isActive && <>
|
||||
<NitroCardTabsView>
|
||||
{ presets.map(preset =>
|
||||
{
|
||||
return <NitroCardTabsItemView key={ preset.id } isActive={ selectedPresetId === preset.id } onClick={ () => setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<div className="p-2">
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
|
||||
{ isFreeColorMode && <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } /> }
|
||||
{ !isFreeColorMode && <div className="d-flex gap-2">
|
||||
{ DEFAULT_COLORS.map((color, index) =>
|
||||
{ (dimmerState === 0) &&
|
||||
<div className="d-flex flex-column gap-2 align-items-center p-2">
|
||||
<div className="dimmer-banner"></div>
|
||||
<div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
|
||||
<button className="btn-success btn w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.on') }</button>
|
||||
</div> }
|
||||
{ (dimmerState === 1) &&
|
||||
<>
|
||||
<NitroCardTabsView>
|
||||
{ presets.map(preset =>
|
||||
{
|
||||
return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setPreviewColor(color) } style={{ backgroundColor: color }}></div>;
|
||||
return <NitroCardTabsItemView key={ preset.id } isActive={ (selectedPresetId === preset.id) } onClick={ event => selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
|
||||
}) }
|
||||
</div> }
|
||||
|
||||
</NitroCardTabsView>
|
||||
<div className="p-2">
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
|
||||
{ isFreeColorMode &&
|
||||
<input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(selectedColor) } onChange={ event => setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> }
|
||||
{ !isFreeColorMode &&
|
||||
<div className="d-flex gap-2">
|
||||
{ AVAILABLE_COLORS.map((color, index) =>
|
||||
{
|
||||
return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}></div>;
|
||||
}) }
|
||||
</div> }
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ MIN_BRIGHTNESS }
|
||||
max={ MAX_BRIGHTNESS }
|
||||
value={ selectedBrightness }
|
||||
onChange={ value => setSelectedBrightness(value) }
|
||||
thumbClassName={ 'thumb percent' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ scaledBrightness(state.valueNow) }</div> } />
|
||||
</div>
|
||||
<div className="form-check mb-2">
|
||||
<input className="form-check-input" type="checkbox" checked={ (selectedEffectId === 2) } onChange={ event => setSelectedEffectId(event.target.checked ? 2 : 1) } />
|
||||
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<button className="btn btn-danger w-100" onClick={ toggleState }>{ LocalizeText('widget.dimmer.button.off') }</button>
|
||||
<button className="btn btn-success w-100" onClick={ applyChanges }>{ LocalizeText('widget.dimmer.button.apply') }</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group mb-2">
|
||||
<label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
|
||||
<ReactSlider
|
||||
className={ 'nitro-slider' }
|
||||
min={ 75 }
|
||||
max={ 255 }
|
||||
value={ previewBrightness }
|
||||
onChange={ newValue => setPreviewBrightness(newValue) }
|
||||
thumbClassName={ 'thumb degree' }
|
||||
renderThumb={ (props, state) => <div {...props}>{ state.valueNow - 75 }</div> } />
|
||||
</div>
|
||||
<div className="form-check mb-2">
|
||||
<input className="form-check-input" type="checkbox" checked={ previewBgOnly } onChange={ (e) => setPreviewBgOnly(e.target.checked) } />
|
||||
<label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
|
||||
</div>
|
||||
<div className="d-flex gap-2">
|
||||
<button className="btn btn-danger w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.off') }</button>
|
||||
<button className="btn btn-success w-100" onClick={ () => processAction('save') }>{ LocalizeText('widget.dimmer.button.apply') }</button>
|
||||
</div>
|
||||
</div>
|
||||
</> }
|
||||
</> }
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user