add import/export

src/views/floorplan-editor/FloorplanEditorView.scss

@@ -5,6 +5,17 @@
     .editor-area {
         width: 100%;
         height: 300px;
+        min-height: 300px;
         overflow-x: scroll;
     }
+
+    .color {
+        height: 50px;
+        width: 10px;
+    }
+}
+
+.floorplan-import-export {
+    width: 500px;
+    height: 475px;
 }

src/views/floorplan-editor/FloorplanEditorView.tsx

@@ -1,20 +1,29 @@
-import { FloorHeightMapEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
+import { FloorHeightMapEvent, NitroPoint, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../api';
 import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent';
 import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
 import { FloorplanEditor } from './common/FloorplanEditor';
 import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
 import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext';
-import { IFloorplanSettings, initialFloorplanSettings } from './context/FloorplanEditorContext.types';
+import { IFloorplanSettings, initialFloorplanSettings, IVisualizationSettings } from './context/FloorplanEditorContext.types';
 import { FloorplanCanvasView } from './views/FloorplanCanvasView';
+import { FloorplanImportExportView } from './views/FloorplanImportExportView';
 import { FloorplanOptionsView } from './views/FloorplanOptionsView';
 
 export const FloorplanEditorView: FC<{}> = props =>
 {
     const [isVisible, setIsVisible] = useState(false);
-    const [floorplanSettings, setFloorplanSettings ] = useState<IFloorplanSettings>(initialFloorplanSettings);
+    const [ importExportVisible, setImportExportVisible ] = useState(false);
+    const [originalFloorplanSettings, setOriginalFloorplanSettings] = useState<IFloorplanSettings>(initialFloorplanSettings);
+    const [visualizationSettings, setVisualizationSettings] = useState<IVisualizationSettings>(
+        {
+            entryPointDir: 2,
+            wallHeight: -1,
+            thicknessWall: 1,
+            thicknessFloor: 1
+        });
 
     const onFloorplanEditorEvent = useCallback((event: FloorplanEditorEvent) =>
     {
@@ -47,11 +56,16 @@ export const FloorplanEditorView: FC<{}> = props =>
 
         if(!parser) return;
 
-        const settings = Object.assign({}, floorplanSettings);
+        const settings = Object.assign({}, originalFloorplanSettings);
         settings.tilemap = parser.model;
         settings.wallHeight = parser.wallHeight + 1;
-        setFloorplanSettings(settings);
+        setOriginalFloorplanSettings(settings);
-    }, [floorplanSettings]);
+
+        const vSettings = Object.assign({}, visualizationSettings);
+        vSettings.wallHeight = parser.wallHeight + 1;
+        setVisualizationSettings(vSettings);
+
+    }, [originalFloorplanSettings, visualizationSettings]);
 
     CreateMessageHook(FloorHeightMapEvent, onFloorHeightMapEvent);
 
@@ -61,12 +75,17 @@ export const FloorplanEditorView: FC<{}> = props =>
 
         if(!parser) return;
 
-        const settings = Object.assign({}, floorplanSettings);
+        const settings = Object.assign({}, originalFloorplanSettings);
-        settings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor)
+        settings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor);
         settings.thicknessWall = convertSettingToNumber(parser.thicknessWall);
 
-        setFloorplanSettings(settings);
+        setOriginalFloorplanSettings(settings);
-    }, [floorplanSettings]);
+
+        const vSettings = Object.assign({}, visualizationSettings);
+        vSettings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor);
+        vSettings.thicknessWall = convertSettingToNumber(parser.thicknessWall);
+        setVisualizationSettings(vSettings);
+    }, [originalFloorplanSettings, visualizationSettings]);
 
     CreateMessageHook(RoomVisualizationSettingsEvent, onRoomVisualizationSettingsEvent);
 
