Add area hider

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

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

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

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

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

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

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

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