Update FloorPlanEditor

src/components/floorplan-editor/views/FloorplanCanvasView.tsx

@@ -164,25 +164,6 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
                     </Button>
                 </Column>
             </Grid>
-            {/* <Flex center className="d-md-none">
-                <Button onClick={ event => onClickArrowButton('up') }>
-                    <FontAwesomeIcon icon="arrow-up" />
-                </Button>
-            </Flex>
-            <Flex center gap={ 1 }>
-                <Button className="d-md-none" onClick={ event => onClickArrowButton('left') }>
-                    <FontAwesomeIcon icon="arrow-left" />
-                </Button>
-                <Base overflow="auto" innerRef={ elementRef } />
-                <Button className="d-md-none" onClick={ event => onClickArrowButton('right') }>
-                    <FontAwesomeIcon icon="arrow-right" />
-                </Button>
-            </Flex>
-            <Flex center className="d-md-none">
-                <Button onClick={ event => onClickArrowButton('down') }>
-                    <FontAwesomeIcon icon="arrow-down" />
-                </Button>
-            </Flex> */}
             { children }
         </Column>
     );

src/components/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useCallback, useState } from 'react';
+import { FC, useState } from 'react';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../api';
 import { Column, Flex, LayoutGridItem, Text } from '../../../common';
@@ -19,17 +19,18 @@ export const FloorplanOptionsView: FC<{}> = props =>
     const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
     const [ floorHeight, setFloorHeight ] = useState(0);
     
-    const selectAction = useCallback((action: number) =>
+    const selectAction = (action: number) =>
     {
         setFloorAction(action);
-        FloorplanEditor.instance.actionSettings.currentAction = action;
-    }, []);
 
-    const changeDoorDirection = useCallback(() =>
+        FloorplanEditor.instance.actionSettings.currentAction = action;
+    }
+
+    const changeDoorDirection = () =>
     {
         setVisualizationSettings(prevValue =>
             {
-                const newValue = Object.assign({}, prevValue);
+                const newValue = { ...prevValue };
 
                 if(newValue.entryPointDir < 7)
                 {
@@ -42,9 +43,9 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
                 return newValue;
             });
-    }, [ setVisualizationSettings ]);
+    }
 
-    const onFloorHeightChange = useCallback((value: number) =>
+    const onFloorHeightChange = (value: number) =>
     {
         if(isNaN(value) || (value <= 0)) value = 0;
 
@@ -53,31 +54,33 @@ export const FloorplanOptionsView: FC<{}> = props =>
         setFloorHeight(value);
 
         FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
-    }, []);
+    }
 
-    const onFloorThicknessChange = useCallback((value: number) =>
+    const onFloorThicknessChange = (value: number) =>
     {
         setVisualizationSettings(prevValue =>
         {
-            const newValue = Object.assign({}, prevValue);
+            const newValue = { ...prevValue };
+
             newValue.thicknessFloor = value;
 
             return newValue;
         });
-    }, [setVisualizationSettings]);
+    }
 
-    const onWallThicknessChange = useCallback((value: number) =>
+    const onWallThicknessChange = (value: number) =>
     {
         setVisualizationSettings(prevValue =>
             {
-                const newValue = Object.assign({}, prevValue);
+                const newValue = { ...prevValue };
+
                 newValue.thicknessWall = value;
     
                 return newValue;
             });
-    }, [setVisualizationSettings]);
+    }
 
-    const onWallHeightChange = useCallback((value: number) =>
+    const onWallHeightChange = (value: number) =>
     {
         if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
 
@@ -85,15 +88,15 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
         setVisualizationSettings(prevValue =>
             {
-                const newValue = Object.assign({}, prevValue);
+                const newValue = { ...prevValue };
 
                 newValue.wallHeight = value;
 
                 return newValue;
             });
-    }, [ setVisualizationSettings ]);
+    }
 
-    function increaseWallHeight(): void
+    const increaseWallHeight = () =>
     {
         let height = (visualizationSettings.wallHeight + 1);
 
@@ -102,7 +105,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
         onWallHeightChange(height);
     }
 
-    function decreaseWallHeight(): void
+    const decreaseWallHeight = () =>
     {
         let height = (visualizationSettings.wallHeight - 1);
 

src/components/index.scss

@@ -3,6 +3,7 @@
 @import './camera/CameraWidgetView';
 @import './catalog/CatalogView';
 @import './chat-history/ChatHistoryView';
+@import './floorplan-editor/FloorplanEditorView';
 @import './groups/GroupView';
 @import './guide-tool/GuideToolView';
 @import './help/HelpView';

src/components/main/MainView.tsx

@@ -4,7 +4,6 @@ import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '.
 import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { UseRoomSessionManagerEvent } from '../../hooks';
 import { CampaignView } from '../../views/campaign/CampaignView';
-import { FloorplanEditorView } from '../../views/floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../../views/friends/FriendsView';
 import { HcCenterView } from '../../views/hc-center/HcCenterView';
 import { HotelView } from '../../views/hotel-view/HotelView';
@@ -14,6 +13,7 @@ import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
 import { CatalogView } from '../catalog/CatalogView';
 import { ChatHistoryView } from '../chat-history/ChatHistoryView';
+import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { GroupsView } from '../groups/GroupsView';
 import { GuideToolView } from '../guide-tool/GuideToolView';
 import { HelpView } from '../help/HelpView';

src/views/Styles.scss

@@ -2,7 +2,6 @@
 @import "./friends/FriendsView";
 @import "./hotel-view/HotelView";
 @import "./notification-center/NotificationCenterView";
-@import "./floorplan-editor/FloorplanEditorView";
 @import "./nitropedia/NitropediaView";
 @import "./hc-center/HcCenterView.scss";
 @import './campaign/CampaignView';