From fed35dd1f02f43d7fa7c91f37f1d10e33a2223e6 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 6 Mar 2022 01:08:54 -0500 Subject: [PATCH] Floor editor updates --- src/App.scss | 3 + .../FloorplanEditorContext.tsx | 25 +++ .../floorplan-editor/FloorplanEditorView.scss | 18 +- .../floorplan-editor/FloorplanEditorView.tsx | 160 ++++++++------- .../common/ConvertMapToString.ts | 1 + .../common/IFloorplanSettings.ts | 8 + .../common/IVisualizationSettings.ts | 7 + .../context/FloorplanEditorContext.tsx | 16 -- .../context/FloorplanEditorContext.types.ts | 37 ---- .../views/FloorplanCanvasView.tsx | 186 ++++++++++++------ .../views/FloorplanImportExportView.tsx | 61 +++--- .../views/FloorplanOptionsView.tsx | 131 ++++++------ 12 files changed, 350 insertions(+), 303 deletions(-) create mode 100644 src/views/floorplan-editor/FloorplanEditorContext.tsx create mode 100644 src/views/floorplan-editor/common/ConvertMapToString.ts create mode 100644 src/views/floorplan-editor/common/IFloorplanSettings.ts create mode 100644 src/views/floorplan-editor/common/IVisualizationSettings.ts delete mode 100644 src/views/floorplan-editor/context/FloorplanEditorContext.tsx delete mode 100644 src/views/floorplan-editor/context/FloorplanEditorContext.types.ts diff --git a/src/App.scss b/src/App.scss index 4ea61665..4a184234 100644 --- a/src/App.scss +++ b/src/App.scss @@ -83,6 +83,9 @@ $nitro-doorbell-height: 200px; $nitro-guide-tool-width: 250px; +$nitro-floor-editor-width: 760px; +$nitro-floor-editor-height: 500px; + .nitro-app { width: 100%; height: 100%; diff --git a/src/views/floorplan-editor/FloorplanEditorContext.tsx b/src/views/floorplan-editor/FloorplanEditorContext.tsx new file mode 100644 index 00000000..bd0c1ddf --- /dev/null +++ b/src/views/floorplan-editor/FloorplanEditorContext.tsx @@ -0,0 +1,25 @@ +import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react'; +import { IFloorplanSettings } from './common/IFloorplanSettings'; +import { IVisualizationSettings } from './common/IVisualizationSettings'; + +interface IFloorplanEditorContext +{ + originalFloorplanSettings: IFloorplanSettings; + setOriginalFloorplanSettings: Dispatch>; + visualizationSettings: IVisualizationSettings; + setVisualizationSettings: Dispatch>; +} + +const FloorplanEditorContext = createContext({ + originalFloorplanSettings: null, + setOriginalFloorplanSettings: null, + visualizationSettings: null, + setVisualizationSettings: null +}); + +export const FloorplanEditorContextProvider: FC> = props => +{ + return { props.children } +} + +export const useFloorplanEditorContext = () => useContext(FloorplanEditorContext); diff --git a/src/views/floorplan-editor/FloorplanEditorView.scss b/src/views/floorplan-editor/FloorplanEditorView.scss index dcacff14..3fe30415 100644 --- a/src/views/floorplan-editor/FloorplanEditorView.scss +++ b/src/views/floorplan-editor/FloorplanEditorView.scss @@ -1,20 +1,6 @@ .nitro-floorplan-editor { - width: 760px; - height: 575px; - - .editor-area { - width: 100%; - height: 300px; - min-height: 300px; - overflow: scroll; - } - - .arrow-button { - - @include media-breakpoint-up(md) { - display:none; - } - } + width: $nitro-floor-editor-width; + height: $nitro-floor-editor-height; } .floorplan-import-export { diff --git a/src/views/floorplan-editor/FloorplanEditorView.tsx b/src/views/floorplan-editor/FloorplanEditorView.tsx index 28e6e76c..b595916e 100644 --- a/src/views/floorplan-editor/FloorplanEditorView.tsx +++ b/src/views/floorplan-editor/FloorplanEditorView.tsx @@ -1,29 +1,37 @@ import { FloorHeightMapEvent, NitroPoint, RoomEngineEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../api'; -import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; +import { Button, ButtonGroup, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common'; import { FloorplanEditorEvent } from '../../events'; -import { UseMessageEventHook, UseMountEffect, UseRoomEngineEvent, UseUiEvent } from '../../hooks'; +import { UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks'; import { FloorplanEditor } from './common/FloorplanEditor'; +import { IFloorplanSettings } from './common/IFloorplanSettings'; +import { IVisualizationSettings } from './common/IVisualizationSettings'; import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils'; -import { FloorplanEditorContextProvider } from './context/FloorplanEditorContext'; -import { IFloorplanSettings, initialFloorplanSettings, IVisualizationSettings } from './context/FloorplanEditorContext.types'; +import { FloorplanEditorContextProvider } from './FloorplanEditorContext'; import { FloorplanCanvasView } from './views/FloorplanCanvasView'; import { FloorplanImportExportView } from './views/FloorplanImportExportView'; import { FloorplanOptionsView } from './views/FloorplanOptionsView'; export const FloorplanEditorView: FC<{}> = props => { - const [isVisible, setIsVisible] = useState(false); + const [ isVisible, setIsVisible ] = useState(false); const [ importExportVisible, setImportExportVisible ] = useState(false); - const [originalFloorplanSettings, setOriginalFloorplanSettings] = useState(initialFloorplanSettings); - const [visualizationSettings, setVisualizationSettings] = useState( - { - entryPointDir: 2, - wallHeight: -1, - thicknessWall: 1, - thicknessFloor: 1 - }); + const [ originalFloorplanSettings, setOriginalFloorplanSettings ] = useState({ + tilemap: '', + reservedTiles: [], + entryPoint: [0, 0], + entryPointDir: 2, + wallHeight: -1, + thicknessWall: 1, + thicknessFloor: 1 + }); + const [ visualizationSettings, setVisualizationSettings ] = useState({ + entryPointDir: 2, + wallHeight: -1, + thicknessWall: 1, + thicknessFloor: 1 + }); const onFloorplanEditorEvent = useCallback((event: FloorplanEditorEvent) => { @@ -36,20 +44,15 @@ export const FloorplanEditorView: FC<{}> = props => setIsVisible(true); break; case FloorplanEditorEvent.TOGGLE_FLOORPLAN_EDITOR: - setIsVisible(!isVisible); + setIsVisible(prevValue => !prevValue); break; } - }, [isVisible]); + }, []); UseUiEvent(FloorplanEditorEvent.HIDE_FLOORPLAN_EDITOR, onFloorplanEditorEvent); UseUiEvent(FloorplanEditorEvent.SHOW_FLOORPLAN_EDITOR, onFloorplanEditorEvent); UseUiEvent(FloorplanEditorEvent.TOGGLE_FLOORPLAN_EDITOR, onFloorplanEditorEvent); - UseMountEffect(() => - { - FloorplanEditor.instance.initialize(); - }); - const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => { setIsVisible(false); @@ -61,18 +64,25 @@ export const FloorplanEditorView: FC<{}> = props => { const parser = event.getParser(); - if(!parser) return; + setOriginalFloorplanSettings(prevValue => + { + const newValue = { ...prevValue }; - const settings = Object.assign({}, originalFloorplanSettings); - settings.tilemap = parser.model; - settings.wallHeight = parser.wallHeight + 1; - setOriginalFloorplanSettings(settings); + newValue.tilemap = parser.model; + newValue.wallHeight = (parser.wallHeight + 1); - const vSettings = Object.assign({}, visualizationSettings); - vSettings.wallHeight = parser.wallHeight + 1; - setVisualizationSettings(vSettings); + return newValue; + }); - }, [originalFloorplanSettings, visualizationSettings]); + setVisualizationSettings(prevValue => + { + const newValue = { ...prevValue }; + + newValue.wallHeight = (parser.wallHeight + 1); + + return newValue; + }); + }, []); UseMessageEventHook(FloorHeightMapEvent, onFloorHeightMapEvent); @@ -80,23 +90,30 @@ export const FloorplanEditorView: FC<{}> = props => { const parser = event.getParser(); - if(!parser) return; + setOriginalFloorplanSettings(prevValue => + { + const newValue = { ...prevValue }; - const settings = Object.assign({}, originalFloorplanSettings); - settings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor); - settings.thicknessWall = convertSettingToNumber(parser.thicknessWall); + newValue.thicknessFloor = convertSettingToNumber(parser.thicknessFloor); + newValue.thicknessWall = convertSettingToNumber(parser.thicknessWall); - setOriginalFloorplanSettings(settings); + return newValue; + }); - const vSettings = Object.assign({}, visualizationSettings); - vSettings.thicknessFloor = convertSettingToNumber(parser.thicknessFloor); - vSettings.thicknessWall = convertSettingToNumber(parser.thicknessWall); - setVisualizationSettings(vSettings); - }, [originalFloorplanSettings, visualizationSettings]); + setVisualizationSettings(prevValue => + { + const newValue = { ...prevValue }; + + newValue.thicknessFloor = convertSettingToNumber(parser.thicknessFloor); + newValue.thicknessWall = convertSettingToNumber(parser.thicknessWall); + + return newValue; + }); + }, []); UseMessageEventHook(RoomVisualizationSettingsEvent, onRoomVisualizationSettingsEvent); - const saveFloorChanges = useCallback(() => + const saveFloorChanges = () => { SendMessageComposer(new UpdateFloorPropertiesMessageComposer( FloorplanEditor.instance.getCurrentTilemapString(), @@ -105,47 +122,44 @@ export const FloorplanEditorView: FC<{}> = props => visualizationSettings.entryPointDir, convertNumbersForSaving(visualizationSettings.thicknessWall), convertNumbersForSaving(visualizationSettings.thicknessFloor), - visualizationSettings.wallHeight - 1 + (visualizationSettings.wallHeight - 1) )); - }, [visualizationSettings.entryPointDir, visualizationSettings.thicknessFloor, visualizationSettings.thicknessWall, visualizationSettings.wallHeight]); + } - const revertChanges = useCallback(() => + const revertChanges = () => { setVisualizationSettings({ wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: originalFloorplanSettings.entryPointDir }); FloorplanEditor.instance.doorLocation = new NitroPoint(originalFloorplanSettings.entryPoint[0], originalFloorplanSettings.entryPoint[1]); FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, originalFloorplanSettings.reservedTiles); FloorplanEditor.instance.renderTiles(); - }, [originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.reservedTiles, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.tilemap, originalFloorplanSettings.wallHeight]) + } + + useEffect(() => + { + FloorplanEditor.instance.initialize(); + }, []); return ( - <> - - {isVisible && - - setIsVisible(false)} /> - - - - - - -
- -
-
- - - -
- - - - - - } - {importExportVisible && setImportExportVisible(false)}/>} - - + + { isVisible && + + setIsVisible(false) } /> + + + + + + + + + + + + + } + { importExportVisible && + setImportExportVisible(false) } /> } + ); } diff --git a/src/views/floorplan-editor/common/ConvertMapToString.ts b/src/views/floorplan-editor/common/ConvertMapToString.ts new file mode 100644 index 00000000..15791586 --- /dev/null +++ b/src/views/floorplan-editor/common/ConvertMapToString.ts @@ -0,0 +1 @@ +export const ConvertTileMapToString = (map: string) => map.replace(/\r\n|\r|\n/g, '\n').toLowerCase(); diff --git a/src/views/floorplan-editor/common/IFloorplanSettings.ts b/src/views/floorplan-editor/common/IFloorplanSettings.ts new file mode 100644 index 00000000..51595273 --- /dev/null +++ b/src/views/floorplan-editor/common/IFloorplanSettings.ts @@ -0,0 +1,8 @@ +import { IVisualizationSettings } from './IVisualizationSettings'; + +export interface IFloorplanSettings extends IVisualizationSettings +{ + tilemap: string; + reservedTiles: boolean[][]; + entryPoint: [ number, number ]; +} diff --git a/src/views/floorplan-editor/common/IVisualizationSettings.ts b/src/views/floorplan-editor/common/IVisualizationSettings.ts new file mode 100644 index 00000000..97d271c6 --- /dev/null +++ b/src/views/floorplan-editor/common/IVisualizationSettings.ts @@ -0,0 +1,7 @@ +export interface IVisualizationSettings +{ + entryPointDir: number; + wallHeight: number; + thicknessWall: number; + thicknessFloor: number; +} diff --git a/src/views/floorplan-editor/context/FloorplanEditorContext.tsx b/src/views/floorplan-editor/context/FloorplanEditorContext.tsx deleted file mode 100644 index 8a8ce970..00000000 --- a/src/views/floorplan-editor/context/FloorplanEditorContext.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createContext, FC, useContext } from 'react'; -import { FloorplanEditorContextProps, IFloorplanEditorContext } from './FloorplanEditorContext.types'; - -const FloorplanEditorContext = createContext({ - originalFloorplanSettings: null, - setOriginalFloorplanSettings: null, - visualizationSettings: null, - setVisualizationSettings: null -}); - -export const FloorplanEditorContextProvider: FC = props => -{ - return { props.children } -} - -export const useFloorplanEditorContext = () => useContext(FloorplanEditorContext); diff --git a/src/views/floorplan-editor/context/FloorplanEditorContext.types.ts b/src/views/floorplan-editor/context/FloorplanEditorContext.types.ts deleted file mode 100644 index 581ff6af..00000000 --- a/src/views/floorplan-editor/context/FloorplanEditorContext.types.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { ProviderProps } from 'react'; - -export interface IFloorplanEditorContext -{ - originalFloorplanSettings: IFloorplanSettings; - setOriginalFloorplanSettings: React.Dispatch>; - visualizationSettings: IVisualizationSettings; - setVisualizationSettings: React.Dispatch>; -} - -export interface IFloorplanSettings extends IVisualizationSettings { - tilemap: string; - reservedTiles: boolean[][]; - entryPoint: [number, number]; -} - -export interface IVisualizationSettings { - entryPointDir: number; - wallHeight: number; - thicknessWall: number; - thicknessFloor: number; -} - -export const initialFloorplanSettings: IFloorplanSettings = { - tilemap: '', - reservedTiles: [], - entryPoint: [0, 0], - entryPointDir: 2, - wallHeight: -1, - thicknessWall: 1, - thicknessFloor: 1 -} - -export interface FloorplanEditorContextProps extends ProviderProps -{ - -} diff --git a/src/views/floorplan-editor/views/FloorplanCanvasView.tsx b/src/views/floorplan-editor/views/FloorplanCanvasView.tsx index 2cca5cea..6a72a650 100644 --- a/src/views/floorplan-editor/views/FloorplanCanvasView.tsx +++ b/src/views/floorplan-editor/views/FloorplanCanvasView.tsx @@ -1,51 +1,49 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { SendMessageComposer } from '../../../api'; -import { Flex } from '../../../common'; -import { UseMessageEventHook, UseMountEffect } from '../../../hooks'; +import { Base, Button, Column, ColumnProps, Flex, Grid } from '../../../common'; +import { UseMessageEventHook } from '../../../hooks'; import { FloorplanEditor } from '../common/FloorplanEditor'; -import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; +import { IFloorplanSettings } from '../common/IFloorplanSettings'; +import { useFloorplanEditorContext } from '../FloorplanEditorContext'; -export const FloorplanCanvasView: FC<{}> = props => +interface FloorplanCanvasViewProps extends ColumnProps { - const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null, visualizationSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext(); + +} + +export const FloorplanCanvasView: FC = props => +{ + const { gap = 1, children = null, ...rest } = props; const [ occupiedTilesReceived , setOccupiedTilesReceived ] = useState(false); const [ entryTileReceived, setEntryTileReceived ] = useState(false); + const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null, setVisualizationSettings = null } = useFloorplanEditorContext(); const elementRef = useRef(null); - useEffect(() => - { - return ( () => - { - FloorplanEditor.instance.clear(); - setVisualizationSettings( prev => {return { wallHeight: originalFloorplanSettings.wallHeight, thicknessWall: originalFloorplanSettings.thicknessWall, thicknessFloor: originalFloorplanSettings.thicknessFloor, entryPointDir: prev.entryPointDir } }); - }); - }, [originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings]); - - UseMountEffect(() => - { - SendMessageComposer(new GetRoomEntryTileMessageComposer()); - SendMessageComposer(new GetOccupiedTilesMessageComposer()); - FloorplanEditor.instance.tilemapRenderer.interactive = true; - elementRef.current.appendChild(FloorplanEditor.instance.renderer.view); - }); - const onRoomOccupiedTilesMessageEvent = useCallback((event: RoomOccupiedTilesMessageEvent) => { const parser = event.getParser(); - if(!parser) return; + let newFloorPlanSettings: IFloorplanSettings = null; - const settings = Object.assign({}, originalFloorplanSettings); - settings.reservedTiles = parser.blockedTilesMap; - setOriginalFloorplanSettings(settings); + setOriginalFloorplanSettings(prevValue => + { + const newValue = { ...prevValue }; + + newValue.reservedTiles = parser.blockedTilesMap; + + newFloorPlanSettings = newValue; + + return newValue; + }); - FloorplanEditor.instance.setTilemap(originalFloorplanSettings.tilemap, parser.blockedTilesMap); + FloorplanEditor.instance.setTilemap(newFloorPlanSettings.tilemap, parser.blockedTilesMap); setOccupiedTilesReceived(true); - elementRef.current.scrollTo(FloorplanEditor.instance.view.width / 3, 0); - }, [originalFloorplanSettings, setOriginalFloorplanSettings]); + elementRef.current.scrollTo((FloorplanEditor.instance.view.width / 3), 0); + }, [ setOriginalFloorplanSettings ]); UseMessageEventHook(RoomOccupiedTilesMessageEvent, onRoomOccupiedTilesMessageEvent); @@ -53,24 +51,33 @@ export const FloorplanCanvasView: FC<{}> = props => { const parser = event.getParser(); - if(!parser) return; + setOriginalFloorplanSettings(prevValue => + { + const newValue = { ...prevValue }; - const settings = Object.assign({}, originalFloorplanSettings); - settings.entryPoint = [parser.x, parser.y]; - settings.entryPointDir = parser.direction; - setOriginalFloorplanSettings(settings); + newValue.entryPoint = [ parser.x, parser.y ]; + newValue.entryPointDir = parser.direction; - const vSettings = Object.assign({}, visualizationSettings); - vSettings.entryPointDir = parser.direction; - setVisualizationSettings(vSettings); + return newValue; + }); + + setVisualizationSettings(prevValue => + { + const newValue = { ...prevValue }; + + newValue.entryPointDir = parser.direction; + + return newValue; + }); FloorplanEditor.instance.doorLocation = new NitroPoint(parser.x, parser.y); + setEntryTileReceived(true); - }, [originalFloorplanSettings, setOriginalFloorplanSettings, setVisualizationSettings, visualizationSettings]); + }, [ setOriginalFloorplanSettings, setVisualizationSettings ]); UseMessageEventHook(RoomEntryTileMessageEvent, onRoomEntryTileMessageEvent); - const onClickArrowButton = useCallback((scrollDirection: string) => + const onClickArrowButton = (scrollDirection: string) => { const element = elementRef.current; @@ -91,29 +98,92 @@ export const FloorplanCanvasView: FC<{}> = props => element.scrollBy({ left: 10 }); break; } - }, []); + } useEffect(() => { - if(entryTileReceived && occupiedTilesReceived) - FloorplanEditor.instance.renderTiles(); - }, [entryTileReceived, occupiedTilesReceived]) + return () => + { + FloorplanEditor.instance.clear(); + + setVisualizationSettings(prevValue => + { + return { + wallHeight: originalFloorplanSettings.wallHeight, + 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 ]); + + useEffect(() => + { + SendMessageComposer(new GetRoomEntryTileMessageComposer()); + SendMessageComposer(new GetOccupiedTilesMessageComposer()); + + FloorplanEditor.instance.tilemapRenderer.interactive = true; + + if(!elementRef.current) return; + + elementRef.current.appendChild(FloorplanEditor.instance.renderer.view); + }, []); return ( - <> - -
- - -
-
-
-
-
- - -
- - + + + + + + + + + + + + + + + + + + + {/* + + + + + + + + + + */} + { children } + ); } diff --git a/src/views/floorplan-editor/views/FloorplanImportExportView.tsx b/src/views/floorplan-editor/views/FloorplanImportExportView.tsx index a904f3e1..5523d073 100644 --- a/src/views/floorplan-editor/views/FloorplanImportExportView.tsx +++ b/src/views/floorplan-editor/views/FloorplanImportExportView.tsx @@ -1,29 +1,24 @@ import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; +import { FC, useState } from 'react'; import { LocalizeText, SendMessageComposer } from '../../../api'; -import { Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common'; +import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common'; import { UseMountEffect } from '../../../hooks'; +import { ConvertTileMapToString } from '../common/ConvertMapToString'; import { convertNumbersForSaving } from '../common/Utils'; -import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; +import { useFloorplanEditorContext } from '../FloorplanEditorContext'; + +interface FloorplanImportExportViewProps +{ + onCloseClick(): void; +} export const FloorplanImportExportView: FC = props => { - const { originalFloorplanSettings = null, setOriginalFloorplanSettings = null } = useFloorplanEditorContext(); - const { onCloseClick = null } = props; const [ map, setMap ] = useState(''); + const { originalFloorplanSettings = null } = useFloorplanEditorContext(); - const convertMapToString = useCallback((map: string) => - { - return map.replace(/\r\n|\r|\n/g, '\n').toLowerCase(); - }, []); - - const revertChanges= useCallback(() => - { - setMap(convertMapToString(originalFloorplanSettings.tilemap)); - }, [convertMapToString, originalFloorplanSettings.tilemap]); - - const saveFloorChanges = useCallback(() => + const saveFloorChanges = () => { SendMessageComposer(new UpdateFloorPropertiesMessageComposer( map.split('\n').join('\r'), @@ -34,35 +29,27 @@ export const FloorplanImportExportView: FC = pro convertNumbersForSaving(originalFloorplanSettings.thicknessFloor), originalFloorplanSettings.wallHeight - 1 )); - }, [map, originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight]); + } UseMountEffect(() => { - revertChanges(); + setMap(ConvertTileMapToString(originalFloorplanSettings.tilemap)); }); return ( - + - - - -
- -
-
- -
- - - +