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): Make Nodes Resizable

Browse Source
This commit is contained in:
blessedcoolant 2023-04-22 21:25:01 +12:00 committed by psychedelicious
parent 77fa7519c4
commit ad41afe65e
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx Normal file
View File

@ -0,0 +1,19 @@
import { NodeResizeControl, NodeResizerProps } from 'reactflow';
export default function IAINodeResizer(props: NodeResizerProps) {
const { ...rest } = props;
return (
<NodeResizeControl
style={{
position: 'relative',
border: 'none',
background: 'none',
width: 10,
height: 10,
top: 10,
}}
minWidth={350}
{...rest}
></NodeResizeControl>
);
}

6
invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
View File

@ -1,4 +1,4 @@
import { NodeProps } from 'reactflow';
import { NodeProps, NodeResizeControl } from 'reactflow';
import { Box, Flex, Icon } from '@chakra-ui/react';
import { FaExclamationCircle } from 'react-icons/fa';
import { InvocationValue } from '../types/types';
@ -8,6 +8,8 @@ import { useGetInvocationTemplate } from '../hooks/useInvocationTemplate';
import IAINodeOutputs from './IAINode/IAINodeOutputs';
import IAINodeInputs from './IAINode/IAINodeInputs';
import IAINodeHeader from './IAINode/IAINodeHeader';
import { IoResize } from 'react-icons/io5';
import IAINodeResizer from './IAINode/IAINodeResizer';
export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
const { id: nodeId, data, selected } = props;
@ -32,6 +34,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
>
<Flex sx={{ alignItems: 'center', justifyContent: 'center' }}>
<Icon color="base.400" boxSize={32} as={FaExclamationCircle}></Icon>
<IAINodeResizer />
</Flex>
</Box>
);
@ -51,6 +54,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
<IAINodeHeader nodeId={nodeId} template={template} />
<IAINodeOutputs nodeId={nodeId} outputs={outputs} template={template} />
<IAINodeInputs nodeId={nodeId} inputs={inputs} template={template} />
<IAINodeResizer />
</Flex>
</Box>
);