From ad41afe65e99a2cec61075aa948d90ebd98300bf Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sat, 22 Apr 2023 21:25:01 +1200
Subject: [PATCH] feat(ui): Make Nodes Resizable

---
 .../components/IAINode/IAINodeResizer.tsx     | 19 +++++++++++++++++++
 .../nodes/components/InvocationComponent.tsx  |  6 +++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx

diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx
new file mode 100644
index 0000000000..fcce9ce1b7
--- /dev/null
+++ b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeResizer.tsx
@@ -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>
+  );
+}
diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
index d4abdf0c96..d168e429f4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
@@ -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>
   );