Add real-time 3D preview to floor plan editor

Redesign the floor plan editor with side-by-side layout featuring:
- Real-time isometric 3D preview that updates as tiles are drawn
- Vertical height gradient selector with COLORMAP colors
- Area counter showing total and walkable tile counts
- Zoom controls (+/-) on the 2D canvas
- Simplified single-row toolbar
- Wall height control in the preview panel

Co-Authored-By: medievalshell <medievalshell@users.noreply.github.com>

src/components/floorplan-editor/FloorplanEditorContext.tsx

@@ -8,13 +8,25 @@ interface IFloorplanEditorContext
     setOriginalFloorplanSettings: Dispatch<SetStateAction<IFloorplanSettings>>;
     visualizationSettings: IVisualizationSettings;
     setVisualizationSettings: Dispatch<SetStateAction<IVisualizationSettings>>;
+    floorHeight: number;
+    setFloorHeight: Dispatch<SetStateAction<number>>;
+    floorAction: number;
+    setFloorAction: Dispatch<SetStateAction<number>>;
+    tilemapVersion: number;
+    areaInfo: { total: number; walkable: number };
 }
 
 const FloorplanEditorContext = createContext<IFloorplanEditorContext>({
     originalFloorplanSettings: null,
     setOriginalFloorplanSettings: null,
     visualizationSettings: null,
-    setVisualizationSettings: null
+    setVisualizationSettings: null,
+    floorHeight: 0,
+    setFloorHeight: null,
+    floorAction: 3,
+    setFloorAction: null,
+    tilemapVersion: 0,
+    areaInfo: { total: 0, walkable: 0 }
 });
 
 export const FloorplanEditorContextProvider: FC<ProviderProps<IFloorplanEditorContext>> = props => <FloorplanEditorContext.Provider { ...props } />;

src/components/floorplan-editor/FloorplanEditorView.tsx

@@ -1,19 +1,22 @@
 import { AddLinkEventTracker, FloorHeightMapEvent, ILinkEventTracker, RemoveLinkEventTracker, RoomEngineEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import { LocalizeText, SendMessageComposer } from '../../api';
-import { Button, ButtonGroup, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Button, ButtonGroup, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useMessageEvent, useNitroEvent } from '../../hooks';
 import { FloorplanEditorContextProvider } from './FloorplanEditorContext';
 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 { convertNumbersForSaving, convertSettingToNumber, FloorAction, HEIGHT_SCHEME } from '@nitrots/nitro-renderer';
 import { FloorplanCanvasView } from './views/FloorplanCanvasView';
 import { FloorplanImportExportView } from './views/FloorplanImportExportView';
 import { FloorplanOptionsView } from './views/FloorplanOptionsView';
+import { FloorplanHeightSelector } from './views/FloorplanHeightSelector';
+import { FloorplanPreviewView } from './views/FloorplanPreviewView';
 
-
-type ScrollDirection = 'up' | 'down' | 'left' | 'right';
+const MIN_WALL_HEIGHT = 0;
+const MAX_WALL_HEIGHT = 16;
 
 export const FloorplanEditorView: FC<{}> = props =>
 {
@@ -34,7 +37,65 @@ export const FloorplanEditorView: FC<{}> = props =>
         thicknessWall: 1,
         thicknessFloor: 1
     });
-    const [ canvasScrollHandler, setCanvasScrollHandler ] = useState<((direction: ScrollDirection) => void) | null>(null);
+    const [ floorHeight, setFloorHeight ] = useState(0);
+    const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
+    const [ tilemapVersion, setTilemapVersion ] = useState(0);
+    const [ areaInfo, setAreaInfo ] = useState({ total: 0, walkable: 0 });
+
+    const calculateArea = useCallback(() =>
+    {
+        const tilemap = FloorplanEditor.instance.tilemap;
+
+        if(!tilemap || tilemap.length === 0)
+        {
+            setAreaInfo({ total: 0, walkable: 0 });
+
+            return;
+        }
+
+        let total = 0;
+        let walkable = 0;
+
+        for(let y = 0; y < tilemap.length; y++)
+        {
+            if(!tilemap[y]) continue;
+
+            for(let x = 0; x < tilemap[y].length; x++)
+            {
+                if(!tilemap[y][x] || tilemap[y][x].height === 'x') continue;
+
+                total++;
+
+                if(!tilemap[y][x].isBlocked) walkable++;
+            }
+        }
+
+        setAreaInfo({ total, walkable });
+    }, []);
+
+    // sync floorHeight/floorAction changes to the FloorplanEditor instance
+    useEffect(() =>
+    {
+        FloorplanEditor.instance.actionSettings.currentAction = floorAction;
+        FloorplanEditor.instance.actionSettings.currentHeight = floorHeight.toString(36);
+    }, [ floorHeight, floorAction ]);
+
+    // register onTilemapChange callback
+    useEffect(() =>
+    {
+        if(!isVisible) return;
+
+        FloorplanEditor.instance.onTilemapChange = () =>
+        {
+            setTilemapVersion(prev => prev + 1);
+            calculateArea();
+        };
+
+        return () =>
+        {
+            FloorplanEditor.instance.onTilemapChange = null;
+        };
+    }, [ isVisible, calculateArea ]);
 
     const saveFloorChanges = () =>
     {
@@ -47,16 +108,50 @@ export const FloorplanEditorView: FC<{}> = props =>
             convertNumbersForSaving(visualizationSettings.thicknessFloor),
             (visualizationSettings.wallHeight - 1)
         ));
