🆙 FloorEditor allow tile selection - Beta 2

src/components/floorplan-editor/common/FloorplanEditor.ts

@@ -11,7 +11,7 @@ export class FloorplanEditor {
     public static readonly TILE_BLOCKED = 'r_blocked';
     public static readonly TILE_DOOR = 'r_door';
 
-    private _squareSelectMode: boolean = false; // Mode flag (name remains for compatibility)
+    private _squareSelectMode: boolean = false;
     private _selectionStart: NitroPoint = null;
     private _selectionEnd: NitroPoint = null;
 
@@ -23,9 +23,10 @@ export class FloorplanEditor {
     private _lastUsedTile: NitroPoint;
     private _renderer: CanvasRenderingContext2D;
     private _actionSettings: ActionSettings;
-
     private _image: HTMLImageElement;
 
+    private _zoomLevel: number = 1.0;
+
     constructor() {
         const width = TILE_SIZE * MAX_NUM_TILE_PER_AXIS + 20;
         const height = (TILE_SIZE * MAX_NUM_TILE_PER_AXIS) / 2 + 100;
@@ -58,6 +59,7 @@ export class FloorplanEditor {
             this._selectionEnd = null;
         }
     }
+
     public get squareSelectMode(): boolean {
         return this._squareSelectMode;
     }
@@ -72,7 +74,7 @@ export class FloorplanEditor {
     public onPointerDown(event: PointerEvent): void {
         if (this._squareSelectMode) {
             event.preventDefault();
-            const location = new NitroPoint(event.offsetX, event.offsetY);
+            const location = new NitroPoint(event.offsetX / this._zoomLevel, event.offsetY / this._zoomLevel);
             const [tileX, tileY] = getTileFromScreenPosition(location.x, location.y);
             const roundedX = Math.floor(tileX);
             const roundedY = Math.floor(tileY);
@@ -82,23 +84,21 @@ export class FloorplanEditor {
             return;
         }
         if (event.button === 2) return;
-        const location = new NitroPoint(event.offsetX, event.offsetY);
+        const location = new NitroPoint(event.offsetX / this._zoomLevel, event.offsetY / this._zoomLevel);
         this._isPointerDown = true;
         this.tileHitDetection(location, true);
     }
 
     public onPointerMove(event: PointerEvent): void {
         if (!this._isPointerDown) return;
+        const location = new NitroPoint(event.offsetX / this._zoomLevel, event.offsetY / this._zoomLevel);
         if (this._squareSelectMode && this._selectionStart) {
-            const location = new NitroPoint(event.offsetX, event.offsetY);
             const [tileX, tileY] = getTileFromScreenPosition(location.x, location.y);
             this._selectionEnd.x = Math.floor(tileX);
             this._selectionEnd.y = Math.floor(tileY);
             this.renderTiles();
-            // Optionally, you could add a temporary overlay here if desired.
             return;
         }
-        const location = new NitroPoint(event.offsetX, event.offsetY);
         this.tileHitDetection(location, false);
     }
 
@@ -173,6 +173,9 @@ export class FloorplanEditor {
 
     public renderTiles(): void {
         this.clearCanvas();
+        this._renderer.save();
+        this._renderer.scale(this._zoomLevel, this._zoomLevel);
+
         for (let y = 0; y < this._tilemap.length; y++) {
             for (let x = 0; x < this.tilemap[y].length; x++) {
                 const tile = this.tilemap[y][x];
@@ -187,10 +190,18 @@ export class FloorplanEditor {
                     console.warn(`Asset "${assetName}" not found in spritesheet.`);
                     continue;
                 }
-                this.renderer.drawImage(this._image, asset.frame.x, asset.frame.y, asset.frame.w, asset.frame.h,
+                this.renderer.drawImage(
-                    positionX, positionY, asset.frame.w, asset.frame.h);
+                    this._image,
-                
+                    asset.frame.x,
-                // While dragging in selection mode, overlay green on tiles within the selection region.
+                    asset.frame.y,
+                    asset.frame.w,
+                    asset.frame.h,
+                    positionX,
+                    positionY,
+                    asset.frame.w,
+                    asset.frame.h
+                );
+
                 if (this._squareSelectMode && this._isPointerDown && this._selectionStart && this._selectionEnd) {
                     const selMinX = Math.min(this._selectionStart.x, this._selectionEnd.x);
                     const selMaxX = Math.max(this._selectionStart.x, this._selectionEnd.x);
@@ -202,22 +213,51 @@ export class FloorplanEditor {
                         continue;
                     }
                 }
-                
+
                 if (tile.selected) {
-                    this.renderer.fillStyle = 'rgba(0, 0, 255, 0.3)';
+                    this.renderer.fillStyle = tile.isBlocked ? 'rgb(128, 0, 128)' : 'rgba(0, 0, 255, 0.3)';
                     this.renderer.fillRect(positionX, positionY, asset.frame.w, asset.frame.h);
                 }
             }
         }
+        this._renderer.restore();
     }
 
-    // Toggle select all (always selects)
     public toggleSelectAll(): void {
-        const newState = true;
         for (let y = 0; y < this._tilemap.length; y++) {
             for (let x = 0; x < this._tilemap[y].length; x++) {
-                this._tilemap[y][x].selected = newState;
+                this._tilemap[y][x].selected = true;
-                this.onClick(x, y, false, true);
+                if (this._actionSettings.currentAction !== FloorAction.DOOR) {
+                    const tile = this._tilemap[y][x];
+                    let currentHeightIndex = tile.height === 'x' ? 0 : HEIGHT_SCHEME.indexOf(tile.height);
+                    let futureHeightIndex = 0;
+                    switch (this._actionSettings.currentAction) {
+                        case FloorAction.UP:
+                            if (tile.height === 'x') continue;
+                            futureHeightIndex = currentHeightIndex + 1;
+                            break;
+                        case FloorAction.DOWN:
+                            if (tile.height === 'x' || currentHeightIndex <= 1) continue;
+                            futureHeightIndex = currentHeightIndex - 1;
+                            break;
+                        case FloorAction.SET:
+                            futureHeightIndex = HEIGHT_SCHEME.indexOf(this._actionSettings.currentHeight);
+                            break;
+                        case FloorAction.UNSET:
+                            futureHeightIndex = 0;
+                            break;
+                        default:
+                            continue;
+                    }
+                    if (futureHeightIndex !== -1 && currentHeightIndex !== futureHeightIndex) {
+                        const newHeight = HEIGHT_SCHEME[futureHeightIndex];
+                        if (newHeight) {
+                            this._tilemap[y][x].height = newHeight;
+                            if ((x + 1) > this._width) this._width = x + 1;
+                            if ((y + 1) > this._height) this._height = y + 1;
+                        }
+                    }
+                }
             }
         }
         this.recalcActiveArea();
@@ -355,6 +395,29 @@ export class FloorplanEditor {
         this.renderer.fillRect(0, 0, this._renderer.canvas.width, this._renderer.canvas.height);
     }
 
+    public zoomIn(): void {
+        this._zoomLevel = Math.min(this._zoomLevel + 0.1, 2.0);
+        this.adjustCanvasSize();
+        this.renderTiles();
+    }
+
+    public zoomOut(): void {
+        this._zoomLevel = Math.max(this._zoomLevel - 0.1, 0.5);
+        this.adjustCanvasSize();
+        this.renderTiles();
+    }
+
+    private adjustCanvasSize(): void {
+        const baseWidth = TILE_SIZE * MAX_NUM_TILE_PER_AXIS + 20;
+        const baseHeight = (TILE_SIZE * MAX_NUM_TILE_PER_AXIS) / 2 + 100;
+        this._renderer.canvas.width = baseWidth * this._zoomLevel;
+        this._renderer.canvas.height = baseHeight * this._zoomLevel;
+    }
+
+    public get zoomLevel(): number {
+        return this._zoomLevel;
+    }
+
     public get renderer(): CanvasRenderingContext2D {
         return this._renderer;
     }
@@ -381,4 +444,4 @@ export class FloorplanEditor {
         }
         return FloorplanEditor._INSTANCE;
     }
-}
+}

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

@@ -1,6 +1,6 @@
 import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa';
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaSearchPlus, FaSearchMinus } from 'react-icons/fa'; // Added FaSearchPlus and FaSearchMinus for zoom icons
 import { SendMessageComposer } from '../../../api';
 import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
@@ -105,6 +105,14 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
         }
     }
 