@@ -74,42 +93,53 @@ export const FloorplanEditorView: FC<{}> = props =>
     {
         SendMessageHook(new UpdateFloorPropertiesMessageComposer(
             FloorplanEditor.instance.getCurrentTilemapString(),
-            floorplanSettings.entryPoint[0],
+            FloorplanEditor.instance.doorLocation.x,
-            floorplanSettings.entryPoint[1],
+            FloorplanEditor.instance.doorLocation.y,
-            floorplanSettings.entryPointDir,
+            visualizationSettings.entryPointDir,
-            convertNumbersForSaving(floorplanSettings.thicknessWall),
+            convertNumbersForSaving(visualizationSettings.thicknessWall),
-            convertNumbersForSaving(floorplanSettings.thicknessFloor),
+            convertNumbersForSaving(visualizationSettings.thicknessFloor),
-            floorplanSettings.wallHeight - 1
+            visualizationSettings.wallHeight - 1
         ));
-    }, [floorplanSettings.entryPoint, floorplanSettings.entryPointDir, floorplanSettings.thicknessFloor, floorplanSettings.thicknessWall, floorplanSettings.wallHeight]);
+    }, [visualizationSettings.entryPointDir, visualizationSettings.thicknessFloor, visualizationSettings.thicknessWall, visualizationSettings.wallHeight]);
+
+    const revertChanges = useCallback(() =>
+    {
+        setVisualizationSettings({ wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: originalFloorplanSettings.entryPointDir });
+        
+        FloorplanEditor.instance.doorLocation = new NitroPoint(originalFloorplanSettings.entryPoint[0], originalFloorplanSettings.entryPoint[1]);
+        FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, originalFloorplanSettings.reservedTiles);
+        FloorplanEditor.instance.renderTiles();
+    }, [originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.reservedTiles, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.tilemap, originalFloorplanSettings.wallHeight])
 
     return (
         <>
-        <FloorplanEditorContextProvider value={ { floorplanSettings, setFloorplanSettings } }>
+            <FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
-            {isVisible &&
+                {isVisible && <>
-                <NitroCardView className="nitro-floorplan-editor">
+                    <NitroCardView className="nitro-floorplan-editor">
-                    <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
+                        <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
-                    <NitroCardContentView>
+                        <NitroCardContentView>
-                        <NitroLayoutGrid>
+                            <NitroLayoutGrid>
-                            <NitroLayoutGridColumn size={ 12 }>
+                                <NitroLayoutGridColumn size={12}>
-                                <FloorplanOptionsView />
+                                    <FloorplanOptionsView />
-                                <FloorplanCanvasView />
+                                    <FloorplanCanvasView />
-                            </NitroLayoutGridColumn>
+                                    <NitroLayoutFlex className="justify-content-between">
-                        </NitroLayoutGrid>
+                                        <div className="btn-group">
-                        {/* <div className="row justify-content-between mt-2">
+                                            <button className="btn btn-primary" onClick={revertChanges}>{LocalizeText('floor.plan.editor.reload')}</button>
-                            <div className="btn-group col-auto">
+                                        </div>
-                                <button className="btn btn-primary">{LocalizeText('floor.plan.editor.reload')}</button>
+                                        <div className="btn-group">
-                            </div>
+                                            <button className="btn btn-primary" disabled={true}>{LocalizeText('floor.plan.editor.preview')}</button>
-                            <div className="btn-group col-auto" role="group" aria-label="First group">
+                                            <button className="btn btn-primary" onClick={ () => setImportExportVisible(true) }>{LocalizeText('floor.plan.editor.import.export')}</button>
-                                <button className="btn btn-primary">{LocalizeText('floor.plan.editor.preview')}</button>
+                                            <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
-                                <button className="btn btn-primary">{LocalizeText('floor.plan.editor.import.export')}</button>
+                                        </div>
-                                <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
+                                    </NitroLayoutFlex>
-                            </div>
+                                </NitroLayoutGridColumn>
-                        </div> */}
+                            </NitroLayoutGrid>
-                    </NitroCardContentView>
+                        </NitroCardContentView>
-                </NitroCardView>
+                    </NitroCardView>
-            }
+                    {importExportVisible && <FloorplanImportExportView onCloseClick={ () => setImportExportVisible(false)}/>}
-        </FloorplanEditorContextProvider>
+                    </>
+                }
+            </FloorplanEditorContextProvider>
         </>
     );
 }