-    }
+    };
 
     const revertChanges = () =>
     {
         setVisualizationSettings({ wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: originalFloorplanSettings.entryPointDir });
-        
+
         FloorplanEditor.instance.doorLocation = { x: originalFloorplanSettings.entryPoint[0], y: originalFloorplanSettings.entryPoint[1] };
         FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, originalFloorplanSettings.reservedTiles);
         FloorplanEditor.instance.renderTiles();
-    }
+    };
+
+    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);
+    };
 
     useNitroEvent<RoomEngineEvent>(RoomEngineEvent.DISPOSED, event => setIsVisible(false));
 
@@ -117,7 +212,7 @@ export const FloorplanEditorView: FC<{}> = props =>
                 const parts = url.split('/');
 
                 if(parts.length < 2) return;
-        
+
                 switch(parts[1])
                 {
                     case 'show':
@@ -140,17 +235,42 @@ export const FloorplanEditorView: FC<{}> = props =>
     }, []);
 
     return (
-        <FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
+        <FloorplanEditorContextProvider value={ {
+            originalFloorplanSettings,
+            setOriginalFloorplanSettings,
+            visualizationSettings,
+            setVisualizationSettings,
+            floorHeight,
+            setFloorHeight,
+            floorAction,
+            setFloorAction,
+            tilemapVersion,
+            areaInfo
+        } }>
             { isVisible &&
-                <NitroCardView uniqueKey="floorpan-editor" className="w-[760px] h-[500px]" theme="primary-slim">
+                <NitroCardView uniqueKey="floorpan-editor" className="w-[1100px] h-[600px]" theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.title') } onCloseClick={ () => setIsVisible(false) } />
-                    <NitroCardContentView overflow="hidden">
-                        <FloorplanOptionsView onCanvasScroll={ direction => canvasScrollHandler && canvasScrollHandler(direction) } />
-                        <FloorplanCanvasView overflow="hidden" setScrollHandler={ setCanvasScrollHandler } />
+                    <NitroCardContentView overflow="hidden" className="flex flex-col">
+                        <FloorplanOptionsView />
+                        <Flex gap={ 2 } className="flex-1 min-h-0">
+                            <FloorplanHeightSelector />
+                            <FloorplanCanvasView overflow="hidden" />
+                            <Column gap={ 2 } className="w-[380px] min-w-[380px]">
+                                <FloorplanPreviewView />
+                                <Flex gap={ 1 } alignItems="center">
+                                    <Text bold small>{ LocalizeText('floor.editor.wall.height') }</Text>
+                                    <FaCaretLeft className="cursor-pointer fa-icon" onClick={ decreaseWallHeight } />
+                                    <input type="number" className="form-control form-control-sm w-[49px]" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
+                                    <FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
+                                </Flex>
+                                <Text bold small className="text-center">
+                                    Area: { areaInfo.total } ({ areaInfo.walkable } caselle)
+                                </Text>
+                            </Column>
+                        </Flex>
                         <Flex justifyContent="between">
-                            <Button onClick={ revertChanges }>{ LocalizeText('floor.plan.editor.reload') }</Button>
+                            <Button variant="danger" onClick={ revertChanges }>{ LocalizeText('floor.plan.editor.reload') }</Button>
                             <ButtonGroup>
-                                <Button disabled={ true }>{ LocalizeText('floor.plan.editor.preview') }</Button>
                                 <Button onClick={ event => setImportExportVisible(true) }>{ LocalizeText('floor.plan.editor.import.export') }</Button>
                                 <Button onClick={ saveFloorChanges }>{ LocalizeText('floor.plan.editor.save') }</Button>
                             </ButtonGroup>
@@ -161,4 +281,4 @@ export const FloorplanEditorView: FC<{}> = props =>
                 <FloorplanImportExportView onCloseClick={ () => setImportExportVisible(false) } /> }
         </FloorplanEditorContextProvider>
     );
