🆙 FloorEditor allow tile selection - Beta 2

2025-06-21 22:36:58 +00:00 · 2025-03-07 08:44:01 +01:00 · 2025-03-07 08:44:01 +01:00 · 680eb4dd88
commit 680eb4dd88
parent 10dd5c3f62
3 changed files with 264 additions and 161 deletions
--- a/src/components/floorplan-editor/common/FloorplanEditor.ts
+++ b/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,
-                    positionX, positionY, asset.frame.w, asset.frame.h);
+                this.renderer.drawImage(
+                    this._image,
+                    asset.frame.x,
+                    asset.frame.y,
+                    asset.frame.w,
+                    asset.frame.h,
+                    positionX,
+                    positionY,
+                    asset.frame.w,
+                    asset.frame.h
+                );

-                // While dragging in selection mode, overlay green on tiles within the selection region.
                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);
@ -204,20 +215,49 @@ export class FloorplanEditor {
                }

                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.onClick(x, y, false, true);
+                this._tilemap[y][x].selected = 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;
    }
--- a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx
+++ b/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 }>
-                    <Flex justifyContent="center" className="d-md-none">
-                        <Button shrink onClick={ event => onClickArrowButton('up') }>
+                <Column overflow="hidden" size={ isSmallScreen() ? 10 : 12 } gap={ 1 }>
+                    <Flex justifyContent="left" gap={ 1 }>
+                        <Button shrink onClick={ handleZoomIn }>
+                            <FaSearchPlus className="fa-icon" />
+                        </Button>
+                        <Button shrink onClick={ handleZoomOut }>
+                            <FaSearchMinus className="fa-icon" />
+                        </Button>
+                        <Button shrink onClick={ event => onClickArrowButton('up') } className="d-md-none">
                            <FaArrowUp className="fa-icon" />
                        </Button>
                    </Flex>
--- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
+++ b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx
@ -12,70 +12,104 @@ const MAX_WALL_HEIGHT: number = 16;
 const MIN_FLOOR_HEIGHT: number = 0;
 const MAX_FLOOR_HEIGHT: number = 26;

-export const FloorplanOptionsView: FC<{}> = props => {
+export const FloorplanOptionsView: FC<{}> = props =>
+{
    const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext();
    const [ floorAction, setFloorAction ] = useState(FloorAction.SET);
    const [ floorHeight, setFloorHeight ] = useState(0);
    
-  const selectAction = (action: number) => {
+    const selectAction = (action: number) =>
+    {
        setFloorAction(action);
+
        FloorplanEditor.instance.actionSettings.currentAction = action;
    }

-  const changeDoorDirection = () => {
-    setVisualizationSettings(prevValue => {
+    const changeDoorDirection = () =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
            const newValue = { ...prevValue };
-      if(newValue.entryPointDir < 7) {
+
+            if(newValue.entryPointDir < 7)
+            {
                ++newValue.entryPointDir;
-      } else {
+            }
+            else
+            {
                newValue.entryPointDir = 0;
            }
+
            return newValue;
        });
    }

-  const onFloorHeightChange = (value: number) => {
+    const onFloorHeightChange = (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 = (value: number) => {
-    setVisualizationSettings(prevValue => {
+    const onFloorThicknessChange = (value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
            const newValue = { ...prevValue };
+
            newValue.thicknessFloor = value;
+
            return newValue;
        });
    }

-  const onWallThicknessChange = (value: number) => {
-    setVisualizationSettings(prevValue => {
+    const onWallThicknessChange = (value: number) =>
+    {
+        setVisualizationSettings(prevValue =>
+        {
            const newValue = { ...prevValue };
+
            newValue.thicknessWall = value;
+    
            return newValue;
        });
    }

-  const onWallHeightChange = (value: number) => {
+    const onWallHeightChange = (value: number) =>
+    {
        if(isNaN(value) || (value <= 0)) value = MIN_WALL_HEIGHT;
+
        if(value > MAX_WALL_HEIGHT) value = MAX_WALL_HEIGHT;
-    setVisualizationSettings(prevValue => {
+
+        setVisualizationSettings(prevValue =>
+        {
            const newValue = { ...prevValue };
+
            newValue.wallHeight = value;
+
            return newValue;
        });
    }

-  const increaseWallHeight = () => {
+    const increaseWallHeight = () =>
+    {
        let height = (visualizationSettings.wallHeight + 1);
+
        if(height > MAX_WALL_HEIGHT) height = MAX_WALL_HEIGHT;
+
        onWallHeightChange(height);
    }

-  const decreaseWallHeight = () => {
+    const decreaseWallHeight = () =>
+    {
        let height = (visualizationSettings.wallHeight - 1);
+
        if(height <= 0) height = MIN_WALL_HEIGHT;
+
        onWallHeightChange(height);
    }

@ -100,19 +134,16 @@ export const FloorplanOptionsView: FC<{}> = props => {
                            <LayoutGridItem itemActive={ (floorAction === FloorAction.DOWN) } onClick={ event => selectAction(FloorAction.DOWN) }>
                                <i className="icon icon-decrease-height" />
                            </LayoutGridItem>
-            </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 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>
@ -136,12 +167,7 @@ export const FloorplanOptionsView: FC<{}> = props => {
                        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>
-            ) }
-          />
+                        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>