src/views/floorplan-editor/common/Constants.ts

@@ -11,3 +11,34 @@ export class FloorAction
     public static readonly SET = 3;
     public static readonly UNSET = 4;
 }
+
+export const COLORMAP: object =  {
+    'x': '101010',
+    '0': '0065ff',
+    '1': '0091ff',
+    '2': '00bcff',
+    '3': '00e8ff',
+    '4': '00ffea',
+    '5': '00ffbf',
+    '6': '00ff93',
+    '7': '00ff68',
+    '8': '00ff3d',
+    '9': '19ff00',
+    'a': '44ff00',
+    'b': '70ff00',
+    'c': '9bff00',
+    'd': 'f2ff00',
+    'e': 'ffe000',
+    'f': 'ffb500',
+    'g': 'ff8900',
+    'h': 'ff5e00',
+    'i': 'ff3200',
+    'j': 'ff0700',
+    'k': 'ff0023',
+    'l': 'ff007a',
+    'm': 'ff00a5',
+    'n': 'ff00d1',
+    'o': 'ff00fc',
+    'p': 'd600ff',
+    'q': 'aa00ff'
+};

src/views/floorplan-editor/context/FloorplanEditorContext.tsx

@@ -2,8 +2,10 @@ import { createContext, FC, useContext } from 'react';
 import { FloorplanEditorContextProps, IFloorplanEditorContext } from './FloorplanEditorContext.types';
 
 const FloorplanEditorContext = createContext<IFloorplanEditorContext>({
-    floorplanSettings: null,
+    originalFloorplanSettings: null,
-    setFloorplanSettings: null
+    setOriginalFloorplanSettings: null,
+    visualizationSettings: null,
+    setVisualizationSettings: null
 });
 
 export const FloorplanEditorContextProvider: FC<FloorplanEditorContextProps> = props =>

src/views/floorplan-editor/context/FloorplanEditorContext.types.ts

@@ -2,14 +2,19 @@ import { ProviderProps } from 'react';
 
 export interface IFloorplanEditorContext
 {
-    floorplanSettings: IFloorplanSettings;
+    originalFloorplanSettings: IFloorplanSettings;
-    setFloorplanSettings: React.Dispatch<React.SetStateAction<IFloorplanSettings>>;
+    setOriginalFloorplanSettings: React.Dispatch<React.SetStateAction<IFloorplanSettings>>;
+    visualizationSettings: IVisualizationSettings;
+    setVisualizationSettings: React.Dispatch<React.SetStateAction<IVisualizationSettings>>;
 }
 
-export interface IFloorplanSettings {
+export interface IFloorplanSettings extends IVisualizationSettings {
     tilemap: string;
     reservedTiles: boolean[][];
     entryPoint: [number, number];
+}
+
+export interface IVisualizationSettings {
     entryPointDir: number;
     wallHeight: number;
     thicknessWall: number;

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

@@ -6,7 +6,7 @@ import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
 
 export const FloorplanCanvasView: FC<{}> = props =>
 {
-    const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
+    const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null, visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
     const [ occupiedTilesReceived , setOccupiedTilesReceived ] = useState(false);
     const [ entryTileReceived, setEntryTileReceived ] = useState(false);
     const elementRef = useRef<HTMLDivElement>(null);
@@ -21,8 +21,9 @@ export const FloorplanCanvasView: FC<{}> = props =>
         return ( () =>
         {
             FloorplanEditor.instance.clear();
+            setVisualizationSettings( prev => {return { wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: prev.entryPointDir } }); 
         });
-    }, []);
+    }, [originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings]);
 
     const onRoomOccupiedTilesMessageEvent = useCallback((event: RoomOccupiedTilesMessageEvent) =>
     {
@@ -30,16 +31,16 @@ export const FloorplanCanvasView: FC<{}> = props =>
 
         if(!parser) return;
 
-        const settings = Object.assign({}, floorplanSettings);
+        const settings = Object.assign({}, originalFloorplanSettings);
         settings.reservedTiles = parser.blockedTilesMap;
-        setFloorplanSettings(settings);
+        setOriginalFloorplanSettings(settings);
         
-        FloorplanEditor.instance.setTilemap(floorplanSettings.tilemap, parser.blockedTilesMap);
+        FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, parser.blockedTilesMap);
 
         setOccupiedTilesReceived(true);
         
         elementRef.current.scrollTo(FloorplanEditor.instance.view.width / 3, 0);
-    }, [floorplanSettings, setFloorplanSettings]);
+    }, [originalFloorplanSettings, setOriginalFloorplanSettings]);
 
     CreateMessageHook(RoomOccupiedTilesMessageEvent, onRoomOccupiedTilesMessageEvent);
 
