Add stack helper

src/views/room/RoomView.tsx

@@ -7,7 +7,7 @@ import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
 import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomWidgetUpdateRoomViewEvent } from './events/RoomWidgetUpdateRoomViewEvent';
-import { FurnitureContextMenuWidgetHandler, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
+import { FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
@@ -39,6 +39,7 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler());
         widgetHandlerManager.registerHandler(new RoomWidgetChatHandler());
         widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureCustomStackHeightWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 

src/views/room/events/RoomWidgetUpdateCustomStackHeightEvent.ts

@@ -0,0 +1,27 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateCustomStackHeightEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_CUSTOM_STACK_HEIGHT: string = 'RWUCSHE_UPDATE_CUSTOM_STACK_HEIGHT';
+
+    private _objectId: number;
+    private _height: number;
+
+    constructor(objectId: number, height: number = 0)
+    {
+        super(RoomWidgetUpdateCustomStackHeightEvent.UPDATE_CUSTOM_STACK_HEIGHT);
+
+        this._objectId = objectId;
+        this._height = height;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get height(): number
+    {
+        return this._height;
+    }
+}

src/views/room/events/index.ts

@@ -6,6 +6,7 @@ export * from './RoomWidgetRoomObjectUpdateEvent';
 export * from './RoomWidgetUpdateBackgroundColorPreviewEvent';
 export * from './RoomWidgetUpdateChatEvent';
 export * from './RoomWidgetUpdateChatInputContentEvent';
+export * from './RoomWidgetUpdateCustomStackHeightEvent';
 export * from './RoomWidgetUpdateDanceStatusEvent';
 export * from './RoomWidgetUpdateEvent';
 export * from './RoomWidgetUpdateInfostandEvent';

src/views/room/handlers/FurnitureCustomStackHeightWidgetHandler.ts

@@ -0,0 +1,61 @@
+import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomWidgetEnum } from 'nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { RoomWidgetUpdateCustomStackHeightEvent, RoomWidgetUpdateEvent } from '../events';
+import { RoomWidgetMessage } from '../messages';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureCustomStackHeightWidgetHandler extends RoomWidgetHandler
+{
+    private _lastFurniId: number = -1;
+
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.OPEN_WIDGET: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+
+                if(!roomObject) return;
+
+                this._lastFurniId = widgetEvent.objectId;
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateCustomStackHeightEvent(this._lastFurniId, roomObject.getLocation().z));
+                return;
+            }
+            case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+
+                if(widgetEvent.objectId !== this._lastFurniId) return;
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateCustomStackHeightEvent(-1));
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.CUSTOM_STACK_HEIGHT;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [];
+    }
+}

src/views/room/handlers/index.ts

@@ -1,4 +1,5 @@
 export * from './FurnitureContextMenuWidgetHandler';
+export * from './FurnitureCustomStackHeightWidgetHandler';
 export * from './IRoomWidgetHandler';
 export * from './IRoomWidgetHandlerManager';
 export * from './RoomWidgetAvatarInfoHandler';

src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx

@@ -1,48 +1,114 @@
-import { RoomEngineObjectEvent } from 'nitro-renderer';
+import { FurnitureStackHeightComposer, FurnitureStackHeightEvent } from 'nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { useRoomContext } from '../../../context/RoomContext';
-import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
+import { RoomWidgetUpdateCustomStackHeightEvent } from '../../../events';
+
+const MAX_HEIGHT: number = 40;
 
 export const FurnitureCustomStackHeightView: FC<{}> = props =>
 {
     const [ objectId, setObjectId ] = useState(-1);
+    const [ height, setHeight ] = useState(0);
+    const [ pendingHeight, setPendingHeight ] = useState(-1);
+
     const { roomSession = null, eventDispatcher = null } = useRoomContext();
 
     const close = useCallback(() =>
     {
         setObjectId(-1);
+        setHeight(0);
     }, []);
 
-    const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
+    const updateHeight = useCallback((height: number, fromServer: boolean = false) =>
+    {
+        if(!height) height = 0;
+        
+        height = Math.abs(height);
+
+        if(!fromServer) ((height > MAX_HEIGHT) && (height = MAX_HEIGHT));
+
+        setHeight(parseFloat(height.toFixed(2)));
+
+        if(!fromServer) setPendingHeight(height * 100);
+    }, []);
+
+    const onRoomWidgetUpdateCustomStackHeightEvent = useCallback((event: RoomWidgetUpdateCustomStackHeightEvent) =>
     {
         switch(event.type)
         {
-            // case RoomEngineTriggerWidgetEvent.REQUEST_CUSTOM_STACK_HEIGHT: {
+            case RoomWidgetUpdateCustomStackHeightEvent.UPDATE_CUSTOM_STACK_HEIGHT: {
-            //     setObjectId(event.objectId);
+                setObjectId(event.objectId);
-            //     return;
+                updateHeight(event.height, true);
-            // }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                if(objectId !== event.objectId) return;
-
-                close();
-                return;
             }
         }
-    }, [ objectId, close ]);
+    }, [ updateHeight ]);
 
-    //useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_CUSTOM_STACK_HEIGHT, onRoomEngineObjectEvent);
+    CreateEventDispatcherHook(RoomWidgetUpdateCustomStackHeightEvent.UPDATE_CUSTOM_STACK_HEIGHT, eventDispatcher, onRoomWidgetUpdateCustomStackHeightEvent);
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomEngineObjectEvent);
+
+    const onFurnitureStackHeightEvent = useCallback((event: FurnitureStackHeightEvent) =>
+    {
+        const parser = event.getParser();
+
+        if(objectId !== parser.furniId) return;
+
+        updateHeight(parser.height, true);
+    }, [ objectId, updateHeight ]);
+
+    CreateMessageHook(FurnitureStackHeightEvent, onFurnitureStackHeightEvent);
+
+    const sendUpdate = useCallback((height: number) =>
+    {
+        SendMessageHook(new FurnitureStackHeightComposer(objectId, ~~(height)));
+    }, [ objectId ]);
+
+    const placeAboveStack = useCallback(() =>
+    {
+        sendUpdate(-100);
+    }, [ sendUpdate ]);
+
+    const placeAtFloor = useCallback(() =>
+    {
+        sendUpdate(0);
+    }, [ sendUpdate ]);
+
+    useEffect(() =>
+    {
+        if((objectId === -1) || (pendingHeight === -1)) return;
+
+        const timeout = setTimeout(() => sendUpdate(~~(pendingHeight)), 10);
+
+        return () => clearTimeout(timeout);
+    }, [ objectId, pendingHeight, sendUpdate ]);
 
     if(objectId === -1) return null;
 
     return (
         <NitroCardView>
-            <NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
+            <NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
             <NitroCardContentView>
-                custom stack height
+                <div className="form-group">
+                    <label className="fw-bold text-black">{ LocalizeText('widget.custom.stack.height.text') }</label>
+                    <ReactSlider
+                        className={ 'nitro-slider' }
+                        min={ 0 }
+                        max={ MAX_HEIGHT }
+                        step={ 0.01 }
+                        value={ height }
+                        onChange={ event => updateHeight(event) }
+                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
+                </div>
+                <div className="form-group">
+                    <input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
+                </div>
+                <div className="form-group">
+                    <button type="button" className="btn btn-primary" onClick={ placeAboveStack }>{ LocalizeText('furniture.above.stack') }</button>
+                    <button type="button" className="btn btn-primary" onClick={ placeAtFloor }>{ LocalizeText('furniture.floor.level') }</button>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );