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

feat(ui): style minimap

Browse Source
This commit is contained in:
psychedelicious 2023-08-23 21:24:11 +10:00
parent 05c939d41e
commit 06ac16a77d
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,12 @@
import { Flex, chakra, useColorModeValue } from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { Flex, useColorModeValue } from '@chakra-ui/react';
import { memo } from 'react'; import { memo } from 'react';
import { MiniMap } from 'reactflow'; import { MiniMap } from 'reactflow';
const MinimapPanel = () => { const ChakraMiniMap = chakra(MiniMap);
const miniMapStyle = useColorModeValue(
{
background: 'var(--invokeai-colors-base-200)',
},
{
background: 'var(--invokeai-colors-base-500)',
}
);
const MinimapPanel = () => {
const shouldShowMinimapPanel = useAppSelector( const shouldShowMinimapPanel = useAppSelector(
(state: RootState) => state.nodes.shouldShowMinimapPanel (state: RootState) => state.nodes.shouldShowMinimapPanel
); );
@ -31,11 +24,21 @@ const MinimapPanel = () => {
return ( return (
<Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}> <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}>
{shouldShowMinimapPanel && ( {shouldShowMinimapPanel && (
<MiniMap <ChakraMiniMap
pannable pannable
zoomable zoomable
nodeBorderRadius={15} nodeBorderRadius={15}
style={miniMapStyle} sx={{
m: '0 !important',
backgroundColor: 'base.200 !important',
borderRadius: 'base',
_dark: {
backgroundColor: 'base.500 !important',
},
svg: {
borderRadius: 'inherit',
},
}}
nodeColor={nodeColor} nodeColor={nodeColor}
maskColor={maskColor} maskColor={maskColor}
/> />