@@ -49,14 +50,18 @@ export const FloorplanCanvasView: FC<{}> = props =>
 
         if(!parser) return;
 
-        const settings = Object.assign({}, floorplanSettings);
+        const settings = Object.assign({}, originalFloorplanSettings);
         settings.entryPoint = [parser.x, parser.y];
         settings.entryPointDir = parser.direction;
-        setFloorplanSettings(settings);
+        setOriginalFloorplanSettings(settings);
+
+        const vSettings = Object.assign({}, visualizationSettings);
+        vSettings.entryPointDir = parser.direction;
+        setVisualizationSettings(vSettings);
         
-        FloorplanEditor.instance.doorLocation = new NitroPoint(settings.entryPoint[0], settings.entryPoint[1]);
+        FloorplanEditor.instance.doorLocation = new NitroPoint(parser.x, parser.y);
         setEntryTileReceived(true);
-    }, [floorplanSettings, setFloorplanSettings]);
+    }, [originalFloorplanSettings, setOriginalFloorplanSettings, setVisualizationSettings, visualizationSettings]);
 
     CreateMessageHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent);
 

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

@@ -0,0 +1,68 @@
+import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { LocalizeText } from '../../../api';
+import { SendMessageHook } from '../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGridColumn } from '../../../layout';
+import { convertNumbersForSaving } from '../common/Utils';
+import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
+
+export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = props =>
+{
+    const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null } = useFloorplanEditorContext();
+    
+    const { onCloseClick = null } = props;
+    const [ map, setMap ] = useState<string>('');
+
+    const convertMapToString = useCallback((map: string) =>
+    {
+        return map.replace(/\r\n|\r|\n/g, '\n').toLowerCase();
+    }, []);
+
+    const revertChanges= useCallback(() =>
+    {
+        setMap(convertMapToString(originalFloorplanSettings.tilemap));
+    }, [convertMapToString, originalFloorplanSettings.tilemap]);
+
+    const saveFloorChanges = useCallback(() =>
+    {
+        SendMessageHook(new UpdateFloorPropertiesMessageComposer(
+            map.split('\n').join('\r'),
+            originalFloorplanSettings.entryPoint[0],
+            originalFloorplanSettings.entryPoint[1],
+            originalFloorplanSettings.entryPointDir,
+            convertNumbersForSaving(originalFloorplanSettings.thicknessWall),
+            convertNumbersForSaving(originalFloorplanSettings.thicknessFloor),
+            originalFloorplanSettings.wallHeight - 1
+        ));
+    }, [map, originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight]);
+
+    useEffect(() =>
+    {
+        revertChanges();   
+    }, [revertChanges]);
+
+    return (
+        <NitroCardView simple={true} className="floorplan-import-export">
+            <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.import.export')} onCloseClick={ onCloseClick } />
+            <NitroCardContentView>
+                <NitroLayoutGridColumn size={ 12 } className="h-100">
+                    <textarea className="h-100" value={map} onChange={ event => setMap(event.target.value) }></textarea>
+                    <NitroLayoutFlex className="justify-content-between">
+                        <div className="btn-group">
+                            <button className="btn btn-primary" onClick={revertChanges}>{LocalizeText('floor.plan.editor.revert.to.last.received.map')}</button>
+                        </div>
+                        <div className="btn-group">
+                            <button className="btn btn-primary" onClick={saveFloorChanges}>{LocalizeText('floor.plan.editor.save')}</button>
+                        </div>
+                    </NitroLayoutFlex>
+                </NitroLayoutGridColumn>
+                
+            </NitroCardContentView>
+        </NitroCardView>
+    )
+}
+
+export interface FloorplanImportExportViewProps
+{
+    onCloseClick(): void;
+}

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

