Tweaks to Image Progress Node

invokeai/frontend/web/src/features/nodes/components/ProgressImageNode.tsx

@@ -1,33 +1,46 @@
 import { Flex, Image } from '@chakra-ui/react';
-import { NodeProps } from 'reactflow';
-import { InvocationValue } from '../types/types';
-
-import { useAppSelector } from 'app/store/storeHooks';
+import { RootState } from 'app/store/store';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { memo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { NodeProps, OnResize } from 'reactflow';
+import { setProgressNodeSize } from '../store/nodesSlice';
 import IAINodeHeader from './IAINode/IAINodeHeader';
 import IAINodeResizer from './IAINode/IAINodeResizer';
 import NodeWrapper from './NodeWrapper';
 
-const ProgressImageNode = (props: NodeProps<InvocationValue>) => {
-  const progressImage = useAppSelector((state) => state.system.progressImage);
+const ProgressImageNode = (props: NodeProps) => {
+  const progressImage = useSelector(
+    (state: RootState) => state.system.progressImage
+  );
+  const progressNodeSize = useSelector(
+    (state: RootState) => state.nodes.progressNodeSize
+  );
+  const dispatch = useDispatch();
   const { selected } = props;
 
+  const handleResize: OnResize = (_, newSize) => {
+    dispatch(setProgressNodeSize(newSize));
+  };
+
   return (
     <NodeWrapper selected={selected}>
       <IAINodeHeader
         title="Progress Image"
         description="Displays the progress image in the Node Editor"
       />
-
       <Flex
-        className="nopan"
         sx={{
           flexDirection: 'column',
+          flexShrink: 0,
           borderBottomRadius: 'md',
-          p: 2,
           bg: 'base.200',
           _dark: { bg: 'base.800' },
+          width: progressNodeSize.width - 2,
+          height: progressNodeSize.height - 2,
+          minW: 250,
+          minH: 250,
+          overflow: 'hidden',
         }}
       >
         {progressImage ? (
@@ -42,22 +55,17 @@ const ProgressImageNode = (props: NodeProps<InvocationValue>) => {
         ) : (
           <Flex
             sx={{
-              w: 'full',
-              h: 'full',
-              minW: 32,
-              minH: 32,
-              alignItems: 'center',
-              justifyContent: 'center',
+              minW: 250,
+              minH: 250,
+              width: progressNodeSize.width - 2,
+              height: progressNodeSize.height - 2,
             }}
           >
             <IAINoContentFallback />
           </Flex>
         )}
       </Flex>
-      <IAINodeResizer
-        maxHeight={progressImage?.height ?? 512}
-        maxWidth={progressImage?.width ?? 512}
-      />
+      <IAINodeResizer onResize={handleResize} />
     </NodeWrapper>
   );
 };

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -35,6 +35,7 @@ export type NodesState = {
   shouldShowFieldTypeLegend: boolean;
   shouldShowMinimapPanel: boolean;
   editorInstance: ReactFlowInstance | undefined;
+  progressNodeSize: { width: number; height: number };
 };
 
 export const initialNodesState: NodesState = {
@@ -47,6 +48,7 @@ export const initialNodesState: NodesState = {
   shouldShowFieldTypeLegend: false,
   shouldShowMinimapPanel: true,
   editorInstance: undefined,
+  progressNodeSize: { width: 512, height: 512 },
 };
 
 const nodesSlice = createSlice({
@@ -157,6 +159,12 @@ const nodesSlice = createSlice({
     loadFileEdges: (state, action: PayloadAction<Edge[]>) => {
       state.edges = action.payload;
     },
+    setProgressNodeSize: (
+      state,
+      action: PayloadAction<{ width: number; height: number }>
+    ) => {
+      state.progressNodeSize = action.payload;
+    },
   },
   extraReducers: (builder) => {
     builder.addCase(receivedOpenAPISchema.fulfilled, (state, action) => {
@@ -182,6 +190,7 @@ export const {
   setEditorInstance,
   loadFileNodes,
   loadFileEdges,
+  setProgressNodeSize,
 } = nodesSlice.actions;
 
 export default nodesSlice.reducer;