diff --git a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx b/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx index 121b7ab..919348b 100644 --- a/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx +++ b/src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx @@ -1,28 +1,84 @@ -import { FC } from 'react'; +import { ColorConverter } from '@nitrots/nitro-renderer'; +import { FC, useMemo } from 'react'; import { ColorUtils, LocalizeText } from '../../../../api'; -import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common'; +import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Slider, Text } from '../../../../common'; import { useFurnitureBackgroundColorWidget } from '../../../../hooks'; export const FurnitureBackgroundColorView: FC<{}> = props => { - const { objectId = -1, color = 0, setColor = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget(); + const { objectId = -1, hue = 0, saturation = 0, lightness = 0, setHue = null, setSaturation = null, setLightness = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget(); + + const previewColor = useMemo(() => + { + const hsl = ColorUtils.eight_bitVals_to_int(0, hue, saturation, lightness); + + return ColorConverter.hslToRGB(hsl); + }, [ hue, saturation, lightness ]); if(objectId === -1) return null; return ( - - - -
- setColor(ColorUtils.convertFromHex(event.target.value)) } /> + + + +
+
+ { LocalizeText('widget.backgroundcolor.info') } +
+
+
+ { LocalizeText('widget.backgroundcolor.hue') } +
+
} + onChange={ value => setHue(value as number) } /> +
+
+
+ { LocalizeText('widget.backgroundcolor.saturation') } +
+
} + onChange={ value => setSaturation(value as number) } /> +
+
+
+ { LocalizeText('widget.backgroundcolor.lightness') } +
+
} + onChange={ value => setLightness(value as number) } /> +
+
-
- - +
diff --git a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx index d75eab9..92b3402 100644 --- a/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx +++ b/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx @@ -6,8 +6,10 @@ import { useFurnitureStackHeightWidget } from '../../../../hooks'; export const FurnitureStackHeightView: FC<{}> = props => { - const { objectId = -1, height = 0, maxHeight = 40, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget(); + const { objectId = -1, height = 0, maxHeight = 40, isWalkHeightHelper = false, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget(); const [ tempHeight, setTempHeight ] = useState(''); + const titleKey = isWalkHeightHelper ? 'widget.custom.walk.height.title' : 'widget.custom.stack.height.title'; + const textKey = isWalkHeightHelper ? 'widget.custom.walk.height.text' : 'widget.custom.stack.height.text'; const updateTempHeight = (value: string) => { @@ -29,9 +31,9 @@ export const FurnitureStackHeightView: FC<{}> = props => return ( - + - { LocalizeText('widget.custom.stack.height.text') } + { LocalizeText(textKey) }
{ if(objectId === -1) return; + const nextState = (isOn ? 0 : 1); const data = new Map(); - data.set('state', isOn ? '1' : '0'); + data.set('state', nextState.toString()); data.set('rootX', rootX.toString()); data.set('rootY', rootY.toString()); data.set('width', width.toString()); @@ -50,7 +51,6 @@ const useFurnitureAreaHideWidgetState = () => data.set('invert', inverted ? '1' : '0'); SendMessageComposer(new SetObjectDataMessageComposer(objectId, data)); - SendMessageComposer(new FurnitureMultiStateComposer(objectId, isOn ? 0 : 1)); onClose(); }, [ objectId, isOn, rootX, rootY, width, length, invisibility, wallItems, inverted ]); diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts index ca8bd7a..0a74a80 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts @@ -1,6 +1,6 @@ -import { ApplyTonerComposer, ColorConverter, GetRoomEngine, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer'; +import { ApplyTonerComposer, GetRoomEngine, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer'; import { useEffect, useState } from 'react'; -import { CanManipulateFurniture, ColorUtils, DispatchUiEvent, RoomWidgetUpdateBackgroundColorPreviewEvent, SendMessageComposer } from '../../../../api'; +import { CanManipulateFurniture, DispatchUiEvent, RoomWidgetUpdateBackgroundColorPreviewEvent, SendMessageComposer } from '../../../../api'; import { useNitroEvent } from '../../../events'; import { useFurniRemovedEvent } from '../../engine'; import { useRoom } from '../../useRoom'; @@ -9,15 +9,12 @@ const useFurnitureBackgroundColorWidgetState = () => { const [ objectId, setObjectId ] = useState(-1); const [ category, setCategory ] = useState(-1); - const [ color, setColor ] = useState(0); + const [ hue, setHue ] = useState(0); + const [ saturation, setSaturation ] = useState(0); + const [ lightness, setLightness ] = useState(0); const { roomSession = null } = useRoom(); - const applyToner = () => - { - const hsl = ColorConverter.rgbToHSL(color); - const [ _, hue, saturation, lightness ] = ColorUtils.int_to_8BitVals(hsl); - SendMessageComposer(new ApplyTonerComposer(objectId, hue, saturation, lightness)); - }; + const applyToner = () => SendMessageComposer(new ApplyTonerComposer(objectId, hue, saturation, lightness)); const toggleToner = () => roomSession.useMultistateItem(objectId); @@ -27,7 +24,9 @@ const useFurnitureBackgroundColorWidgetState = () => setObjectId(-1); setCategory(-1); - setColor(0); + setHue(0); + setSaturation(0); + setLightness(0); }; useNitroEvent(RoomEngineTriggerWidgetEvent.REQUEST_BACKGROUND_COLOR, event => @@ -39,14 +38,9 @@ const useFurnitureBackgroundColorWidgetState = () => setObjectId(event.objectId); setCategory(event.category); - const hue = parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)); - const saturation = parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)); - const light = parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)); - - const hsl = ColorUtils.eight_bitVals_to_int(0, hue,saturation,light); - - const rgbColor = ColorConverter.hslToRGB(hsl); - setColor(rgbColor); + setHue(parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)) || 0); + setSaturation(parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)) || 0); + setLightness(parseInt(model.getValue(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)) || 0); }); useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event => @@ -60,12 +54,10 @@ const useFurnitureBackgroundColorWidgetState = () => { if((objectId === -1) || (category === -1)) return; - const hls = ColorConverter.rgbToHSL(color); - const [ _, hue, saturation, lightness ] = ColorUtils.int_to_8BitVals(hls); DispatchUiEvent(new RoomWidgetUpdateBackgroundColorPreviewEvent(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, hue, saturation, lightness)); - }, [ objectId, category, color ]); + }, [ objectId, category, hue, saturation, lightness ]); - return { objectId, color, setColor, applyToner, toggleToner, onClose }; + return { objectId, hue, saturation, lightness, setHue, setSaturation, setLightness, applyToner, toggleToner, onClose }; }; export const useFurnitureBackgroundColorWidget = useFurnitureBackgroundColorWidgetState; diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts index 90a2a93..334fb7c 100644 --- a/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts +++ b/src/hooks/rooms/widgets/furniture/useFurnitureStackHeightWidget.ts @@ -5,6 +5,7 @@ import { useMessageEvent, useNitroEvent } from '../../../events'; import { useFurniRemovedEvent } from '../../engine'; const MAX_HEIGHT: number = 40; +const WALK_HEIGHT_HELPER_MODEL_KEY = 'furniture_is_walk_height_helper'; const useFurnitureStackHeightWidgetState = () => { @@ -12,6 +13,7 @@ const useFurnitureStackHeightWidgetState = () => const [ category, setCategory ] = useState(-1); const [ height, setHeight ] = useState(0); const [ pendingHeight, setPendingHeight ] = useState(-1); + const [ isWalkHeightHelper, setIsWalkHeightHelper ] = useState(false); const onClose = () => { @@ -19,6 +21,7 @@ const useFurnitureStackHeightWidgetState = () => setCategory(-1); setHeight(0); setPendingHeight(-1); + setIsWalkHeightHelper(false); }; const updateHeight = (height: number, server: boolean = false) => @@ -55,6 +58,7 @@ const useFurnitureStackHeightWidgetState = () => setCategory(event.category); setHeight(roomObject.getLocation().z); setPendingHeight(-1); + setIsWalkHeightHelper(roomObject.model?.getValue(WALK_HEIGHT_HELPER_MODEL_KEY) > 0); }); useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event => @@ -73,7 +77,7 @@ const useFurnitureStackHeightWidgetState = () => return () => clearTimeout(timeout); }, [ objectId, pendingHeight ]); - return { objectId, height, maxHeight: MAX_HEIGHT, onClose, updateHeight }; + return { objectId, height, maxHeight: MAX_HEIGHT, isWalkHeightHelper, onClose, updateHeight }; }; export const useFurnitureStackHeightWidget = useFurnitureStackHeightWidgetState;