-}
+};

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

@@ -1,25 +1,25 @@
 import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
+import { FaPlus, FaMinus } from 'react-icons/fa';
 import { SendMessageComposer } from '../../../api';
 import { Base, Column, ColumnProps } from '../../../common';
 import { useMessageEvent } from '../../../hooks';
 import { useFloorplanEditorContext } from '../FloorplanEditorContext';
 import { FloorplanEditor } from '@nitrots/nitro-renderer';
 
-type ScrollDirection = 'up' | 'down' | 'left' | 'right';
-
 interface FloorplanCanvasViewProps extends ColumnProps
 {
-    setScrollHandler(handler: ((direction: ScrollDirection) => void) | null): void;
 }
 
 export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
 {
-    const { gap = 1, children = null, setScrollHandler = null, ...rest } = props;
-    const [ occupiedTilesReceived , setOccupiedTilesReceived ] = useState(false);
+    const { gap = 1, children = null, ...rest } = props;
+    const [ occupiedTilesReceived, setOccupiedTilesReceived ] = useState(false);
     const [ entryTileReceived, setEntryTileReceived ] = useState(false);
+    const [ zoomLevel, setZoomLevel ] = useState(1.0);
     const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
     const elementRef = useRef<HTMLDivElement>(null);
+    const canvasWrapperRef = useRef<HTMLDivElement>(null);
 
     useMessageEvent<RoomOccupiedTilesMessageEvent>(RoomOccupiedTilesMessageEvent, event =>
     {
@@ -37,7 +37,7 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
         });
 
         setOccupiedTilesReceived(true);
-        
+
         elementRef.current.scrollTo((FloorplanEditor.instance.renderer.canvas.width / 3), 0);
     });
 
@@ -63,39 +63,16 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
 
             return newValue;
         });
-        
+
         FloorplanEditor.instance.doorLocation = { x: parser.x, y: parser.y };
 
         setEntryTileReceived(true);
     });
 
-    const onClickArrowButton = (scrollDirection: ScrollDirection) =>
-    {
-        const element = elementRef.current;
-
-        if(!element) return;
-
-        switch(scrollDirection)
-        {
-            case 'up':
-                element.scrollBy({ top: -10 });
-                break;
-            case 'down':
-                element.scrollBy({ top: 10 });
-                break;
-            case 'left':
-                element.scrollBy({ left: -10 });
-                break;
-            case 'right':
-                element.scrollBy({ left: 10 });
-                break;
-        }
-    }
-
     const onPointerEvent = (event: PointerEvent) =>
     {
         event.preventDefault();
-        
+
         switch(event.type)
         {
             case 'pointerout':
@@ -109,7 +86,10 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
                 FloorplanEditor.instance.onPointerMove(event);
                 break;
         }
-    }
+    };
+
+    const zoomIn = () => setZoomLevel(prev => Math.min(prev + 0.25, 2.0));
+    const zoomOut = () => setZoomLevel(prev => Math.max(prev - 0.25, 0.5));
 
     useEffect(() =>
     {
@@ -124,15 +104,15 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
                     thicknessWall: originalFloorplanSettings.thicknessWall,
                     thicknessFloor: originalFloorplanSettings.thicknessFloor,
                     entryPointDir: prevValue.entryPointDir
-                }
+                };
             });
-        }
+        };
     }, [ originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings ]);
 
     useEffect(() =>
     {
         if(!entryTileReceived || !occupiedTilesReceived) return;
-        
+
         FloorplanEditor.instance.renderTiles();
     }, [ entryTileReceived, occupiedTilesReceived ]);
 
@@ -144,45 +124,56 @@ export const FloorplanCanvasView: FC<FloorplanCanvasViewProps> = props =>
         const currentElement = elementRef.current;
 
         if(!currentElement) return;
-                
-        currentElement.appendChild(FloorplanEditor.instance.renderer.canvas);
+
+        const wrapper = canvasWrapperRef.current;
+
+        if(wrapper) wrapper.appendChild(FloorplanEditor.instance.renderer.canvas);
 
         currentElement.addEventListener('pointerup', onPointerEvent);
-
         currentElement.addEventListener('pointerout', onPointerEvent);
-
         currentElement.addEventListener('pointerdown', onPointerEvent);
