nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

update stuff to use mounteffect

Browse Source
This commit is contained in:
dank074 2021-11-02 20:46:48 -05:00
parent 96e83fdd31
commit 5020f1f063
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/floorplan-editor/FloorplanEditorView.tsx
View File

@ -1,8 +1,8 @@
import { FloorHeightMapEvent, NitroPoint, RoomEngineEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer'; import { FloorHeightMapEvent, NitroPoint, RoomEngineEvent, RoomVisualizationSettingsEvent, UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../api'; import { LocalizeText } from '../../api';
import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent'; import { FloorplanEditorEvent } from '../../events/floorplan-editor/FloorplanEditorEvent';
import { CreateMessageHook, SendMessageHook, useRoomEngineEvent, useUiEvent } from '../../hooks'; import { CreateMessageHook, SendMessageHook, UseMountEffect, useRoomEngineEvent, useUiEvent } from '../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
import { FloorplanEditor } from './common/FloorplanEditor'; import { FloorplanEditor } from './common/FloorplanEditor';
import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils'; import { convertNumbersForSaving, convertSettingToNumber } from './common/Utils';
@ -45,10 +45,10 @@ export const FloorplanEditorView: FC<{}> = props =>
useUiEvent(FloorplanEditorEvent.SHOW_FLOORPLAN_EDITOR, onFloorplanEditorEvent); useUiEvent(FloorplanEditorEvent.SHOW_FLOORPLAN_EDITOR, onFloorplanEditorEvent);
useUiEvent(FloorplanEditorEvent.TOGGLE_FLOORPLAN_EDITOR, onFloorplanEditorEvent); useUiEvent(FloorplanEditorEvent.TOGGLE_FLOORPLAN_EDITOR, onFloorplanEditorEvent);
useEffect(() => UseMountEffect(() =>
{ {
FloorplanEditor.instance.initialize(); FloorplanEditor.instance.initialize();
}, []); });
const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
{ {
@ -121,7 +121,7 @@ export const FloorplanEditorView: FC<{}> = props =>
return ( return (
<> <>
<FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}> <FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
{isVisible && <> {isVisible &&
<NitroCardView className="nitro-floorplan-editor"> <NitroCardView className="nitro-floorplan-editor">
<NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} /> <NitroCardHeaderView headerText={LocalizeText('floor.plan.editor.title')} onCloseClick={() => setIsVisible(false)} />
<NitroCardContentView> <NitroCardContentView>
@ -143,9 +143,8 @@ export const FloorplanEditorView: FC<{}> = props =>
</NitroLayoutGrid> </NitroLayoutGrid>
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
{importExportVisible && <FloorplanImportExportView onCloseClick={ () => setImportExportVisible(false)}/>}
</>
} }
{importExportVisible && <FloorplanImportExportView onCloseClick={ () => setImportExportVisible(false)}/>}
</FloorplanEditorContextProvider> </FloorplanEditorContextProvider>
</> </>
); );

15
src/views/floorplan-editor/views/FloorplanCanvasView.tsx
View File

@ -1,6 +1,6 @@
import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer'; import { GetOccupiedTilesMessageComposer, GetRoomEntryTileMessageComposer, NitroPoint, RoomEntryTileMessageEvent, RoomOccupiedTilesMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../hooks'; import { CreateMessageHook, SendMessageHook, UseMountEffect } from '../../../hooks';
import { FloorplanEditor } from '../common/FloorplanEditor'; import { FloorplanEditor } from '../common/FloorplanEditor';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
@ -13,11 +13,6 @@ export const FloorplanCanvasView: FC<{}> = props =>
useEffect(() => useEffect(() =>
{ {
SendMessageHook(new GetRoomEntryTileMessageComposer());
SendMessageHook(new GetOccupiedTilesMessageComposer());
FloorplanEditor.instance.tilemapRenderer.interactive = true;
elementRef.current.appendChild(FloorplanEditor.instance.renderer.view);
return ( () => return ( () =>
{ {
FloorplanEditor.instance.clear(); FloorplanEditor.instance.clear();
@ -25,6 +20,14 @@ export const FloorplanCanvasView: FC<{}> = props =>
}); });
}, [originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings]); }, [originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight, setVisualizationSettings]);
UseMountEffect(() =>
{
SendMessageHook(new GetRoomEntryTileMessageComposer());
SendMessageHook(new GetOccupiedTilesMessageComposer());
FloorplanEditor.instance.tilemapRenderer.interactive = true;
elementRef.current.appendChild(FloorplanEditor.instance.renderer.view);
});
const onRoomOccupiedTilesMessageEvent = useCallback((event: RoomOccupiedTilesMessageEvent) => const onRoomOccupiedTilesMessageEvent = useCallback((event: RoomOccupiedTilesMessageEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();

8
src/views/floorplan-editor/views/FloorplanImportExportView.tsx
View File

@ -1,7 +1,7 @@
import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer'; import { UpdateFloorPropertiesMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react'; import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../../api';
import { SendMessageHook } from '../../../hooks'; import { SendMessageHook, UseMountEffect } from '../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGridColumn } from '../../../layout'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex, NitroLayoutGridColumn } from '../../../layout';
import { convertNumbersForSaving } from '../common/Utils'; import { convertNumbersForSaving } from '../common/Utils';
import { useFloorplanEditorContext } from '../context/FloorplanEditorContext'; import { useFloorplanEditorContext } from '../context/FloorplanEditorContext';
@ -36,10 +36,10 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
)); ));
}, [map, originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight]); }, [map, originalFloorplanSettings.entryPoint, originalFloorplanSettings.entryPointDir, originalFloorplanSettings.thicknessFloor, originalFloorplanSettings.thicknessWall, originalFloorplanSettings.wallHeight]);
useEffect(() => UseMountEffect(() =>
{ {
revertChanges(); revertChanges();
}, [revertChanges]); });
return ( return (
<NitroCardView simple={true} className="floorplan-import-export"> <NitroCardView simple={true} className="floorplan-import-export">