🆙 Start working on floorplan

2026-06-19 15:06:20 +00:00 · 2026-02-17 17:30:55 +01:00
parent 7feb10ab15
commit 8ea127afc4
6 changed files with 238 additions and 209 deletions
@@ -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
 {
@@ -0,0 +1,9 @@
+.nitro-floorplan-editor {
+    width: $nitro-floor-editor-width;
+    height: $nitro-floor-editor-height;
+}
+
+.floorplan-import-export {
+    width: 500px;
+    height: 475px;
+}
@@ -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));

@@ -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 overflow="hidden" size={ isSmallScreen() ? 10 : 12 } gap={ 1 }>
-                    <Flex justifyContent="left" gap={ 1 }>
-                        <Button shrink onClick={ handleZoomIn }>
-                            <FaSearchPlus className="fa-icon" />
+                <Column center size={ 1 } className="d-md-none">
+                    <Button className="d-md-none" onClick={ event => onClickArrowButton('left') }>
+                        <FaArrowLeft className="fa-icon" />
                    </Button>
-                        <Button shrink onClick={ handleResetZoom }>
-                            <FaDotCircle className="fa-icon" />
-                        </Button>
-                        <Button shrink onClick={ handleZoomOut }>
-                            <FaSearchMinus className="fa-icon" />
+                </Column>
+                <Column overflow="hidden" size={ isSmallScreen() ? 10: 12 } gap={ 1 }>
+                    <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 }
@@ -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>
    );
-};
+}
@@ -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,172 +13,197 @@ 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 [ floorAction, setFloorAction ] = useState(FloorAction.SET);
+    const [ floorHeight, setFloorHeight ] = useState(0);
+    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;

-  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,
-    }));
-  };
+            return newValue;
+        });
+    }

-  const increaseWallHeight = () => {
-    onWallHeightChange(Math.min(visualizationSettings.wallHeight + 1, MAX_WALL_HEIGHT));
-  };
+    const onWallThicknessChange = (value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };

-  const decreaseWallHeight = () => {
-    onWallHeightChange(Math.max(visualizationSettings.wallHeight - 1, MIN_WALL_HEIGHT));
-  };
+            newValue.thicknessWall = value;
+    
+            return newValue;
+        });
+    }
+
+    const onWallHeightChange = (value: number) =>
+    {
+        if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
+
+        if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
+
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
+
+            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}>
-          <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)}>
+        <Column>
+            <Flex gap={ 1 }>
+                <Column size={ 5 } gap={ 1 }>
+                    <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
+                    <Flex gap={ 3 }>
+                        <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()}>
-                <i className={`nitro-icon ${floorAction === FloorAction.UNSET ? 'icon-set-deselect' : 'icon-set-select'}`} />
+                        <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 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}
-          />
+                <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 } />
                </Column>
-        <Column size={3}>
-          <Text bold>{LocalizeText('floor.editor.wall.height')}</Text>
-          <div className="flex items-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)}
-            />
-            <FaCaretRight className="cursor-pointer fa-icon" onClick={increaseWallHeight} />
-          </div>
+                <Column size={ 3 }>
+                    <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
+                        <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 } />
+                    </Flex>
                </Column>
-      </Grid>
-      <Grid>
-        <Column size={6}>
-          <Text bold>{LocalizeText('floor.plan.editor.tile.height')}: {floorHeight}</Text>
+            </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>
-            )}
-            step={1}
-            value={floorHeight}
-            onChange={value => onFloorHeightChange(value)}
-          />
+                        min={ MIN_FLOOR_HEIGHT }
+                        max={ MAX_FLOOR_HEIGHT }
+                        step={ 1 }
+                        value={ floorHeight }
+                        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))}
-            >
-              <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>
+                <Column size={ 6 }>
+                    <Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>
+                    <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))}
-            >
-              <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>
-              <option value={3}>{LocalizeText('navigator.roomsettings.floor_thickness.thick')}</option>
+                        <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>
+                            <option value={ 3 }>{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
                        </select>
                    </Flex>
                </Column>
-      </Grid>
-    </div>
+            </Flex>
+        </Column>
    );
-};
+}