-
         currentElement.addEventListener('pointermove', onPointerEvent);
 
-        return () => 
+        return () =>
         {
             if(currentElement)
             {
                 currentElement.removeEventListener('pointerup', onPointerEvent);
-
                 currentElement.removeEventListener('pointerout', onPointerEvent);
-
                 currentElement.removeEventListener('pointerdown', onPointerEvent);
-
                 currentElement.removeEventListener('pointermove', onPointerEvent);
             }
-        }
+        };
     }, []);
 
-    useEffect(() =>
-    {
-        if(!setScrollHandler) return;
-
-        setScrollHandler(() => onClickArrowButton);
-
-        return () => setScrollHandler(null);
-    }, [ setScrollHandler ]);
-
     return (
-        <Column gap={ gap } { ...rest }>
-            <Base overflow="auto" innerRef={ elementRef } />
+        <Column gap={ gap } { ...rest } className="relative flex-1">
+            <Base overflow="auto" innerRef={ elementRef } className="flex-1">
+                <div
+                    ref={ canvasWrapperRef }
+                    style={ {
+                        transform: `scale(${ zoomLevel })`,
+                        transformOrigin: '0 0'
+                    } }
+                />
+            </Base>
+            <div className="absolute top-2 right-2 flex flex-col gap-1 z-10">
+                <button
+                    className="w-[28px] h-[28px] flex items-center justify-center rounded bg-[#1e7295] text-white border border-transparent shadow cursor-pointer hover:brightness-110"
+                    onClick={ zoomIn }
+                    title="Zoom in"
+                >
+                    <FaPlus size={ 10 } />
+                </button>
+                <button
+                    className="w-[28px] h-[28px] flex items-center justify-center rounded bg-[#1e7295] text-white border border-transparent shadow cursor-pointer hover:brightness-110"
+                    onClick={ zoomOut }
+                    title="Zoom out"
+                >
+                    <FaMinus size={ 10 } />
+                </button>
+            </div>
             { children }
         </Column>
     );
-}
+};

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

@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import { COLORMAP, FloorAction, HEIGHT_SCHEME } from '@nitrots/nitro-renderer';
+import { FloorplanEditor } from '@nitrots/nitro-renderer';
+import { Column, Text } from '../../../common';
+import { useFloorplanEditorContext } from '../FloorplanEditorContext';
+
+const colormap = COLORMAP as Record<string, string>;
+
+export const FloorplanHeightSelector: FC<{}> = () =>
+{
+    const { floorHeight, setFloorHeight, setFloorAction } = useFloorplanEditorContext();
+
+    const onSelectHeight = (height: number) =>
+    {
+        setFloorHeight(height);
+        setFloorAction(FloorAction.SET);
+
+        FloorplanEditor.instance.actionSettings.currentAction = FloorAction.SET;
+        FloorplanEditor.instance.actionSettings.currentHeight = height.toString(36);
+    };
+
+    const heights: number[] = [];
+
+    for(let i = 26; i >= 0; i--) heights.push(i);
+
+    return (
+        <Column className="h-full w-[30px] min-w-[30px] select-none">
+            <Text bold small center>{ floorHeight }</Text>
+            <div className="flex flex-col flex-1 rounded overflow-hidden border-2 border-muted">
+                { heights.map(h =>
+                {
+                    const char = HEIGHT_SCHEME[h + 1];
+                    const color = colormap[char] || '101010';
+                    const isActive = (floorHeight === h);
+
+                    return (
+                        <div
+                            key={ h }
+                            className="flex-1 cursor-pointer relative flex items-center justify-center"
+                            style={ {
+                                backgroundColor: `#${ color }`,
+                                outline: isActive ? '2px solid #fff' : 'none',
+                                outlineOffset: '-2px',
+                                zIndex: isActive ? 1 : 0
+                            } }
+                            onClick={ () => onSelectHeight(h) }
+                            title={ `${ h }` }
+                        />
+                    );
+                }) }
+            </div>
+        </Column>
+    );
+};

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

@@ -1,45 +1,32 @@
-import { FC, useState } from 'react';
-import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCaretLeft, FaCaretRight } from 'react-icons/fa';
+import { FC } from 'react';
 import { LocalizeText } from '../../../api';
-import { Button, Column, Flex, LayoutGridItem, Slider, Text } from '../../../common';
-import { COLORMAP, FloorAction } from '@nitrots/nitro-renderer';
+import { Flex, LayoutGridItem, Text } from '../../../common';
+import { FloorAction } from '@nitrots/nitro-renderer';
 import { FloorplanEditor } from '@nitrots/nitro-renderer';
 import { useFloorplanEditorContext } from '../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;
