🆙 Start working on floorplan

src/components/floorplan-editor/FloorplanEditorContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
-import { IFloorplanSettings } from './common/IFloorplanSettings';
-import { IVisualizationSettings } from './common/IVisualizationSettings';
+import { IFloorplanSettings } from '@nitrots/nitro-renderer';
+import { IVisualizationSettings } from '@nitrots/nitro-renderer';
 
 interface IFloorplanEditorContext
 {

src/components/floorplan-editor/FloorplanEditorView.scss

@@ -0,0 +1,9 @@
+.nitro-floorplan-editor {
+    width: $nitro-floor-editor-width;
+    height: $nitro-floor-editor-height;
+}
+
+.floorplan-import-export {
+    width: 500px;
+    height: 475px;
+}

src/components/floorplan-editor/FloorplanEditorView.tsx

@@ -4,10 +4,10 @@ import { LocalizeText, SendMessageComposer } from '../../api';
 import { Button, ButtonGroup, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
 import { useMessageEvent, useNitroEvent } from '../../hooks';
 import { FloorplanEditorContextProvider } from './FloorplanEditorContext';
-import { FloorplanEditor } from './common/FloorplanEditor';
-import { IFloorplanSettings } from './common/IFloorplanSettings';
-import { IVisualizationSettings } from './common/IVisualizationSettings';
-import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
+import { FloorplanEditor } from '@nitrots/nitro-renderer';
+import { IFloorplanSettings } from '@nitrots/nitro-renderer';
+import { IVisualizationSettings } from '@nitrots/nitro-renderer';
+import { convertNumbersForSaving, convertSettingToNumber } from '@nitrots/nitro-renderer';
 import { FloorplanCanvasView } from './views/FloorplanCanvasView';
 import { FloorplanImportExportView } from './views/FloorplanImportExportView';
 import { FloorplanOptionsView } from './views/FloorplanOptionsView';
@@ -52,7 +52,7 @@ export const FloorplanEditorView: FC<{}> = props =>
         FloorplanEditor.instance.doorLocation = { x: originalFloorplanSettings.entryPoint[0], y: originalFloorplanSettings.entryPoint[1] };
         FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, originalFloorplanSettings.reservedTiles);
         FloorplanEditor.instance.renderTiles();
-    };
+    }
 
     useNitroEvent<RoomEngineEvent>(RoomEngineEvent.DISPOSED, event => setIsVisible(false));
 

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

@@ -1,11 +1,11 @@
 import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaDotCircle, FaSearchPlus, FaSearchMinus, FaUndo } from 'react-icons/fa';
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa';
 import { SendMessageComposer } from '../../../api';
 import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
-import { FloorplanEditor } from '../common/FloorplanEditor';
+import { FloorplanEditor } from '@nitrots/nitro-renderer';
 
 export const FloorplanCanvasView: FC<ColumnProps> = props =>
 {
@@ -58,7 +58,7 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
             return newValue;
         });
         
-        FloorplanEditor.instance.doorLocation = ( parser.x, parser.y );
+        FloorplanEditor.instance.doorLocation = { x: parser.x, y: parser.y };
 
         setEntryTileReceived(true);
     });
@@ -94,7 +94,7 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
         {
             case 'pointerout':
             case 'pointerup':
-                FloorplanEditor.instance.onPointerRelease();
+                FloorplanEditor.instance.onPointerRelease(event);
                 break;
             case 'pointerdown':
                 FloorplanEditor.instance.onPointerDown(event);
@@ -105,20 +105,6 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
         }
     }
 
