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

feat: improves UX on Tool menu

Browse Source
This commit is contained in:
Mark Mankarious
2023-08-29 18:23:34 +01:00
parent 8cb361a428
commit ac4e9e8563
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/ToolMenu/ToolMenu.tsx
View File

@@ -6,7 +6,8 @@ import {
NearMeOutlined as NearMeIcon,
AddOutlined as AddIcon,
EastOutlined as ConnectorIcon,
CropSquareOutlined as CropSquareIcon
CropSquareOutlined as CropSquareIcon,
Title as TitleIcon
} from '@mui/icons-material';
import { useUiStateStore } from 'src/stores/uiStateStore';
import { MAX_ZOOM, MIN_ZOOM } from 'src/config';
@@ -26,6 +27,29 @@ export const ToolMenu = () => {
return (
<UiElement orientation="TOPRIGHT">
<IconButton
name="Select"
Icon={<NearMeIcon />}
onClick={() => {
uiStateStoreActions.setMode({
type: 'CURSOR',
showCursor: true,
mousedownItem: null
});
}}
isActive={mode.type === 'CURSOR' || mode.type === 'DRAG_ITEMS'}
/>
<IconButton
name="Pan"
Icon={<PanToolIcon />}
onClick={() => {
uiStateStoreActions.setMode({
type: 'PAN',
showCursor: false
});
}}
isActive={mode.type === 'PAN'}
/>
<IconButton
name="Add element"
Icon={<AddIcon />}
@@ -39,9 +63,10 @@ export const ToolMenu = () => {
icon: null
});
}}
isActive={mode.type === 'PLACE_ELEMENT'}
/>
<IconButton
name="Area"
name="Rectangle"
Icon={<CropSquareIcon />}
onClick={() => {
uiStateStoreActions.setMode({
@@ -65,27 +90,15 @@ export const ToolMenu = () => {
isActive={mode.type === 'CONNECTOR'}
/>
<IconButton
name="Select"
Icon={<NearMeIcon />}
name="Text"
Icon={<TitleIcon />}
onClick={() => {
uiStateStoreActions.setMode({
type: 'CURSOR',
showCursor: true,
mousedownItem: null
});
}}
isActive={mode.type === 'CURSOR'}
/>
<IconButton
name="Pan"
Icon={<PanToolIcon />}
onClick={() => {
uiStateStoreActions.setMode({
type: 'PAN',
type: 'TEXTBOX',
showCursor: false
});
}}
isActive={mode.type === 'PAN'}
isActive={mode.type === 'TEXTBOX'}
/>
<IconButton
name="Zoom in"