-
-type ScrollDirection = 'up' | 'down' | 'left' | 'right';
-
 interface FloorplanOptionsViewProps
 {
-    onCanvasScroll?(direction: ScrollDirection): void;
 }
 
 export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
 {
-    const { onCanvasScroll = () => {} } = props;
-    const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
-    const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
-    const [ floorHeight, setFloorHeight ] = useState(0);
-    const [ isSquareSelectMode, setSquareSelectMode ] = useState(false);
-    
+    const { visualizationSettings = null, setVisualizationSettings = null, floorAction, setFloorAction } = useFloorplanEditorContext();
+    const isSquareSelectMode = FloorplanEditor.instance.isSquareSelectMode;
+
     const selectAction = (action: number) =>
     {
         setFloorAction(action);
 
         FloorplanEditor.instance.actionSettings.currentAction = action;
-    }
+    };
 
     const toggleSquareSelectMode = () =>
     {
-        const nextValue = FloorplanEditor.instance.toggleSquareSelectMode();
-
-        setSquareSelectMode(nextValue);
-    }
+        FloorplanEditor.instance.toggleSquareSelectMode();
+        // force re-render by toggling action to same value
+        setFloorAction(prev => prev);
+    };
 
     const changeDoorDirection = () =>
     {
@@ -58,18 +45,19 @@ export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
 
             return newValue;
         });
-    }
+    };
 
-    const onFloorHeightChange = (value: number) =>
+    const onWallThicknessChange = (value: number) =>
     {
-        if(isNaN(value) || (value <= 0)) value = 0;
+        setVisualizationSettings(prevValue =>
+        {
+            const newValue = { ...prevValue };
 
-        if(value > 26) value = 26;
+            newValue.thicknessWall = value;
 
-        setFloorHeight(value);
-
-        FloorplanEditor.instance.actionSettings.currentHeight = value.toString(36);
-    }
+            return newValue;
+        });
+    };
 
     const onFloorThicknessChange = (value: number) =>
     {
@@ -81,157 +69,54 @@ export const FloorplanOptionsView: FC<FloorplanOptionsViewProps> = props =>
 
             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 }>
-                <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={ event => selectAction(FloorAction.UNSET) }>
-                                <i className="nitro-icon icon-unset-tile" />
-                            </LayoutGridItem>
-                        </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={ event => selectAction(FloorAction.DOWN) }>
-                                <i className="nitro-icon icon-decrease-height" />
-                            </LayoutGridItem>
-                        </Flex>
-                        <LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ event => selectAction(FloorAction.DOOR) }>
-                            <i className="nitro-icon icon-set-door" />
-                        </LayoutGridItem>
-                        <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>
-                    </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>
-                <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 w-[49px]" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
-                        <FaCaretRight className="cursor-pointer fa-icon" onClick={ increaseWallHeight } />
-                    </Flex>
-                </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 gap={ 2 } alignItems="center">
+            <Flex gap={ 1 } alignItems="center">
+                <Text bold small>{ LocalizeText('floor.plan.editor.draw.mode') }</Text>
+                <Flex gap={ 1 }>
+                    <LayoutGridItem itemActive={ (floorAction === FloorAction.SET) } onClick={ () => selectAction(FloorAction.SET) }>
+                        <i className="nitro-icon icon-set-tile" />
+                    </LayoutGridItem>
+                    <LayoutGridItem itemActive={ (floorAction === FloorAction.UNSET) } onClick={ () => selectAction(FloorAction.UNSET) }>
+                        <i className="nitro-icon icon-unset-tile" />
+                    </LayoutGridItem>
+                    <LayoutGridItem itemActive={ (floorAction === FloorAction.UP) } onClick={ () => selectAction(FloorAction.UP) }>
+                        <i className="nitro-icon icon-increase-height" />
+                    </LayoutGridItem>
+                    <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ () => selectAction(FloorAction.DOWN) }>
+                        <i className="nitro-icon icon-decrease-height" />
+                    </LayoutGridItem>
+                    <LayoutGridItem itemActive={ (floorAction === FloorAction.DOOR) } onClick={ () => 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>
+                    <LayoutGridItem itemActive={ isSquareSelectMode } onClick={ toggleSquareSelectMode }>
+                        <i className={ `nitro-icon ${ isSquareSelectMode ? 'icon-set-active-squaresselect' : 'icon-set-squaresselect' }` } />
+                    </LayoutGridItem>
+                </Flex>
             </Flex>
-            <Flex gap={ 2 } alignItems="center" justifyContent="between">
-                <Column size={ 6 }>
-                    <Text bold>{ LocalizeText('floor.plan.editor.tile.height') }: { floorHeight }</Text>
-                    <div style={ { width: '100%', maxWidth: 240 } }>
-                        <Slider
-                            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>;
-                            } } />
-                    </div>
-                </Column>
-                <Column gap={ 1 }>
-                    <Flex justifyContent="center">
-                        <Button shrink onClick={ event => onCanvasScroll('up') }>
-                            <FaArrowUp className="fa-icon" />
-                        </Button>
-                    </Flex>
-                    <Flex alignItems="center" justifyContent="center" gap={ 1 }>
-                        <Button shrink onClick={ event => onCanvasScroll('left') }>
-                            <FaArrowLeft className="fa-icon" />
-                        </Button>
-                        <div style={ { width: 28 } } />
-                        <Button shrink onClick={ event => onCanvasScroll('right') }>
-                            <FaArrowRight className="fa-icon" />
-                        </Button>
-                    </Flex>
-                    <Flex justifyContent="center">
-                        <Button shrink onClick={ event => onCanvasScroll('down') }>
-                            <FaArrowDown className="fa-icon" />
-                        </Button>
-                    </Flex>
-                </Column>
+            <Flex gap={ 1 } alignItems="center">
+                <Text bold small>{ LocalizeText('floor.plan.editor.enter.direction') }</Text>
+                <i className={ `nitro-icon icon-door-direction-${ visualizationSettings.entryPointDir } cursor-pointer` } onClick={ changeDoorDirection } />
             </Flex>
