Update ViewportControls.tsx

This commit is contained in:
mickr777 2023-07-18 12:10:57 +10:00 committed by GitHub
parent 990f34aa15
commit 11882173e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,11 +2,19 @@ import { ButtonGroup } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { memo, useCallback } from 'react';
import { FaCode, FaExpand, FaMinus, FaPlus, FaInfo } from 'react-icons/fa';
import {
FaCode,
FaExpand,
FaMinus,
FaPlus,
FaInfo,
FaMapMarkerAlt,
} from 'react-icons/fa';
import { useReactFlow } from 'reactflow';
import {
shouldShowGraphOverlayChanged,
shouldShowFieldTypeLegendChanged,
shouldShowMinimapPanelChanged,
} from '../store/nodesSlice';
const ViewportControls = () => {
@ -19,6 +27,10 @@ const ViewportControls = () => {
(state) => state.nodes.shouldShowFieldTypeLegend
);
const shouldShowMinimapPanel = useAppSelector(
(state) => state.nodes.shouldShowMinimapPanel
);
const handleClickedZoomIn = useCallback(() => {
zoomIn();
}, [zoomIn]);
@ -39,6 +51,10 @@ const ViewportControls = () => {
dispatch(shouldShowFieldTypeLegendChanged(!shouldShowFieldTypeLegend));
}, [shouldShowFieldTypeLegend, dispatch]);
const handleClickedToggleMiniMapPanel = useCallback(() => {
dispatch(shouldShowMinimapPanelChanged(!shouldShowMinimapPanel));
}, [shouldShowMinimapPanel, dispatch]);
return (
<ButtonGroup isAttached orientation="vertical">
<IAIIconButton
@ -68,6 +84,12 @@ const ViewportControls = () => {
aria-label="Show/Hide Field Type Legend"
icon={<FaInfo />}
/>
<IAIIconButton
isChecked={shouldShowMinimapPanel}
onClick={handleClickedToggleMiniMapPanel}
aria-label="Show/Hide Minimap"
icon={<FaMapMarkerAlt />}
/>
</ButtonGroup>
);
};