🆕 wf_slc_users_area

src/components/wired/views/actions/WiredActionLayoutView.tsx

@@ -3,6 +3,7 @@ import { WiredActionBotChangeFigureView } from './WiredActionBotChangeFigureView
 import { WiredActionFurniAreaView } from '../selectors/WiredActionFurniAreaView';
 import { WiredSelectorFurniNeighborhoodView } from '../selectors/WiredSelectorFurniNeighborhoodView';
 import { WiredSelectorFurniByTypeView } from '../selectors/WiredSelectorFurniByTypeView';
+import { WiredSelectorUsersAreaView } from '../selectors/WiredSelectorUsersAreaView';
 import { WiredActionBotFollowAvatarView } from './WiredActionBotFollowAvatarView';
 import { WiredActionBotGiveHandItemView } from './WiredActionBotGiveHandItemView';
 import { WiredActionBotMoveView } from './WiredActionBotMoveView';
@@ -88,6 +89,8 @@ export const WiredActionLayoutView = (code: number) =>
             return <WiredSelectorFurniNeighborhoodView />;
         case WiredActionLayoutCode.FURNI_BYTYPE_SELECTOR:
             return <WiredSelectorFurniByTypeView />;
+        case WiredActionLayoutCode.USERS_AREA_SELECTOR:
+            return <WiredSelectorUsersAreaView />;
     }
 
     return null;

src/components/wired/views/selectors/WiredActionFurniAreaView.tsx

@@ -78,6 +78,15 @@ export const WiredActionFurniAreaView: FC<{}> = props =>
         setInvert(trigger.intData.length >= 6 && trigger.intData[5] === 1);
     }, [ trigger ]);
 
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        GetRoomEngine().areaSelectionManager.setHighlightType(
+            invert ? RoomAreaSelectionManager.HIGHLIGHT_GREEN : RoomAreaSelectionManager.HIGHLIGHT_BRIGHTEN
+        );
+    }, [ invert, trigger ]);
+
     const hasArea = areaWidth > 0 && areaHeight > 0;
 
     const pickedLimit = trigger?.maximumItemSelectionCount ?? 20;
@@ -97,11 +106,6 @@ export const WiredActionFurniAreaView: FC<{}> = props =>
                 <Text bold>{ LocalizeText('wiredfurni.params.area_selection') }</Text>
                 <Text small>{ LocalizeText('wiredfurni.params.area_selection.info') }</Text>
 
-                { hasArea &&
-                    <Text small>
-                        { LocalizeText('wiredfurni.params.area_selection.selected', [ 'x', 'y', 'w', 'h' ], [ rootX.toString(), rootY.toString(), areaWidth.toString(), areaHeight.toString() ]) }
-                    </Text> }
-
                 { hasArea &&
                     <Text small>
                         { LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ pickedCount.toString(), pickedLimit.toString() ]) }
@@ -111,7 +115,14 @@ export const WiredActionFurniAreaView: FC<{}> = props =>
                     <Button fullWidth variant="primary" onClick={ () => GetRoomEngine().areaSelectionManager.startSelecting() }>
                         { LocalizeText('wiredfurni.params.area_selection.select') }
                     </Button>
-                    <Button fullWidth variant="secondary" onClick={ () => GetRoomEngine().areaSelectionManager.clearHighlight() }>
+                    <Button fullWidth variant="secondary" onClick={ () =>
+                    {
+                        GetRoomEngine().areaSelectionManager.clearHighlight();
+                        setRootX(0);
+                        setRootY(0);
+                        setAreaWidth(0);
+                        setAreaHeight(0);
+                    } }>
                         { LocalizeText('wiredfurni.params.area_selection.clear') }
                     </Button>
                 </div>

src/components/wired/views/selectors/WiredSelectorUsersAreaView.tsx

