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): add UI component for unknown node types

Browse Source
This commit is contained in:
psychedelicious 2023-08-14 19:42:40 +10:00
parent c48fd9c083
commit 94bfef3543
1 changed files with 41 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
invokeai/frontend/web/src/features/nodes/components/nodes/InvocationNode.tsx
View File

@ -1,10 +1,10 @@
import { Flex, Icon } from '@chakra-ui/react'; import { Box, Flex, Text } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { makeTemplateSelector } from 'features/nodes/store/util/makeTemplateSelector'; import { makeTemplateSelector } from 'features/nodes/store/util/makeTemplateSelector';
import { DRAG_HANDLE_CLASSNAME } from 'features/nodes/types/constants';
import { InvocationNodeData } from 'features/nodes/types/types'; import { InvocationNodeData } from 'features/nodes/types/types';
import { map } from 'lodash-es'; import { map } from 'lodash-es';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { FaExclamationCircle } from 'react-icons/fa';
import { NodeProps } from 'reactflow'; import { NodeProps } from 'reactflow';
import NodeCollapseButton from '../Invocation/NodeCollapseButton'; import NodeCollapseButton from '../Invocation/NodeCollapseButton';
import NodeCollapsedHandles from '../Invocation/NodeCollapsedHandles'; import NodeCollapsedHandles from '../Invocation/NodeCollapsedHandles';
@ -32,25 +32,52 @@ const InvocationNode = (props: NodeProps<InvocationNodeData>) => {
return ( return (
<NodeWrapper nodeProps={props}> <NodeWrapper nodeProps={props}>
<Flex <Flex
layerStyle="nodeBody" className={DRAG_HANDLE_CLASSNAME}
className="nopan" layerStyle="nodeHeader"
sx={{ sx={{
borderTopRadius: 'base',
borderBottomRadius: isOpen ? 0 : 'base',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', h: 8,
cursor: 'auto', fontWeight: 600,
w: 'full', fontSize: 'sm',
h: 'full',
}} }}
> >
<Icon <NodeCollapseButton nodeProps={props} />
as={FaExclamationCircle} <Text
sx={{ sx={{
boxSize: 32, w: 'full',
color: 'base.600', textAlign: 'center',
_dark: { color: 'base.400' }, pe: 8,
color: 'error.500',
_dark: { color: 'error.300' },
}} }}
></Icon> >
{data.label ? `${data.label} (${data.type})` : data.type}
</Text>
</Flex> </Flex>
{isOpen && (
<Flex
layerStyle="nodeBody"
sx={{
userSelect: 'auto',
flexDirection: 'column',
w: 'full',
h: 'full',
p: 4,
gap: 1,
borderBottomRadius: 'base',
fontSize: 'sm',
}}
>
<Box>
<Text as="span">Unknown node type: </Text>
<Text as="span" fontWeight={600}>
{data.type}
</Text>
</Box>
</Flex>
)}
</NodeWrapper> </NodeWrapper>
); );
} }