-    const handleZoomIn = () => {
-        FloorplanEditor.instance.zoomIn();
-    };
-
-    const handleZoomOut = () => {
-        FloorplanEditor.instance.zoomOut();
-    };
-	
-    const handleResetZoom = () => {
-        FloorplanEditor.instance._zoomLevel = 1.0; // Reset to default zoom
-        FloorplanEditor.instance.adjustCanvasSize();
-        FloorplanEditor.instance.renderTiles();
-    };
-
     useEffect(() =>
     {
         return () =>
@@ -183,19 +169,28 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
     return (
         <Column gap={ gap } { ...rest }>
             <Grid overflow="hidden" gap={ 1 }>
+                <Column center size={ 1 } className="d-md-none">
+                    <Button className="d-md-none" onClick={ event => onClickArrowButton('left') }>
+                        <FaArrowLeft className="fa-icon" />
+                    </Button>
+                </Column>
                 <Column overflow="hidden" size={ isSmallScreen() ? 10: 12 } gap={ 1 }>
-                    <Flex justifyContent="left" gap={ 1 }>
-                        <Button shrink onClick={ handleZoomIn }>
-                            <FaSearchPlus className="fa-icon" />
-                        </Button>
-                        <Button shrink onClick={ handleResetZoom }>
-                            <FaDotCircle className="fa-icon" />
-                        </Button>
-                        <Button shrink onClick={ handleZoomOut }>
-                            <FaSearchMinus className="fa-icon" />
+                    <Flex justifyContent="center" className="d-md-none">
+                        <Button shrink onClick={ event => onClickArrowButton('up') }>
+                            <FaArrowUp className="fa-icon" />
                         </Button>
                     </Flex>
                     <Base overflow="auto" innerRef={ elementRef } />
+                    <Flex justifyContent="center" className="d-md-none">
+                        <Button shrink onClick={ event => onClickArrowButton('down') }>
+                            <FaArrowDown className="fa-icon" />
+                        </Button>
+                    </Flex>
+                </Column>
+                <Column center size={ 1 } className="d-md-none">
+                    <Button className="d-md-none" onClick={ event => onClickArrowButton('right') }>
+                        <FaArrowRight className="fa-icon" />
+                    </Button>
                 </Column>
             </Grid>
             { children }

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

@@ -1,10 +1,10 @@
 import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../api';
-import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
+import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
+import { ConvertTileMapToString } from '@nitrots/nitro-renderer';
+import { convertNumbersForSaving } from '@nitrots/nitro-renderer';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
-import { ConvertTileMapToString } from '../common/ConvertMapToString';
-import { convertNumbersForSaving } from '../common/Utils';
 
 interface FloorplanImportExportViewProps
 {
@@ -28,7 +28,7 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
             convertNumbersForSaving(originalFloorplanSettings.thicknessFloor),
             originalFloorplanSettings.wallHeight - 1
         ));
-    };
+    }
 
     useEffect(() =>
     {
@@ -37,19 +37,19 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
     }, []);
 
     return (
-        <NitroCardView className="floorplan-import-export" theme="primary-slim">
+        <NitroCardView theme="primary-slim" className="floorplan-import-export">
             <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.import.export') } onCloseClick={ onCloseClick } />
             <NitroCardContentView>
-                <textarea className="h-full" value={ map } onChange={ event => setMap(event.target.value) } />
-                <div className="flex justify-between">
+                <textarea className="h-100" value={ map } onChange={ event => setMap(event.target.value) } />
+                <Flex justifyContent="between">
                     <Button onClick={ event => setMap(ConvertTileMapToString(originalFloorplanSettings.tilemap)) }>
                         { LocalizeText('floor.plan.editor.revert.to.last.received.map') }
                     </Button>
                     <Button onClick={ saveFloorChanges }>
                         { LocalizeText('floor.plan.editor.save') }
                     </Button>
-                </div>
+                </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
-};
+}

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

@@ -2,10 +2,10 @@ import { FC, useState } from 'react';
 import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../api';
-import { Column, Flex, Grid, LayoutGridItem, Text } from '../../../common';
+import { Column, Flex, LayoutGridItem, Text } from '../../../common';
+import { COLORMAP, FloorAction } from '@nitrots/nitro-renderer';
+import { FloorplanEditor } from '@nitrots/nitro-renderer';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
-import { COLORMAP, FloorAction } from '../common/Constants';
-import { FloorplanEditor } from '../common/FloorplanEditor';
 
 const MIN_WALL_HEIGHT: number = 0;
 const MAX_WALL_HEIGHT: number = 16;
@@ -13,164 +13,189 @@ const MAX_WALL_HEIGHT: number = 16;
 const MIN_FLOOR_HEIGHT: number = 0;
 const MAX_FLOOR_HEIGHT: number = 26;
 