-        </Column>
+            <Flex gap={ 1 } alignItems="center" className="ml-auto">
+                <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>
+        </Flex>
     );
-}
+};

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

@@ -0,0 +1,328 @@
+import { FC, useEffect, useRef } from 'react';
+import { COLORMAP, HEIGHT_SCHEME, FloorplanEditor } from '@nitrots/nitro-renderer';
+import { useFloorplanEditorContext } from '../FloorplanEditorContext';
+
+const colormap = COLORMAP as Record<string, string>;
+
+const PREVIEW_TILE_W = 16;
+const PREVIEW_TILE_H = 8;
+const PREVIEW_BLOCK_H = 5;
+const WALL_HEIGHT_PX = 40;
+const WALL_COLOR = '#6B7B5E';
+const WALL_SIDE_COLOR = '#5A6A4F';
+const WALL_TOP_COLOR = '#7D8E6F';
+
+function hexToRgb(hex: string): [number, number, number]
+{
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return [ r, g, b ];
+}
+
+function rgbToHex(r: number, g: number, b: number): string
+{
+    return `#${ ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) }`;
+}
+
+function darken(hex: string, factor: number): string
+{
+    const [ r, g, b ] = hexToRgb(hex);
+
+    return rgbToHex(
+        Math.floor(r * factor),
+        Math.floor(g * factor),
+        Math.floor(b * factor)
+    );
+}
+
+function getTilemapBounds(tilemap: any[][]): { minX: number; minY: number; maxX: number; maxY: number }
+{
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+    for(let y = 0; y < tilemap.length; y++)
+    {
+        if(!tilemap[y]) continue;
+
+        for(let x = 0; x < tilemap[y].length; x++)
+        {
+            if(!tilemap[y][x] || tilemap[y][x].height === 'x') continue;
+
+            if(x < minX) minX = x;
+            if(x > maxX) maxX = x;
+            if(y < minY) minY = y;
+            if(y > maxY) maxY = y;
+        }
+    }
+
+    if(minX === Infinity) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+
+    return { minX, minY, maxX, maxY };
+}
+
+function renderPreview(canvas: HTMLCanvasElement, wallHeight: number): void
+{
+    const ctx = canvas.getContext('2d');
+    const tilemap = FloorplanEditor.instance.tilemap;
+
+    if(!ctx || !tilemap || tilemap.length === 0)
+    {
+        if(ctx)
+        {
+            ctx.fillStyle = '#1a1a1a';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+
+        return;
+    }
+
+    const bounds = getTilemapBounds(tilemap);
+    const tilesW = bounds.maxX - bounds.minX + 1;
+    const tilesH = bounds.maxY - bounds.minY + 1;
+
+    // find max height for offset calculation
+    let maxTileHeight = 0;
+
+    for(let y = bounds.minY; y <= bounds.maxY; y++)
+    {
+        for(let x = bounds.minX; x <= bounds.maxX; x++)
+        {
+            if(!tilemap[y] || !tilemap[y][x] || tilemap[y][x].height === 'x') continue;
+
+            const hi = HEIGHT_SCHEME.indexOf(tilemap[y][x].height) - 1;
+
+            if(hi > maxTileHeight) maxTileHeight = hi;
+        }
+    }
+
+    // calculate isometric bounds
+    const isoW = (tilesW + tilesH) * PREVIEW_TILE_W;
+    const isoH = (tilesW + tilesH) * PREVIEW_TILE_H + maxTileHeight * PREVIEW_BLOCK_H + WALL_HEIGHT_PX;
+
+    // scale to fit canvas
+    const scaleX = (canvas.width - 20) / isoW;
+    const scaleY = (canvas.height - 20) / isoH;
+    const scale = Math.min(scaleX, scaleY, 3);
+
+    const offsetX = (canvas.width - isoW * scale) / 2;
+    const offsetY = (canvas.height - isoH * scale) / 2 + WALL_HEIGHT_PX * scale * 0.5;
+
+    ctx.fillStyle = '#1a1a1a';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.save();
+    ctx.translate(offsetX, offsetY);
+    ctx.scale(scale, scale);
+
+    const tw = PREVIEW_TILE_W;
+    const th = PREVIEW_TILE_H;
+
+    function isoX(gx: number, gy: number): number
+    {
+        return (gx - bounds.minX - gy + bounds.minY) * tw + (tilesH - 1) * tw;
+    }
+
+    function isoY(gx: number, gy: number): number
+    {
+        return (gx - bounds.minX + gy - bounds.minY) * th;
+    }
+
+    function hasActiveTile(gx: number, gy: number): boolean
+    {
+        return tilemap[gy] && tilemap[gy][gx] && tilemap[gy][gx].height !== 'x';
+    }
+
+    function getTileHeight(gx: number, gy: number): number
+    {
+        if(!hasActiveTile(gx, gy)) return 0;
+
+        return Math.max(0, HEIGHT_SCHEME.indexOf(tilemap[gy][gx].height) - 1);
+    }
+
+    // draw walls on north and west edges
+    const wallH = wallHeight > 0 ? wallHeight * PREVIEW_BLOCK_H + WALL_HEIGHT_PX * 0.3 : WALL_HEIGHT_PX * 0.6;
+
+    for(let y = bounds.minY; y <= bounds.maxY; y++)
+    {
+        for(let x = bounds.minX; x <= bounds.maxX; x++)
+        {
+            if(!hasActiveTile(x, y)) continue;
+
+            const tileH = getTileHeight(x, y) * PREVIEW_BLOCK_H;
+            const cx = isoX(x, y);
+            const cy = isoY(x, y) - tileH;
+
+            // west wall (no tile to the left)
+            if(!hasActiveTile(x - 1, y))
+            {
+                ctx.beginPath();
+                ctx.moveTo(cx, cy + th);
+                ctx.lineTo(cx, cy + th - wallH);
+                ctx.lineTo(cx + tw, cy - wallH);
+                ctx.lineTo(cx + tw, cy);
+                ctx.closePath();
+                ctx.fillStyle = WALL_SIDE_COLOR;
+                ctx.fill();
+                ctx.strokeStyle = '#4A5A3F';
+                ctx.lineWidth = 0.5;
+                ctx.stroke();
+            }
+
+            // north wall (no tile above)
+            if(!hasActiveTile(x, y - 1))
+            {
+                ctx.beginPath();
+                ctx.moveTo(cx + tw, cy);
+                ctx.lineTo(cx + tw, cy - wallH);
+                ctx.lineTo(cx + tw * 2, cy + th - wallH);
+                ctx.lineTo(cx + tw * 2, cy + th);
+                ctx.closePath();
+                ctx.fillStyle = WALL_COLOR;
+                ctx.fill();
+                ctx.strokeStyle = '#4A5A3F';
+                ctx.lineWidth = 0.5;
+                ctx.stroke();
+            }
+
+            // wall top cap - corner
+            if(!hasActiveTile(x - 1, y) && !hasActiveTile(x, y - 1))
+            {
+                ctx.beginPath();
+                ctx.moveTo(cx + tw, cy - wallH);
+                ctx.lineTo(cx + tw + tw * 0.3, cy - wallH - th * 0.3);
+                ctx.lineTo(cx + tw, cy - wallH - th * 0.6);
+                ctx.lineTo(cx + tw - tw * 0.3, cy - wallH - th * 0.3);
+                ctx.closePath();
+                ctx.fillStyle = WALL_TOP_COLOR;
+                ctx.fill();
+            }
+        }
+    }
+
+    // draw tiles back-to-front
+    for(let y = bounds.minY; y <= bounds.maxY; y++)
+    {
+        for(let x = bounds.minX; x <= bounds.maxX; x++)
+        {
+            if(!hasActiveTile(x, y)) continue;
+
+            const tile = tilemap[y][x];
+            const heightIndex = HEIGHT_SCHEME.indexOf(tile.height) - 1;
+            const tileH = Math.max(0, heightIndex) * PREVIEW_BLOCK_H;
+
+            const cx = isoX(x, y);
+            const cy = isoY(x, y) - tileH;
+
+            const heightChar = tile.height;
+            const baseColor = colormap[heightChar] || 'aaaaaa';
+            const topColor = `#${ baseColor }`;
+            const leftColor = darken(baseColor, 0.65);
+            const rightColor = darken(baseColor, 0.80);
+
+            // draw side faces if tile has height
+            const blockH = Math.max(0, heightIndex) * PREVIEW_BLOCK_H;
+
+            // left face (visible when no neighbor to south or neighbor is shorter)
+            const southH = getTileHeight(x, y + 1);
+            const leftExpose = hasActiveTile(x, y + 1) ? Math.max(0, heightIndex - southH) * PREVIEW_BLOCK_H : blockH + PREVIEW_BLOCK_H;
+
+            if(leftExpose > 0)
+            {
+                ctx.beginPath();
+                ctx.moveTo(cx, cy + th);
+                ctx.lineTo(cx + tw, cy + th * 2);
+                ctx.lineTo(cx + tw, cy + th * 2 + leftExpose);
+                ctx.lineTo(cx, cy + th + leftExpose);
+                ctx.closePath();
+                ctx.fillStyle = leftColor;
+                ctx.fill();
+            }
+
+            // right face
+            const eastH = getTileHeight(x + 1, y);
+            const rightExpose = hasActiveTile(x + 1, y) ? Math.max(0, heightIndex - eastH) * PREVIEW_BLOCK_H : blockH + PREVIEW_BLOCK_H;
+
+            if(rightExpose > 0)
+            {
+                ctx.beginPath();
+                ctx.moveTo(cx + tw * 2, cy + th);
+                ctx.lineTo(cx + tw, cy + th * 2);
+                ctx.lineTo(cx + tw, cy + th * 2 + rightExpose);
+                ctx.lineTo(cx + tw * 2, cy + th + rightExpose);
+                ctx.closePath();
+                ctx.fillStyle = rightColor;
+                ctx.fill();
+            }
+
+            // top face
+            ctx.beginPath();
+            ctx.moveTo(cx + tw, cy);
+            ctx.lineTo(cx + tw * 2, cy + th);
+            ctx.lineTo(cx + tw, cy + th * 2);
+            ctx.lineTo(cx, cy + th);
+            ctx.closePath();
+            ctx.fillStyle = topColor;
+            ctx.fill();
+
+            // door indicator
+            const door = FloorplanEditor.instance.doorLocation;
+
+            if(door.x === x && door.y === y)
+            {
+                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+                ctx.fill();
+                ctx.strokeStyle = '#ffffff';
+                ctx.lineWidth = 1;
+                ctx.stroke();
+            }
+        }
+    }
+
+    ctx.restore();
+}
+
+export const FloorplanPreviewView: FC<{}> = () =>
+{
+    const { tilemapVersion, visualizationSettings } = useFloorplanEditorContext();
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const rafRef = useRef<number>(0);
+
+    useEffect(() =>
+    {
+        if(!canvasRef.current) return;
+
+        if(rafRef.current) cancelAnimationFrame(rafRef.current);
+
+        rafRef.current = requestAnimationFrame(() =>
+        {
+            const canvas = canvasRef.current;
+
+            if(!canvas) return;
+
+            const parent = canvas.parentElement;
+
+            if(parent)
+            {
+                canvas.width = parent.clientWidth;
+                canvas.height = parent.clientHeight;
+            }
+
+            renderPreview(canvas, visualizationSettings?.wallHeight ?? 0);
+        });
+
+        return () =>
+        {
+            if(rafRef.current) cancelAnimationFrame(rafRef.current);
+        };
+    }, [ tilemapVersion, visualizationSettings?.wallHeight ]);
+
+    return (
+        <div className="flex-1 relative rounded overflow-hidden border-2 border-muted" style={ { minHeight: 200, backgroundColor: '#1a1a1a' } }>
+            <canvas
+                ref={ canvasRef }
+                className="w-full h-full"
+            />
+        </div>
+    );
+};