From ae0bf4d777d7e8f561a6fedd3e4dea9ba7400850 Mon Sep 17 00:00:00 2001 From: Bill Date: Wed, 15 Sep 2021 18:58:11 -0400 Subject: [PATCH] Dimmer updates --- .../room/widgets/events/RoomDimmerPreset.ts | 14 +- ...vent.ts => RoomWidgetUpdateDimmerEvent.ts} | 10 +- ...ts => RoomWidgetUpdateDimmerStateEvent.ts} | 6 +- src/api/nitro/room/widgets/events/index.ts | 4 +- .../handlers/FurnitureDimmerWidgetHandler.ts | 25 +- src/api/utils/ColorUtils.ts | 10 + src/hooks/BatchUpdates.ts | 6 + src/hooks/index.ts | 1 + src/views/room/RoomColorView.tsx | 10 +- src/views/room/widgets/RoomWidgetsView.tsx | 14 +- .../dimmer/DimmerFurnitureWidgetPresetItem.ts | 8 + .../furniture/dimmer/FurnitureDimmerView.tsx | 305 ++++++++++-------- 12 files changed, 237 insertions(+), 176 deletions(-) rename src/api/nitro/room/widgets/events/{RoomWidgetDimmerUpdateEvent.ts => RoomWidgetUpdateDimmerEvent.ts} (71%) rename src/api/nitro/room/widgets/events/{RoomWidgetDimmerStateUpdateEvent.ts => RoomWidgetUpdateDimmerStateEvent.ts} (83%) create mode 100644 src/hooks/BatchUpdates.ts create mode 100644 src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts diff --git a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts index cfae6512..86600d58 100644 --- a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts +++ b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts @@ -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; } diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts similarity index 71% rename from src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts rename to src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts index 74f149b7..82cdb0c6 100644 --- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts +++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerEvent.ts @@ -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; } diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts similarity index 83% rename from src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts rename to src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts index ae1a49b7..27e9fd13 100644 --- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts +++ b/src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts @@ -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; diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts index e70cc1ed..1c214b61 100644 --- a/src/api/nitro/room/widgets/events/index.ts +++ b/src/api/nitro/room/widgets/events/index.ts @@ -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'; diff --git a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts index 0695304a..71e35268 100644 --- a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts +++ b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts @@ -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; } } diff --git a/src/api/utils/ColorUtils.ts b/src/api/utils/ColorUtils.ts index fade642f..ccb6e27a 100644 --- a/src/api/utils/ColorUtils.ts +++ b/src/api/utils/ColorUtils.ts @@ -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); + } } diff --git a/src/hooks/BatchUpdates.ts b/src/hooks/BatchUpdates.ts new file mode 100644 index 00000000..d5f2501a --- /dev/null +++ b/src/hooks/BatchUpdates.ts @@ -0,0 +1,6 @@ +import { unstable_batchedUpdates } from 'react-dom'; + +export const BatchUpdates = (callback: () => any) => +{ + return unstable_batchedUpdates(callback); +} diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 0068322f..4a1a3914 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,3 +1,4 @@ +export * from './BatchUpdates'; export * from './events'; export * from './events/core'; export * from './events/nitro'; diff --git a/src/views/room/RoomColorView.tsx b/src/views/room/RoomColorView.tsx index b3201b7c..693e9e89 100644 --- a/src/views/room/RoomColorView.tsx +++ b/src/views/room/RoomColorView.tsx @@ -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(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) => { diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index 5033181f..8f471dde 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -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 = 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 = 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 = 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); diff --git a/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts b/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts new file mode 100644 index 00000000..3e8009af --- /dev/null +++ b/src/views/room/widgets/furniture/dimmer/DimmerFurnitureWidgetPresetItem.ts @@ -0,0 +1,8 @@ +export class DimmerFurnitureWidgetPresetItem +{ + constructor( + public id: number = 0, + public type: number = 0, + public color: number = 0, + public light: number = 0) {} +} diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx index 42b9d2ab..b8c84901 100644 --- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx +++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx @@ -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([]); + 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(null); - - const [ isActive, setIsActive ] = useState(false); - const [ isFreeColorMode, setIsFreeColorMode ] = useState(false); - const [ selectedPresetId, setSelectedPresetId ] = useState(-1); - const [ presets, setPresets ] = useState([]); - - const [ previewColor, setPreviewColor ] = useState('#000000'); - const [ previewBrightness, setPreviewBrightness ] = useState(125); - const [ previewBgOnly, setPreviewBgOnly ] = useState(false); - - const previewColorInt = useMemo(() => - { - return parseInt(previewColor.replace('#', ''), 16); - }, [ previewColor ]); - - useEffect(() => - { - if(GetConfiguration('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('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 ( - processAction('close') } /> + - { !isActive &&
-
-
{ LocalizeText('widget.dimmer.info.off') }
- -
} - { isActive && <> - - { presets.map(preset => - { - return setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) } - }) } - -
-
- - { isFreeColorMode && setPreviewColor(e.target.value) } /> } - { !isFreeColorMode &&
- { DEFAULT_COLORS.map((color, index) => + { (dimmerState === 0) && +
+
+
{ LocalizeText('widget.dimmer.info.off') }
+ +
} + { (dimmerState === 1) && + <> + + { presets.map(preset => { - return
setPreviewColor(color) } style={{ backgroundColor: color }}>
; + return selectPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) } }) } -
} - + +
+
+ + { isFreeColorMode && + setSelectedColor(ColorUtils.convertFromHex(event.target.value)) } /> } + { !isFreeColorMode && +
+ { AVAILABLE_COLORS.map((color, index) => + { + return
setSelectedColor(color) } style={{ backgroundColor: HTML_COLORS[index] }}>
; + }) } +
} +
+
+ + setSelectedBrightness(value) } + thumbClassName={ 'thumb percent' } + renderThumb={ (props, state) =>
{ scaledBrightness(state.valueNow) }
} /> +
+
+ setSelectedEffectId(event.target.checked ? 2 : 1) } /> + +
+
+ + +
-
- - setPreviewBrightness(newValue) } - thumbClassName={ 'thumb degree' } - renderThumb={ (props, state) =>
{ state.valueNow - 75 }
} /> -
-
- setPreviewBgOnly(e.target.checked) } /> - -
-
- - -
-
- } + } );