-export const FloorplanOptionsView: FC<{}> = props => {
+export const FloorplanOptionsView: FC<{}> = props =>
+{
     const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
     const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
     const [ floorHeight, setFloorHeight ] = useState(0);
-  const [isSquareSelectMode, setIsSquareSelectMode] = useState(false);
+    const [ isSquareSelectMode, setSquareSelectMode ] = useState(false);
     
-  const selectAction = (action: number) => {
+    const selectAction = (action: number) =>
+    {
         setFloorAction(action);
+
         FloorplanEditor.instance.actionSettings.currentAction = action;
-  };
+    }
 
-  const toggleSquareSelectMode = () => {
-    setIsSquareSelectMode(prev => {
-      const newValue = !prev;
-      FloorplanEditor.instance.setSquareSelectMode(newValue);
-      return newValue;
-    });
-  };
 
-  const changeDoorDirection = () => {
-    setVisualizationSettings(prevValue => {
+    const toggleSquareSelectMode = () =>
+    {
+        const nextValue = FloorplanEditor.instance.toggleSquareSelectMode();
+
+        setSquareSelectMode(nextValue);
+    }
+
+    const changeDoorDirection = () =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
             const newValue = { ...prevValue };
-      newValue.entryPointDir = newValue.entryPointDir < 7 ? newValue.entryPointDir + 1 : 0;
+
+            if(newValue.entryPointDir < 7)
+            {
+                ++newValue.entryPointDir;
+            }
+            else
+            {
+                newValue.entryPointDir = 0;
+            }
+
             return newValue;
         });
-  };
+    }
+
+    const onFloorHeightChange = (value: number) =>
+    {
+        if(isNaN(value) || (value <= 0)) value = 0;
+
+        if(value > 26) value = 26;
 
-  const onFloorHeightChange = (value: number) => {
-    if (isNaN(value) || value <= 0) value = 0;
-    if (value > MAX_FLOOR_HEIGHT) value = MAX_FLOOR_HEIGHT;
         setFloorHeight(value);
+
         FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
-  };
+    }
 
-  const onFloorThicknessChange = (value: number) => {
-    setVisualizationSettings(prevValue => ({
-      ...prevValue,
-      thicknessFloor: value,
-    }));
-  };
+    const onFloorThicknessChange = (value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
 
-  const onWallThicknessChange = (value: number) => {
-    setVisualizationSettings(prevValue => ({
-      ...prevValue,
-      thicknessWall: value,
-    }));
-  };
+            newValue.thicknessFloor = value;
+
+            return newValue;
+        });
+    }
+
+    const onWallThicknessChange = (value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
+
+            newValue.thicknessWall = value;
+    
+            return newValue;
+        });
+    }
+
+    const onWallHeightChange = (value: number) =>
+    {
+        if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
 
-  const onWallHeightChange = (value: number) => {
-    if (isNaN(value) || value <= 0) value = MIN_WALL_HEIGHT;
         if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
-    setVisualizationSettings(prevValue => ({
-      ...prevValue,
-      wallHeight: value,
-    }));
-  };
 
-  const increaseWallHeight = () => {
-    onWallHeightChange(Math.min(visualizationSettings.wallHeight + 1, MAX_WALL_HEIGHT));
-  };
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
 
-  const decreaseWallHeight = () => {
-    onWallHeightChange(Math.max(visualizationSettings.wallHeight - 1, MIN_WALL_HEIGHT));
-  };
+            newValue.wallHeight = value;
+
+            return newValue;
+        });
+    }
+
+    const increaseWallHeight = () =>
+    {
+        let height = (visualizationSettings.wallHeight + 1);
+
+        if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
+
+        onWallHeightChange(height);
+    }
+
+    const decreaseWallHeight = () =>
+    {
+        let height = (visualizationSettings.wallHeight - 1);
+
+        if(height <= 0) height = MIN_WALL_HEIGHT;
+
+        onWallHeightChange(height);
+    }
 
     return (
-    <div className="flex flex-col">
-      <Grid>
-        <Column gap={1} size={5}>
+        <Column>
+            <Flex gap={ 1 }>
+                <Column size={ 5 } gap={ 1 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
                     <Flex gap={ 3 }>
-            <div className="flex gap-1">
-              <LayoutGridItem itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)}>
+                        <Flex gap={ 1 }>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
                                 <i className="nitro-icon icon-set-tile" />
                             </LayoutGridItem>
-              <LayoutGridItem itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)}>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
                                 <i className="nitro-icon icon-unset-tile" />
                             </LayoutGridItem>
-            </div>
-            <div className="flex gap-1">
-              <LayoutGridItem itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)}>
+                        </Flex>
+                        <Flex gap={ 1 }>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
                                 <i className="nitro-icon icon-increase-height" />
                             </LayoutGridItem>
