change background toner to use rgb input (#105)

src/api/utils/ColorUtils.ts

@@ -24,10 +24,39 @@ export class ColorUtils
         return parseInt(color.replace('#', ''), 16);
     }
 
-    public static uintHexColor(color: number): string 
+    public static uintHexColor(color: number): string
     {
         const realColor = color >>>0;
 
         return ColorUtils.makeColorHex(realColor.toString(16).substring(2));
     }
+
+    /**
+     * Converts an integer format into an array of 8-bit values
+     * @param {number} value value in integer format
+     * @returns {Array} 8-bit values
+     */
+    public static int_to_8BitVals(value: number): [number, number, number, number]
+    {
+        const val1 = ((value >> 24) & 0xFF)
+        const val2 = ((value >> 16) & 0xFF);
+        const val3 = ((value >> 8) & 0xFF);
+        const val4 = (value & 0xFF);
+
+        return [ val1, val2, val3, val4 ];
+    }
+
+    /**
+     * Combines 4 8-bit values into a 32-bit integer. Values are combined in
+     * in the order of the parameters
+     * @param val1
+     * @param val2
+     * @param val3
+     * @param val4
+     * @returns 32-bit integer of combined values
+     */
+    public static eight_bitVals_to_int(val1: number, val2: number, val3: number, val4: number): number
+    {
+        return (((val1) << 24) + ((val2) << 16) + ((val3) << 8) + (val4| 0));
+    }
 }

src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx

@@ -1,12 +1,11 @@
 import { FC } from 'react';
-import ReactSlider from 'react-slider';
+import { ColorUtils, LocalizeText } from '../../../../api';
-import { LocalizeText } from '../../../../api';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
-import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useFurnitureBackgroundColorWidget } from '../../../../hooks';
 
 export const FurnitureBackgroundColorView: FC<{}> = props =>
 {
-    const { objectId = -1, hue = 0, setHue = null, saturation = 0, setSaturation = null, lightness = 0, setLightness = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget();
+    const { objectId = -1, color = 0, setColor = null, applyToner = null, toggleToner = null, onClose = null } = useFurnitureBackgroundColorWidget();
 
     if(objectId === -1) return null;
 
@@ -15,39 +14,7 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
             <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ onClose } />
             <NitroCardContentView overflow="hidden" justifyContent="between">
                 <Column overflow="auto" gap={ 1 }>
-                    <Column>
+                    <input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
-                        <Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>
-                        <ReactSlider
-                            className={ 'nitro-slider' }
-                            min={ 0 }
-                            max={ 255 }
-                            value={ hue }
-                            onChange={ event => setHue(event) }
-                            thumbClassName={ 'thumb degree' }
-                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </Column>
-                    <Column>
-                        <Text bold>{ LocalizeText('widget.backgroundcolor.saturation') }</Text>
-                        <ReactSlider
-                            className={ 'nitro-slider' }
-                            min={ 0 }
-                            max={ 255 }
-                            value={ saturation }
-                            onChange={ event => setSaturation(event) }
-                            thumbClassName={ 'thumb degree' }
-                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </Column>
-                    <Column>
-                        <Text bold>{ LocalizeText('widget.backgroundcolor.lightness') }</Text>
-                        <ReactSlider
-                            className={ 'nitro-slider' }
-                            min={ 0 }
-                            max={ 255 }
-                            value={ lightness }
-                            onChange={ event => setLightness(event) }
-                            thumbClassName={ 'thumb degree' }
-                            renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
-                    </Column>
                 </Column>
                 <Column gap={ 1 }>
                     <Button fullWidth variant="primary" onClick={ toggleToner }>

src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts

@@ -1,6 +1,6 @@
-import { ApplyTonerComposer, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { ApplyTonerComposer, ColorConverter, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { useEffect, useState } from 'react';
-import { CanManipulateFurniture, DispatchUiEvent, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, SendMessageComposer } from '../../../../api';
+import { CanManipulateFurniture, ColorUtils, DispatchUiEvent, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, SendMessageComposer } from '../../../../api';
 import { useRoomEngineEvent } from '../../../events';
 import { useFurniRemovedEvent } from '../../engine';
 import { useRoom } from '../../useRoom';
@@ -9,12 +9,16 @@ const useFurnitureBackgroundColorWidgetState = () =>
 {
     const [ objectId, setObjectId ] = useState(-1);
     const [ category, setCategory ] = useState(-1);
-    const [ hue, setHue ] = useState(0);
+    const [ color, setColor ] = useState(0);
-    const [ saturation, setSaturation ] = useState(0);
-    const [ lightness, setLightness ] = useState(0);
     const { roomSession = null } = useRoom();
 
-    const applyToner = () => SendMessageComposer(new ApplyTonerComposer(objectId, hue, saturation, lightness));
+    const applyToner = () =>
+    {
+        const hsl = ColorConverter.rgbToHSL(color);
+        const [ _, hue, saturation, lightness ] = ColorUtils.int_to_8BitVals(hsl);
+        SendMessageComposer(new ApplyTonerComposer(objectId, hue, saturation, lightness));
+    }
+
     const toggleToner = () => roomSession.useMultistateItem(objectId);
 
     const onClose = () =>
@@ -23,23 +27,26 @@ const useFurnitureBackgroundColorWidgetState = () =>
 
         setObjectId(-1);
         setCategory(-1);
-        setHue(0);
+        setColor(0);
-        setSaturation(0);
-        setLightness(0);
     }
 
     useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_BACKGROUND_COLOR, event =>
     {
         if(!CanManipulateFurniture(roomSession, event.objectId, event.category)) return;
-                
+
         const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
         const model = roomObject.model;
 
         setObjectId(event.objectId);
         setCategory(event.category)
-        setHue(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE)));
+        const hue = parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE));
-        setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
+        const saturation = parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION));
-        setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
+        const light = parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS));
+
+        const hsl = ColorUtils.eight_bitVals_to_int(0, hue,saturation,light);
+
+        const rgbColor = ColorConverter.hslToRGB(hsl);
+        setColor(rgbColor);
     });
 
     useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
@@ -53,10 +60,12 @@ 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, hue, saturation, lightness ]);
+    }, [ objectId, category, color ]);
 
-    return { objectId, hue, setHue, saturation, setSaturation, lightness, setLightness, applyToner, toggleToner, onClose };
+    return { objectId, color, setColor, applyToner, toggleToner, onClose };
 }
 
 export const useFurnitureBackgroundColorWidget = useFurnitureBackgroundColorWidgetState;