nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add area hider

Browse Source
This commit is contained in:
Bill 2024-07-02 22:16:59 -04:00
parent 36f9c0ff0e
commit cb31d98e10
4 changed files with 155 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/room/widgets/furniture/FurnitureAreaHideView.tsx Normal file
View File

@ -0,0 +1,58 @@
import { GetRoomEngine } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LocalizeText } from '../../../../api';
import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { useFurnitureAreaHideWidget } from '../../../../hooks';
export const FurnitureAreaHideView: FC<{}> = props =>
{
const { objectId = -1, isOn, setIsOn, wallItems, setWallItems, inverted, setInverted, invisibility, setInvisibility, onClose = null } = useFurnitureAreaHideWidget();
if(objectId === -1) return null;
return (
<NitroCardView theme="primary-slim" className="nitro-room-widget-area-hide" style={ { maxWidth: '400px' }}>
<NitroCardHeaderView headerText={ LocalizeText('widget.areahide.title') } onCloseClick={ onClose } />
<NitroCardContentView overflow="hidden" justifyContent="between">
<Column gap={ 2 }>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('wiredfurni.params.area_selection') }</Text>
<Text bold>{ LocalizeText('wiredfurni.params.area_selection.info') }</Text>
</Column>
<Flex gap={ 1 }>
<Button fullWidth variant="primary" onClick={ event => GetRoomEngine().areaSelectionManager.startSelecting() }>
{ LocalizeText('wiredfurni.params.area_selection.select') }
</Button>
<Button fullWidth variant="primary" onClick={ event => GetRoomEngine().areaSelectionManager.clearHighlight() }>
{ LocalizeText('wiredfurni.params.area_selection.clear') }
</Button>
</Flex>
</Column>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('widget.areahide.options') }</Text>
<Flex gap={ 1 }>
<input className="form-check-input" type="checkbox" id="setWallItems" checked={ wallItems } onChange={ event => setWallItems(event.target.checked ? true : false) } />
<Text>{ LocalizeText('widget.areahide.options.wallitems') }</Text>
</Flex>
<Flex gap={ 1 }>
<input className="form-check-input" type="checkbox" id="setInverted" checked={ inverted } onChange={ event => setInverted(event.target.checked ? true : false) } />
<Column gap={ 1 }>
<Text>{ LocalizeText('widget.areahide.options.invert') }</Text>
<Text>{ LocalizeText('widget.areahide.options.invert.info') }</Text>
</Column>
</Flex>
<Flex gap={ 1 }>
<input className="form-check-input" type="checkbox" id="setInvisibility" checked={ invisibility } onChange={ event => setInvisibility(event.target.checked ? true : false) } />
<Column gap={ 1 }>
<Text>{ LocalizeText('widget.areahide.options.invisibility') }</Text>
<Text>{ LocalizeText('widget.areahide.options.invisibility.info') }</Text>
</Column>
</Flex>
</Column>
<Button fullWidth variant="primary">
{ LocalizeText(isOn ? 'widget.dimmer.button.off' : 'widget.dimmer.button.on') }
</Button>
</NitroCardContentView>
</NitroCardView>
);
};

4
src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { Base } from '../../../../common';
import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
import { FurnitureAreaHideView } from './FurnitureAreaHideView';
import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
import { FurnitureCraftingView } from './FurnitureCraftingView';
@ -18,6 +18,7 @@ import { FurnitureStackHeightView } from './FurnitureStackHeightView';
import { FurnitureStickieView } from './FurnitureStickieView';
import { FurnitureTrophyView } from './FurnitureTrophyView';
import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
export const FurnitureWidgetsView: FC<{}> = props =>
@ -43,6 +44,7 @@ export const FurnitureWidgetsView: FC<{}> = props =>
<FurnitureTrophyView />
<FurnitureContextMenuView />
<FurnitureYoutubeDisplayView />
<FurnitureAreaHideView />
</Base>
);
};

1
src/hooks/rooms/widgets/furniture/index.ts
View File

@ -1,3 +1,4 @@
export * from './useFurnitureAreaHideWidget';
export * from './useFurnitureBackgroundColorWidget';
export * from './useFurnitureBadgeDisplayWidget';
export * from './useFurnitureContextMenuWidget';

93
src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts Normal file
View File

@ -0,0 +1,93 @@
import { GetRoomEngine, RoomAreaSelectionManager, RoomEngineAreaHideStateEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { useEffect, useState } from 'react';
import { CanManipulateFurniture } from '../../../../api';
import { useNitroEvent } from '../../../events';
import { useRoom } from '../../useRoom';
const useFurnitureAreaHideWidgetState = () =>
{
const [ objectId, setObjectId ] = useState<number>(-1);
const [ category, setCategory ] = useState<number>(-1);
const [ isOn, setIsOn ] = useState<boolean>(false);
const [ rootX, setRootX ] = useState<number>(0);
const [ rootY, setRootY ] = useState<number>(0);
const [ width, setWidth ] = useState<number>(0);
const [ length, setLength ] = useState<number>(0);
const [ invisibility, setInvisibility ] = useState<boolean>(false);
const [ wallItems, setWallItems ] = useState<boolean>(false);
const [ inverted, setInverted ] = useState<boolean>(false);
const { roomSession = null } = useRoom();
const onClose = () =>
{
setObjectId(-1);
setCategory(-1);
setIsOn(false);
setRootX(0);
setRootY(0);
setWidth(0);
setLength(0);
setInvisibility(false);
setWallItems(false);
setInverted(false);
GetRoomEngine().areaSelectionManager.deactivate();
};
useNitroEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_AREA_HIDE, event =>
{
if(!CanManipulateFurniture(roomSession, event.objectId, event.category)) return;
setObjectId(event.objectId);
setCategory(event.category);
const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
const model = roomObject.model;
setIsOn(roomObject.getState(0) === 1);
setRootX(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_X) ?? 0);
setRootY(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_Y) ?? 0);
setWidth(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_WIDTH) ?? 0);
setLength(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_LENGTH) ?? 0);
setInvisibility(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_INVISIBILITY) === 1);
setWallItems(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_WALL_ITEMS) === 1);
setInverted(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_INVERT) === 1);
});
useNitroEvent<RoomEngineAreaHideStateEvent>(RoomEngineAreaHideStateEvent.UPDATE_STATE_AREA_HIDE, event =>
{
setObjectId(event.objectId);
setCategory(event.category);
setIsOn(event.isOn);
});
useEffect(() =>
{
if(objectId === -1) return;
if(!isOn)
{
const callback = (rootX: number, rootY: number, width: number, height: number) =>
{
setRootX(rootX);
setRootY(rootY);
setWidth(width);
setLength(height);
};
if(GetRoomEngine().areaSelectionManager.activate(callback, RoomAreaSelectionManager.HIGHLIGHT_DARKEN))
{
GetRoomEngine().areaSelectionManager.setHighlight(rootX, rootY, width, length);
}
}
else
{
GetRoomEngine().areaSelectionManager.deactivate();
}
}, [ objectId, isOn, rootX, rootY, width, length ]);
return { objectId, category, isOn, setIsOn, rootX, setRootX, rootY, setRootY, width, setWidth, length, setLength, invisibility, setInvisibility, wallItems, setWallItems, inverted, setInverted, onClose };
};
export const useFurnitureAreaHideWidget = useFurnitureAreaHideWidgetState;