diff --git a/src/assets/images/floorplaneditor/icon-active-squaresselect.png b/src/assets/images/floorplaneditor/icon-active-squaresselect.png new file mode 100644 index 0000000..ea9d9f7 Binary files /dev/null and b/src/assets/images/floorplaneditor/icon-active-squaresselect.png differ diff --git a/src/assets/images/floorplaneditor/icon-deselect.png b/src/assets/images/floorplaneditor/icon-deselect.png new file mode 100644 index 0000000..6fa4f74 Binary files /dev/null and b/src/assets/images/floorplaneditor/icon-deselect.png differ diff --git a/src/assets/images/floorplaneditor/icon-squaresselect.png b/src/assets/images/floorplaneditor/icon-squaresselect.png new file mode 100644 index 0000000..351098a Binary files /dev/null and b/src/assets/images/floorplaneditor/icon-squaresselect.png differ diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 04d8e5f..47ef4d1 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -688,6 +688,24 @@ width: 40px; height: 40px; } + + &.icon-set-deselect { + background-image: url('@/assets/images/floorplaneditor/icon-deselect.png'); + width: 40px; + height: 40px; + } + + &.icon-set-squaresselect { + background-image: url('@/assets/images/floorplaneditor/icon-squaresselect.png'); + width: 40px; + height: 40px; + } + + &.icon-set-active-squaresselect { + background-image: url('@/assets/images/floorplaneditor/icon-squaresselect.png'); + width: 40px; + height: 40px; + } &.icon-tickets { background-image: url('@/assets/images/icons/tickets.png'); diff --git a/src/components/floorplan-editor/FloorplanEditorView.scss b/src/components/floorplan-editor/FloorplanEditorView.scss index 28f970a..cb96680 100644 --- a/src/components/floorplan-editor/FloorplanEditorView.scss +++ b/src/components/floorplan-editor/FloorplanEditorView.scss @@ -6,4 +6,4 @@ .floorplan-import-export { width: 630px; height: 475px; -} +} \ No newline at end of file diff --git a/src/components/floorplan-editor/views/FloorplanCanvasView.tsx b/src/components/floorplan-editor/views/FloorplanCanvasView.tsx index 47d4b61..84a3a35 100644 --- 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, FaSearchPlus, FaSearchMinus } from 'react-icons/fa'; // Added FaSearchPlus and FaSearchMinus for zoom icons +import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaDotCircle, FaSearchPlus, FaSearchMinus, FaUndo } from 'react-icons/fa'; import { SendMessageComposer } from '../../../api'; import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common'; import { useMessageEvent } from '../../../hooks'; @@ -113,6 +113,13 @@ export const FloorplanCanvasView: FC = props => FloorplanEditor.instance.zoomOut(); }; + // Handler for resetting zoom to original level (1.0) + const handleResetZoom = () => { + FloorplanEditor.instance._zoomLevel = 1.0; // Reset to default zoom + FloorplanEditor.instance.adjustCanvasSize(); + FloorplanEditor.instance.renderTiles(); + }; + useEffect(() => { return () => @@ -187,6 +194,9 @@ export const FloorplanCanvasView: FC = props => + diff --git a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx index bb59d37..59d36da 100644 --- a/src/components/floorplan-editor/views/FloorplanOptionsView.tsx +++ b/src/components/floorplan-editor/views/FloorplanOptionsView.tsx @@ -1,4 +1,4 @@ -import { FC, useState } from 'react'; +import { FC, useState, useEffect } from 'react'; import { FaCaretLeft, FaCaretRight } from 'react-icons/fa'; import { LocalizeText } from '../../../api'; import { Column, Flex, LayoutGridItem, Slider, Text } from '../../../common'; @@ -17,14 +17,26 @@ export const FloorplanOptionsView: FC<{}> = props => const { visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext(); const [ floorAction, setFloorAction ] = useState(FloorAction.SET); const [ floorHeight, setFloorHeight ] = useState(0); - + const [ isSquareSelectMode, setIsSquareSelectMode ] = useState(FloorplanEditor.instance.squareSelectMode); + + useEffect(() => + { + setIsSquareSelectMode(FloorplanEditor.instance.squareSelectMode); + }, []); + const selectAction = (action: number) => { setFloorAction(action); - FloorplanEditor.instance.actionSettings.currentAction = action; } + const toggleSquareSelectMode = () => + { + const newMode = !FloorplanEditor.instance.squareSelectMode; + FloorplanEditor.instance.setSquareSelectMode(newMode); + setIsSquareSelectMode(newMode); + } + const changeDoorDirection = () => { setVisualizationSettings(prevValue => @@ -47,11 +59,8 @@ export const FloorplanOptionsView: FC<{}> = props => 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); } @@ -60,9 +69,7 @@ export const FloorplanOptionsView: FC<{}> = props => setVisualizationSettings(prevValue => { const newValue = { ...prevValue }; - newValue.thicknessFloor = value; - return newValue; }); } @@ -72,9 +79,7 @@ export const FloorplanOptionsView: FC<{}> = props => setVisualizationSettings(prevValue => { const newValue = { ...prevValue }; - newValue.thicknessWall = value; - return newValue; }); } @@ -82,15 +87,11 @@ export const FloorplanOptionsView: FC<{}> = props => 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; }); } @@ -98,18 +99,14 @@ export const FloorplanOptionsView: FC<{}> = props => 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); } @@ -134,15 +131,19 @@ export const FloorplanOptionsView: FC<{}> = props => selectAction(FloorAction.DOWN) }> - selectAction(FloorAction.DOOR) }> - - - FloorplanEditor.instance.toggleSelectAll() }> - - - { FloorplanEditor.instance.setSquareSelectMode(!FloorplanEditor.instance.squareSelectMode);} }> - - + selectAction(FloorAction.DOOR) }> + + + FloorplanEditor.instance.toggleSelectAll() }> + + + + + + @@ -167,7 +168,16 @@ export const FloorplanOptionsView: FC<{}> = props => step={ 1 } value={ floorHeight } onChange={ event => onFloorHeightChange(event) } - renderThumb={ ({ style, ...rest }, state) =>
{ state.valueNow }
} /> + renderThumb={ ({ style, key, ...rest }, state) => ( +
+ {state.valueNow} +
+ )} + />
{ LocalizeText('floor.plan.editor.room.options') }