-              <LayoutGridItem itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)}>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
                                 <i className="nitro-icon icon-decrease-height" />
                             </LayoutGridItem>
-              <LayoutGridItem itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)}>
+                        </Flex>
+                        <LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
                             <i className="nitro-icon icon-set-door" />
                         </LayoutGridItem>
-              <LayoutGridItem onClick={() => FloorplanEditor.instance.toggleSelectAll()}>
+                        <LayoutGridItem onClick={ event => FloorplanEditor.instance.toggleSelectAll() }>
                             <i className={ `nitro-icon ${ floorAction === FloorAction.UNSET ? 'icon-set-deselect' : 'icon-set-select' }` } />
                         </LayoutGridItem>
                         <LayoutGridItem itemActive={ isSquareSelectMode } onClick={ toggleSquareSelectMode }>
                             <i className={ `nitro-icon ${ isSquareSelectMode ? 'icon-set-active-squaresselect' : 'icon-set-squaresselect' }` } />
                         </LayoutGridItem>
-            </div>
                     </Flex>
                 </Column>
                 <Column alignItems="center" size={ 4 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.enter.direction') }</Text>
-          <i
-            className={`nitro-icon icon-door-direction-${visualizationSettings.entryPointDir} cursor-pointer`}
-            onClick={changeDoorDirection}
-          />
+                    <i className={ `nitro-icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
                 </Column>
                 <Column size={ 3 }>
                     <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
-          <div className="flex items-center gap-1">
+                    <Flex alignItems="center" gap={ 1 }>
                         <FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
-            <input
-              className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm quantity-input"
-              type="number"
-              value={visualizationSettings.wallHeight}
-              onChange={event => onWallHeightChange(event.target.valueAsNumber)}
-            />
+                        <input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
                         <FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
-          </div>
+                    </Flex>
                 </Column>
-      </Grid>
-      <Grid>
+            </Flex>
+            <Flex gap={ 1 }>
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
                     <ReactSlider
                         className="nitro-slider"
-            max={MAX_FLOOR_HEIGHT}
                         min={ MIN_FLOOR_HEIGHT }
-            renderThumb={({ key, style, ...rest }, state) => (
-              <div
-                key={key} // Explicitly pass key directly
-                style={{ backgroundColor: `#${COLORMAP[state.valueNow.toString(33)]}`, ...style }}
-                {...rest}
-              >
-                {state.valueNow}
-              </div>
-            )}
+                        max={ MAX_FLOOR_HEIGHT }
                         step={ 1 }
                         value={ floorHeight }
-            onChange={value => onFloorHeightChange(value)}
-          />
+                        onChange={ event => onFloorHeightChange(event) }
+                        renderThumb={ (props, state) =>
+                        {
+                            const { key, style, ...rest } = (props as Record<string, any>);
+
+                            return <div key={ key } style={ { backgroundColor: `#${ COLORMAP[state.valueNow.toString(33)] }`, ...style } } { ...rest }>{ state.valueNow }</div>;
+                        } } />
                 </Column>
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>
-          <Flex className="items-center">
-            <select
-              className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm"
-              value={visualizationSettings.thicknessWall}
-              onChange={event => onWallThicknessChange(parseInt(event.target.value))}
-            >
+                    <Flex className="align-items-center">
+                        <select className="form-control form-control-sm" value={ visualizationSettings.thicknessWall } onChange={ event => onWallThicknessChange(parseInt(event.target.value)) }>
                             <option value={ 0 }>{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
                             <option value={ 1 }>{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
                             <option value={ 2 }>{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
                             <option value={ 3 }>{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
                         </select>
-            <select
-              className="min-h-[calc(1.5em+.5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm"
-              value={visualizationSettings.thicknessFloor}
-              onChange={event => onFloorThicknessChange(parseInt(event.target.value))}
-            >
+                        <select className="form-control form-control-sm" value={ visualizationSettings.thicknessFloor } onChange={ event => onFloorThicknessChange(parseInt(event.target.value)) }>
                             <option value={ 0 }>{ LocalizeText('navigator.roomsettings.floor_thickness.thinnest') }</option>
                             <option value={ 1 }>{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>
                             <option value={ 2 }>{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
@@ -178,7 +203,7 @@ export const FloorplanOptionsView: FC<{}> = props => {
                         </select>
                     </Flex>
                 </Column>
-      </Grid>
-    </div>
+            </Flex>
+        </Column>
     );
-};
+}