+    const handleZoomIn = () => {
+        FloorplanEditor.instance.zoomIn();
+    };
+
+    const handleZoomOut = () => {
+        FloorplanEditor.instance.zoomOut();
+    };
+
     useEffect(() =>
     {
         return () =>
@@ -174,9 +182,15 @@ export const FloorplanCanvasView: FC<ColumnProps> = props =>
                         <FaArrowLeft className="fa-icon" />
                     </Button>
                 </Column>
-                <Column overflow="hidden" size={ isSmallScreen() ? 10: 12 } gap={ 1 }>
+                <Column overflow="hidden" size={ isSmallScreen() ? 10 : 12 } gap={ 1 }>
-                    <Flex justifyContent="center" className="d-md-none">
+                    <Flex justifyContent="left" gap={ 1 }>
-                        <Button shrink onClick={ event => onClickArrowButton('up') }>
+                        <Button shrink onClick={ handleZoomIn }>
+                            <FaSearchPlus className="fa-icon" />
+                        </Button>
+                        <Button shrink onClick={ handleZoomOut }>
+                            <FaSearchMinus className="fa-icon" />
+                        </Button>
+                        <Button shrink onClick={ event => onClickArrowButton('up') } className="d-md-none">
                             <FaArrowUp className="fa-icon" />
                         </Button>
                     </Flex>

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

@@ -12,155 +12,181 @@ 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 { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
-  const [ floorHeight, setFloorHeight ] = useState(0);
+    const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
-  
+    const [ floorHeight, setFloorHeight ] = useState(0);
-  const selectAction = (action: number) => {
+    
-    setFloorAction(action);
+    const selectAction = (action: number) =>
-    FloorplanEditor.instance.actionSettings.currentAction = action;
+    {
-  }
+        setFloorAction(action);
 
-  const changeDoorDirection = () => {
+        FloorplanEditor.instance.actionSettings.currentAction = action;
-    setVisualizationSettings(prevValue => {
+    }
-      const newValue = { ...prevValue };
-      if(newValue.entryPointDir < 7) {
-        ++newValue.entryPointDir;
-      } else {
-        newValue.entryPointDir = 0;
-      }
-      return newValue;
-    });
-  }
 
-  const onFloorHeightChange = (value: number) => {
+    const changeDoorDirection = () =>
-    if(isNaN(value) || (value <= 0)) value = 0;
+    {
-    if(value > 26) value = 26;
+        setVisualizationSettings(prevValue =>
-    setFloorHeight(value);
+        {
-    FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
+            const newValue = { ...prevValue };
-  }
 
-  const onFloorThicknessChange = (value: number) => {
+            if(newValue.entryPointDir < 7)
-    setVisualizationSettings(prevValue => {
+            {
-      const newValue = { ...prevValue };
+                ++newValue.entryPointDir;
-      newValue.thicknessFloor = value;
+            }
-      return newValue;
+            else
-    });
+            {
-  }
+                newValue.entryPointDir = 0;
+            }
 
-  const onWallThicknessChange = (value: number) => {
+            return newValue;
-    setVisualizationSettings(prevValue => {
+        });
-      const newValue = { ...prevValue };
+    }
-      newValue.thicknessWall = value;
-      return newValue;
-    });
-  }
 
-  const onWallHeightChange = (value: number) => {
+    const onFloorHeightChange = (value: number) =>
-    if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
+    {
-    if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
+        if(isNaN(value) || (value <= 0)) value = 0;
-    setVisualizationSettings(prevValue => {
-      const newValue = { ...prevValue };
-      newValue.wallHeight = value;
-      return newValue;
-    });
-  }
 
-  const increaseWallHeight = () => {
+        if(value > 26) value = 26;
-    let height = (visualizationSettings.wallHeight + 1);
-    if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
-    onWallHeightChange(height);
-  }
 
-  const decreaseWallHeight = () => {
+        setFloorHeight(value);
-    let height = (visualizationSettings.wallHeight - 1);
-    if(height <= 0) height = MIN_WALL_HEIGHT;
-    onWallHeightChange(height);
-  }
 
-  return (
+        FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
-    <Column>
+    }
-      <Flex gap={ 1 }>
+
-        <Column size={ 5 } gap={ 1 }>
+    const onFloorThicknessChange = (value: number) =>
-          <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
+    {
-          <Flex gap={ 3 }>
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
+
+            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;
+
+        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 (
+        <Column>
             <Flex gap={ 1 }>
-              <LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
+                <Column size={ 5 } gap={ 1 }>
-                <i className="icon icon-set-tile" />
+                    <Text bold>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
-              </LayoutGridItem>
+                    <Flex gap={ 3 }>
-              <LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
+                        <Flex gap={ 1 }>
-                <i className="icon icon-unset-tile" />
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ event => selectAction(FloorAction.SET) }>
-              </LayoutGridItem>
+                                <i className="icon icon-set-tile" />
+                            </LayoutGridItem>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ event => selectAction(FloorAction.UNSET) }>
+                                <i className="icon icon-unset-tile" />
+                            </LayoutGridItem>
+                        </Flex>
+                        <Flex gap={ 1 }>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
+                                <i className="icon icon-increase-height" />
+                            </LayoutGridItem>
+                            <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
+                                <i className="icon icon-decrease-height" />
+                            </LayoutGridItem>
+							<LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
+								<i className="icon icon-set-door" />
+							</LayoutGridItem>
+							<LayoutGridItem onClick={ event => FloorplanEditor.instance.toggleSelectAll() }>
+								<i className="icon icon-set-select" />
+							</LayoutGridItem>
+							<LayoutGridItem itemActive={ FloorplanEditor.instance.squareSelectMode } onClick={ event => { FloorplanEditor.instance.setSquareSelectMode(!FloorplanEditor.instance.squareSelectMode);} }><i className="icon icon-set-select" />
+						</LayoutGridItem>
+						</Flex>
+                    </Flex>
+                </Column>
+                <Column alignItems="center" size={ 4 }>
+                    <Text bold>{ LocalizeText('floor.plan.editor.enter.direction') }</Text>
+                    <i className={ `icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
+                </Column>
+                <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>
             </Flex>
             <Flex gap={ 1 }>
-              <LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ event => selectAction(FloorAction.UP) }>
+                <Column size={ 6 }>
-                <i className="icon icon-increase-height" />
+                    <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
-              </LayoutGridItem>
+                    <Slider
-              <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
+                        min={ MIN_FLOOR_HEIGHT }
-                <i className="icon icon-decrease-height" />
+                        max={ MAX_FLOOR_HEIGHT }
-              </LayoutGridItem>
+                        step={ 1 }
+                        value={ floorHeight }
+                        onChange={ event => onFloorHeightChange(event) }
+                        renderThumb={ ({ style, ...rest }, state) => <div 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="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>
+                    </Flex>
+                </Column>
             </Flex>
-            <LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
-              <i className="icon icon-set-door" />
-            </LayoutGridItem>
-            <LayoutGridItem onClick={ event => FloorplanEditor.instance.toggleSelectAll() }>
-              <i className="icon icon-set-select" />
-            </LayoutGridItem>
-            <LayoutGridItem itemActive={ FloorplanEditor.instance.squareSelectMode } onClick={ event => {
-              FloorplanEditor.instance.setSquareSelectMode(!FloorplanEditor.instance.squareSelectMode);
-            } }>
-              <i className="icon icon-set-select" />
-            </LayoutGridItem>
-          </Flex>
         </Column>
-        <Column alignItems="center" size={ 4 }>
+    );
-          <Text bold>{ LocalizeText('floor.plan.editor.enter.direction') }</Text>
+}
-          <i className={ `icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
-        </Column>
-        <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>
-      </Flex>
-      <Flex gap={ 1 }>
-        <Column size={ 6 }>
-          <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
-          <Slider
-            min={ MIN_FLOOR_HEIGHT }
-            max={ MAX_FLOOR_HEIGHT }
-            step={ 1 }
-            value={ floorHeight }
-            onChange={ event => onFloorHeightChange(event) }
-            renderThumb={ ({ style, key, ...thumbProps }, state) => (
-              <div key={ key } style={{ backgroundColor: `#${COLORMAP[state.valueNow.toString(33)]}`, ...style }} {...thumbProps}>
-                { state.valueNow }
-              </div>
-            ) }
-          />
-        </Column>
-        <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="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>
-      </Flex>
-    </Column>
-  );
-}