Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update MinimapPanel.tsx

Browse Source
This commit is contained in:
mickr777 2023-07-18 12:10:42 +10:00 committed by GitHub
parent c3a7e35ad8
commit 990f34aa15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
invokeai/frontend/web/src/features/nodes/components/panels/MinimapPanel.tsx
View File

@ -1,3 +1,5 @@
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { useColorModeValue } from '@chakra-ui/react'; import { useColorModeValue } from '@chakra-ui/react';
import { memo } from 'react'; import { memo } from 'react';
import { MiniMap } from 'reactflow'; import { MiniMap } from 'reactflow';
@ -12,6 +14,10 @@ const MinimapPanel = () => {
} }
); );
const shouldShowMinimapPanel = useAppSelector(
(state: RootState) => state.nodes.shouldShowMinimapPanel
);
const nodeColor = useColorModeValue( const nodeColor = useColorModeValue(
'var(--invokeai-colors-accent-300)', 'var(--invokeai-colors-accent-300)',
'var(--invokeai-colors-accent-700)' 'var(--invokeai-colors-accent-700)'
@ -23,15 +29,19 @@ const MinimapPanel = () => {
); );
return ( return (
<MiniMap <>
nodeStrokeWidth={3} {shouldShowMinimapPanel && (
pannable <MiniMap
zoomable nodeStrokeWidth={3}
nodeBorderRadius={30} pannable
style={miniMapStyle} zoomable
nodeColor={nodeColor} nodeBorderRadius={30}
maskColor={maskColor} style={miniMapStyle}
/> nodeColor={nodeColor}
maskColor={maskColor}
/>
)}
</>
); );
}; };