@@ -1,18 +1,23 @@
 import { FC, useCallback, useState } from 'react';
+import ReactSlider from 'react-slider';
 import { LocalizeText } from '../../../api';
 import { NitroCardGridItemView, NitroCardGridView, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../layout';
 import { NitroLayoutBase } from '../../../layout/base';
-import { FloorAction } from '../common/Constants';
+import { COLORMAP, FloorAction } from '../common/Constants';
 import { FloorplanEditor } from '../common/FloorplanEditor';
 import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
 
 const MIN_WALL_HEIGHT: number = 0;
 const MAX_WALL_HEIGHT: number = 16;
 
+const MIN_FLOOR_HEIGHT: number = 0;
+const MAX_FLOOR_HEIGHT: number = 26;
+
 export const FloorplanOptionsView: FC<{}> = props =>
 {
-    const { floorplanSettings = null, setFloorplanSettings = null } = useFloorplanEditorContext();
+    const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
     const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
+    const [ floorHeight, setFloorHeight ] = useState(0);
     
     const selectAction = useCallback((action: number) =>
     {
@@ -22,7 +27,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
     const changeDoorDirection = useCallback(() =>
     {
-        setFloorplanSettings(prevValue =>
+        setVisualizationSettings(prevValue =>
             {
                 const newValue = Object.assign({}, prevValue);
 
@@ -37,7 +42,40 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
                 return newValue;
             });
-    }, [ setFloorplanSettings ]);
+    }, [ setVisualizationSettings ]);
+
+    const onFloorHeightChange = useCallback((value: number) =>
+    {
+        if(isNaN(value) || (value <= 0)) value = 0;
+
+        if(value > 26) value = 26;
+
+        setFloorHeight(value);
+
+        FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
+    }, []);
+
+    const onFloorThicknessChange = useCallback((value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = Object.assign({}, prevValue);
+            newValue.thicknessFloor = value;
+
+            return newValue;
+        });
+    }, [setVisualizationSettings]);
+
+    const onWallThicknessChange = useCallback((value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+            {
+                const newValue = Object.assign({}, prevValue);
+                newValue.thicknessWall = value;
+    
+                return newValue;
+            });
+    }, [setVisualizationSettings]);
 
     const onWallHeightChange = useCallback((value: number) =>
     {
@@ -45,7 +83,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
         if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
 
-        setFloorplanSettings(prevValue =>
+        setVisualizationSettings(prevValue =>
             {
                 const newValue = Object.assign({}, prevValue);
 
@@ -53,11 +91,11 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
                 return newValue;
             });
-    }, [ setFloorplanSettings ]);
+    }, [ setVisualizationSettings ]);
 
     function increaseWallHeight(): void
     {
-        let height = (floorplanSettings.wallHeight + 1);
+        let height = (visualizationSettings.wallHeight + 1);
 
         if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
 
@@ -66,7 +104,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
 
     function decreaseWallHeight(): void
     {
-        let height = (floorplanSettings.wallHeight - 1);
+        let height = (visualizationSettings.wallHeight - 1);
 
         if(height <= 0) height = MIN_WALL_HEIGHT;
 
@@ -97,10 +135,10 @@ export const FloorplanOptionsView: FC<{}> = props =>
                     </NitroCardGridView>
                 </NitroLayoutFlexColumn>
             </NitroLayoutGridColumn>
-            <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
+            <NitroLayoutGridColumn className="align-items-center overflow-hidden" size={ 4 }>
                 <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
                     <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.enter.direction') }</NitroLayoutBase>
-                    <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
+                    <i className={ `icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
                 </NitroLayoutFlexColumn>
             </NitroLayoutGridColumn>
             <NitroLayoutGridColumn className="align-items-center" size={ 3 }>
@@ -108,41 +146,43 @@ export const FloorplanOptionsView: FC<{}> = props =>
                     <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.editor.wall.height') }</NitroLayoutBase>
                     <NitroLayoutFlex className="align-items-center">
                         <i className="fas fa-caret-left cursor-pointer me-1 text-black" onClick={ decreaseWallHeight } />
-                        <input type="number" className="form-control form-control-sm quantity-input" value={ floorplanSettings.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)} />
                         <i className="fas fa-caret-right cursor-pointer ms-1 text-black" onClick={ increaseWallHeight } />
                     </NitroLayoutFlex>
                 </NitroLayoutFlexColumn>
             </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={ 5 }>
+                <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
+                    <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</NitroLayoutBase>
+                    <ReactSlider
+                                    className="nitro-slider"
+                                    min={ MIN_FLOOR_HEIGHT }
+                                    max={ MAX_FLOOR_HEIGHT }
+                                    step={ 1 }
+                                    value={ floorHeight }
+                                    onChange={ event => onFloorHeightChange(event) }
+                                    renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${Object.entries(COLORMAP)[state.valueNow + 1][1]}`, ...style } } { ...rest }>{ state.valueNow }</div> } />
+                </NitroLayoutFlexColumn>
+            </NitroLayoutGridColumn>
+            <NitroLayoutGridColumn size={5}>
+                <NitroLayoutFlexColumn gap={ 2 } overflow="hidden">
+                <NitroLayoutBase className="flex-shrink-0 fw-bold text-black text-truncate">{ LocalizeText('floor.plan.editor.room.options') }</NitroLayoutBase>
+                <NitroLayoutFlex 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="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>
+                </NitroLayoutFlex>
+                </NitroLayoutFlexColumn>
+            </NitroLayoutGridColumn>
         </NitroLayoutGrid>