@@ -0,0 +1,136 @@
+import { GetRoomEngine, RoomAreaSelectionManager } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { Button, Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from '../actions/WiredActionBaseView';
+
+export const WiredSelectorUsersAreaView: FC<{}> = props =>
+{
+    const [ rootX, setRootX ] = useState(0);
+    const [ rootY, setRootY ] = useState(0);
+    const [ areaWidth, setAreaWidth ] = useState(0);
+    const [ areaHeight, setAreaHeight ] = useState(0);
+    const [ filterExisting, setFilterExisting ] = useState(false);
+    const [ invert, setInvert ] = useState(false);
+    const { trigger = null, setIntParams } = useWired();
+
+    const save = useCallback(() =>
+    {
+        setIntParams([ rootX, rootY, areaWidth, areaHeight, filterExisting ? 1 : 0, invert ? 1 : 0 ]);
+    }, [ rootX, rootY, areaWidth, areaHeight, filterExisting, invert, setIntParams ]);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        const callback = (x: number, y: number, w: number, h: number) =>
+        {
+            setRootX(x);
+            setRootY(y);
+            setAreaWidth(w);
+            setAreaHeight(h);
+        };
+
+        const activated = GetRoomEngine().areaSelectionManager.activate(callback, RoomAreaSelectionManager.HIGHLIGHT_BRIGHTEN);
+
+        if(activated)
+        {
+            if(trigger.intData.length >= 4 && trigger.intData[2] > 0 && trigger.intData[3] > 0)
+            {
+                GetRoomEngine().areaSelectionManager.setHighlight(
+                    trigger.intData[0],
+                    trigger.intData[1],
+                    trigger.intData[2],
+                    trigger.intData[3]
+                );
+            }
+        }
+
+        return () =>
+        {
+            GetRoomEngine().areaSelectionManager.deactivate();
+        };
+    }, [ trigger ]);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        if(trigger.intData.length >= 4)
+        {
+            setRootX(trigger.intData[0]);
+            setRootY(trigger.intData[1]);
+            setAreaWidth(trigger.intData[2]);
+            setAreaHeight(trigger.intData[3]);
+        }
+        else
+        {
+            setRootX(0);
+            setRootY(0);
+            setAreaWidth(0);
+            setAreaHeight(0);
+        }
+
+        setFilterExisting(trigger.intData.length >= 5 && trigger.intData[4] === 1);
+        setInvert(trigger.intData.length >= 6 && trigger.intData[5] === 1);
+    }, [ trigger ]);
+
+    useEffect(() =>
+    {
+        if(!trigger) return;
+
+        GetRoomEngine().areaSelectionManager.setHighlightType(
+            invert ? RoomAreaSelectionManager.HIGHLIGHT_GREEN : RoomAreaSelectionManager.HIGHLIGHT_BRIGHTEN
+        );
+    }, [ invert, trigger ]);
+
+    const hasArea = areaWidth > 0 && areaHeight > 0;
+
+    return (
+        <WiredActionBaseView hasSpecialInput={ true } requiresFurni={ 0 } save={ save } hideDelay={ true } cardStyle={ { width: '385px' } }>
+            <div className="flex flex-col gap-2">
+                <Text bold>{ LocalizeText('wiredfurni.params.area_selection') }</Text>
+                <Text small>{ LocalizeText('wiredfurni.params.area_selection.info') }</Text>
+
+                <div className="flex gap-1">
+                    <Button fullWidth variant="primary" onClick={ () => GetRoomEngine().areaSelectionManager.startSelecting() }>
+                        { LocalizeText('wiredfurni.params.area_selection.select') }
+                    </Button>
+                    <Button fullWidth variant="secondary" onClick={ () =>
+                    {
+                        GetRoomEngine().areaSelectionManager.clearHighlight();
+                        setRootX(0);
+                        setRootY(0);
+                        setAreaWidth(0);
+                        setAreaHeight(0);
+                    } }>
+                        { LocalizeText('wiredfurni.params.area_selection.clear') }
+                    </Button>
+                </div>
+
+                <hr className="m-0 bg-dark" />
+
+                <Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
+
+                <label className="flex items-center gap-1">
+                    <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={ filterExisting }
+                        onChange={ e => setFilterExisting(e.target.checked) } />
+                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
+                </label>
+
+                <label className="flex items-center gap-1">
+                    <input
+                        type="checkbox"
+                        className="form-check-input"
+                        checked={ invert }
+                        onChange={ e => setInvert(e.target.checked) } />
+                    <Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
+                </label>
+            </div>
+        </WiredActionBaseView>
+    );
+};