mirror/FossFLOW
1
0
Fork 0
mirror of https://github.com/stan-smith/FossFLOW.git synced 2025-12-24 06:58:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: moves ui elements into own component

Browse Source
This commit is contained in:
Mark Mankarious
2023-08-28 18:19:20 +01:00
parent cfa87da01a
commit ca91184b6a
2 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Isoflow.tsx
View File

@@ -3,7 +3,6 @@ import { shallow } from 'zustand/shallow';
import { ThemeProvider } from '@mui/material/styles';
import { Box } from '@mui/material';
import { theme } from 'src/styles/theme';
import { ToolMenu } from 'src/components/ToolMenu/ToolMenu';
import {
SceneInput,
IconInput,
@@ -22,10 +21,8 @@ import { LabelContainer } from 'src/components/Nodes/Node/LabelContainer';
import { useWindowUtils } from 'src/hooks/useWindowUtils';
import { sceneInput as sceneValidationSchema } from 'src/validation/scene';
import { EMPTY_SCENE } from 'src/config';
import { ItemControlsManager } from './components/ItemControls/ItemControlsManager';
import { UiStateProvider, useUiStateStore } from './stores/uiStateStore';
import { SceneLayer } from './components/SceneLayer/SceneLayer';
import { DragAndDrop } from './components/DragAndDrop/DragAndDrop';
import { UiOverlay } from 'src/components/UiOverlay/UiOverlay';
import { UiStateProvider, useUiStateStore } from 'src/stores/uiStateStore';
interface Props {
initialData?: InitialData;
@@ -56,15 +53,6 @@ const App = ({
const uiActions = useUiStateStore((state) => {
return state.actions;
});
const disableInteractions = useUiStateStore((state) => {
return state.disableInteractions;
});
const mode = useUiStateStore((state) => {
return state.mode;
});
const mouse = useUiStateStore((state) => {
return state.mouse;
});
useEffect(() => {
uiActions.setZoom(initialData?.zoom ?? 1);
@@ -102,13 +90,7 @@ const App = ({
}}
>
<Renderer />
<ItemControlsManager />
{!disableInteractions && <ToolMenu />}
{mode.type === 'PLACE_ELEMENT' && mode.icon && (
<SceneLayer>
<DragAndDrop icon={mode.icon} tile={mouse.position.tile} />
</SceneLayer>
)}
<UiOverlay />
</Box>
</>
);

32
src/components/UiOverlay/UiOverlay.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { SceneLayer } from 'src/components/SceneLayer/SceneLayer';
import { DragAndDrop } from 'src/components/DragAndDrop/DragAndDrop';
import { ItemControlsManager } from 'src/components/ItemControls/ItemControlsManager';
import { ToolMenu } from 'src/components/ToolMenu/ToolMenu';
import { useUiStateStore } from 'src/stores/uiStateStore';
export const UiOverlay = () => {
const disableInteractions = useUiStateStore((state) => {
return state.disableInteractions;
});
const mode = useUiStateStore((state) => {
return state.mode;
});
const mouse = useUiStateStore((state) => {
return state.mouse;
});
if (disableInteractions) return null;
return (
<>
<ItemControlsManager />
<ToolMenu />
{mode.type === 'PLACE_ELEMENT' && mode.icon && (
<SceneLayer>
<DragAndDrop icon={mode.icon} tile={mouse.position.tile} />
</SceneLayer>
)}
</>
);
};