-    //     <NitroLayoutButton variant="primary" size="sm" onClick={ changeDoorDirection }>
-    //     <i className={ `icon icon-door-direction-${ floorplanSettings.entryPointDir }` } />
-    // </NitroLayoutButton>
-        // <>
-        // <div className="row justify-content-between mb-1">
-        //     <div className="col-6">
-        //         <label>{LocalizeText('floor.plan.editor.draw.mode')}</label>
-        //         <NitroCardGridView className="tile-options">
-        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.SET} onClick={() => selectAction(FloorAction.SET)} className="tile-option set-tile" />
-        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.UNSET} onClick={() => selectAction(FloorAction.UNSET)} className="tile-option unset-tile" />
-        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.UP} onClick={() => selectAction(FloorAction.UP)} className="tile-option increase-height" />
-        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.DOWN} onClick={() => selectAction(FloorAction.DOWN)} className="tile-option decrease-height" />
-        //             <NitroCardGridItemView itemActive={floorAction === FloorAction.DOOR} onClick={() => selectAction(FloorAction.DOOR)} className="tile-option set-door" />
-        //         </NitroCardGridView>
-        //     </div>
-        //     <div className="col-6">
-        //         <div className="d-flex w-100 gap-4">
-        //             <label>{LocalizeText('floor.plan.editor.enter.direction')}</label>
-        //             <label>{LocalizeText('floor.editor.wall.height')}</label>
-        //         </div>
-        //         <div className="d-flex w-100 gap-4 visualization-options">
-        //             <NitroCardGridItemView className={`option door-direction-${floorplanSettings.entryPointDir}`} onClick={changeDoorDirection}/>
-        //             <NitroCardGridItemView className="option"><input type="number" max={16} min={0} step={1} value={floorplanSettings.wallHeight} onChange={event => onWallHeightChange(event.target.valueAsNumber)} id="wallHeight"/></NitroCardGridItemView>
-        //         </div>
-        //     </div>
-        // </div>
-        // <div className="row justify-content-between mb-1">
-
-        // </div>
-        // </>
     );
 }