nitro
/
nitro-react
mirror of https://github.com/billsonnn/nitro-react.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

change background toner to use rgb input (#105)

This commit is contained in:
dank074 2022-12-22 21:22:30 -06:00 committed by GitHub
parent bb37d84d99
commit b57ffc5426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/api/utils/ColorUtils.ts
View File

@ -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));
}
}

41
src/components/room/widgets/furniture/FurnitureBackgroundColorView.tsx
View File

@ -1,12 +1,11 @@
import { FC } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText } from '../../../../api';
import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { ColorUtils, LocalizeText } from '../../../../api';
import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView } 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>
<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>
<input type="color" className="form-control" value={ ColorUtils.makeColorNumberHex(color) } onChange={ event => setColor(ColorUtils.convertFromHex(event.target.value)) } />
</Column>
<Column gap={ 1 }>
<Button fullWidth variant="primary" onClick={ toggleToner }>

39
src/hooks/rooms/widgets/furniture/useFurnitureBackgroundColorWidget.ts
View File

@ -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 [ saturation, setSaturation ] = useState(0);
const [ lightness, setLightness ] = useState(0);
const [ color, setColor ] = 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);
setSaturation(0);
setLightness(0);
setColor(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)));
setSaturation(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION)));
setLightness(parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_LIGHTNESS)));
const hue = parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_HUE));
const saturation = parseInt(model.getValue<string>(RoomObjectVariable.FURNITURE_ROOM_BACKGROUND_COLOR_SATURATION));
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;