feat(ui): align invoke buttons

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

@@ -7,6 +7,11 @@ import { MdDeviceHub } from 'react-icons/md';
 import 'reactflow/dist/style.css';
 import AddNodePopover from './flow/AddNodePopover/AddNodePopover';
 import { Flow } from './flow/Flow';
+import TopLeftPanel from './flow/panels/TopLeftPanel/TopLeftPanel';
+import TopCenterPanel from './flow/panels/TopCenterPanel/TopCenterPanel';
+import TopRightPanel from './flow/panels/TopRightPanel/TopRightPanel';
+import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
+import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
 
 const NodeEditor = () => {
   const isReady = useAppSelector((state) => state.nodes.isReady);
@@ -40,6 +45,11 @@ const NodeEditor = () => {
           >
             <Flow />
             <AddNodePopover />
+            <TopLeftPanel />
+            <TopCenterPanel />
+            <TopRightPanel />
+            <BottomLeftPanel />
+            <MinimapPanel />
           </motion.div>
         )}
       </AnimatePresence>

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -42,11 +42,6 @@ import InvocationDefaultEdge from './edges/InvocationDefaultEdge';
 import CurrentImageNode from './nodes/CurrentImage/CurrentImageNode';
 import InvocationNodeWrapper from './nodes/Invocation/InvocationNodeWrapper';
 import NotesNode from './nodes/Notes/NotesNode';
-import BottomLeftPanel from './panels/BottomLeftPanel/BottomLeftPanel';
-import MinimapPanel from './panels/MinimapPanel/MinimapPanel';
-import TopCenterPanel from './panels/TopCenterPanel/TopCenterPanel';
-import TopLeftPanel from './panels/TopLeftPanel/TopLeftPanel';
-import TopRightPanel from './panels/TopRightPanel/TopRightPanel';
 
 const DELETE_KEYS = ['Delete', 'Backspace'];
 
@@ -196,11 +191,6 @@ export const Flow = () => {
       deleteKeyCode={DELETE_KEYS}
       selectionMode={selectionMode}
     >
-      <TopLeftPanel />
-      <TopCenterPanel />
-      <TopRightPanel />
-      <BottomLeftPanel />
-      <MinimapPanel />
       <Background />
     </ReactFlow>
   );

invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx

@@ -1,16 +1,13 @@
-import { memo } from 'react';
-import { Panel } from 'reactflow';
-import ViewportControls from './ViewportControls';
-import NodeOpacitySlider from './NodeOpacitySlider';
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import NodeOpacitySlider from './NodeOpacitySlider';
+import ViewportControls from './ViewportControls';
 
 const BottomLeftPanel = () => (
-  <Panel position="bottom-left">
+  <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineStart: 2 }}>
-    <Flex sx={{ gap: 2 }}>
     <ViewportControls />
     <NodeOpacitySlider />
   </Flex>
-  </Panel>
 );
 
 export default memo(BottomLeftPanel);

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

@@ -1,6 +1,6 @@
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { useColorModeValue } from '@chakra-ui/react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
 import { memo } from 'react';
 import { MiniMap } from 'reactflow';
 
@@ -29,7 +29,7 @@ const MinimapPanel = () => {
   );
 
   return (
-    <>
+    <Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}>
       {shouldShowMinimapPanel && (
         <MiniMap
           pannable
@@ -40,7 +40,7 @@ const MinimapPanel = () => {
           maskColor={maskColor}
         />
       )}
-    </>
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx

@@ -6,10 +6,8 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Button,
-  Divider,
   Flex,
   Text,
-  VStack,
   useDisclosure,
 } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
@@ -55,6 +53,7 @@ const ResetWorkflowButton = () => {
         aria-label={t('nodes.resetWorkflow')}
         onClick={onOpen}
         isDisabled={!nodesCount}
+        colorScheme="error"
       />
 
       <AlertDialog

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx

@@ -1,8 +1,25 @@
+import { Flex } from '@chakra-ui/layout';
 import { memo } from 'react';
-import { Panel } from 'reactflow';
+import LoadWorkflowButton from './LoadWorkflowButton';
+import ResetWorkflowButton from './ResetWorkflowButton';
+import SaveWorkflowButton from './SaveWorkflowButton';
 
 const TopCenterPanel = () => {
-  return <Panel position="top-center">{null}</Panel>;
+  return (
+    <Flex
+      sx={{
+        gap: 2,
+        position: 'absolute',
+        top: 2,
+        insetInlineStart: '50%',
+        transform: 'translate(-50%)',
+      }}
+    >
+      <SaveWorkflowButton />
+      <LoadWorkflowButton />
+      <ResetWorkflowButton />
+    </Flex>
+  );
 };
 
 export default memo(TopCenterPanel);

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx

@@ -2,18 +2,12 @@ import { Flex } from '@chakra-ui/react';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
 import { memo } from 'react';
-import LoadWorkflowButton from './LoadWorkflowButton';
-import ResetWorkflowButton from './ResetWorkflowButton';
-import SaveWorkflowButton from './SaveWorkflowButton';
 
 const WorkflowEditorControls = () => {
   return (
-    <Flex sx={{ gap: 2 }}>
+    <Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
       <InvokeButton />
       <CancelButton />
-      <ResetWorkflowButton />
-      <SaveWorkflowButton />
-      <LoadWorkflowButton />
     </Flex>
   );
 };

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx

@@ -1,9 +1,9 @@
+import { Flex } from '@chakra-ui/layout';
 import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
 import { memo, useCallback } from 'react';
 import { FaPlus } from 'react-icons/fa';
-import { Panel } from 'reactflow';
 
 const TopLeftPanel = () => {
   const dispatch = useAppDispatch();
@@ -13,14 +13,14 @@ const TopLeftPanel = () => {
   }, [dispatch]);
 
   return (
-    <Panel position="top-left">
+    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineStart: 2 }}>
       <IAIIconButton
         tooltip="Add Node (Shift+A, Space)"
         aria-label="Add Node"
         icon={<FaPlus />}
         onClick={handleOpenAddNodePopover}
       />
-    </Panel>
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx

@@ -1,6 +1,6 @@
+import { Flex } from '@chakra-ui/layout';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
-import { Panel } from 'reactflow';
 import FieldTypeLegend from './FieldTypeLegend';
 import WorkflowEditorSettings from './WorkflowEditorSettings';
 
@@ -10,10 +10,10 @@ const TopRightPanel = () => {
   );
 
   return (
-    <Panel position="top-right">
+    <Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineEnd: 2 }}>
       <WorkflowEditorSettings />
       {shouldShowFieldTypeLegend && <FieldTypeLegend />}
-    </Panel>
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx

@@ -9,6 +9,7 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  forwardRef,
   useDisclosure,
 } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
@@ -54,7 +55,7 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const WorkflowEditorSettings = () => {
+const WorkflowEditorSettings = forwardRef((_, ref) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const dispatch = useAppDispatch();
   const {
@@ -103,6 +104,7 @@ const WorkflowEditorSettings = () => {
   return (
     <>
       <IAIIconButton
+        ref={ref}
         aria-label="Workflow Editor Settings"
         tooltip="Workflow Editor Settings"
         icon={<FaCog />}
@@ -170,6 +172,6 @@ const WorkflowEditorSettings = () => {
       </Modal>
     </>
   );
-};
+});
 
 export default memo(WorkflowEditorSettings);

invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@chakra-ui/react';
+import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import { memo, useCallback, useRef, useState } from 'react';
@@ -8,7 +9,6 @@ import {
   PanelGroup,
 } from 'react-resizable-panels';
 import 'reactflow/dist/style.css';
-import WorkflowEditorControls from '../flow/panels/TopCenterPanel/WorkflowEditorControls';
 import InspectorPanel from './inspector/InspectorPanel';
 import WorkflowPanel from './workflow/WorkflowPanel';
 
@@ -26,7 +26,7 @@ const NodeEditorPanelGroup = () => {
 
   return (
     <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
-      <WorkflowEditorControls />
+      <ProcessButtons />
       <PanelGroup
         ref={panelGroupRef}
         id="workflow-panel-group"

invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx

@@ -20,7 +20,7 @@ const InspectorPanel = () => {
         w: 'full',
         h: 'full',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 2,
       }}
     >

invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx

@@ -20,7 +20,7 @@ const WorkflowPanel = () => {
         w: 'full',
         h: 'full',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 2,
       }}
     >

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx

@@ -49,7 +49,7 @@ const InitialImageDisplay = () => {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 'base',
-        p: 4,
+        p: 2,
         gap: 4,
       }}
     >
@@ -64,6 +64,7 @@ const InitialImageDisplay = () => {
       >
         <Text
           sx={{
+            ps: 2,
             fontWeight: 600,
             userSelect: 'none',
             color: 'base.700',

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx

@@ -1,14 +1,14 @@
 import { Flex } from '@chakra-ui/react';
+import { memo } from 'react';
 import CancelButton from './CancelButton';
 import InvokeButton from './InvokeButton';
-import { memo } from 'react';
 
 /**
  * Buttons to start and cancel image generation.
  */
 const ProcessButtons = () => {
   return (
-    <Flex gap={2}>
+    <Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
       <InvokeButton />
       <CancelButton />
     </Flex>

invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx

@@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import { memo } from 'react';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters';
-import { memo } from 'react';
 
 const SDXLImageToImageTabParameters = () => {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx

@@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
+import { memo } from 'react';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
-import { memo } from 'react';
 
 const SDXLTextToImageTabParameters = () => {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx

@@ -5,7 +5,6 @@ import ParamMaskAdjustmentCollapse from 'features/parameters/components/Paramete
 import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLUnifiedCanvasTabCoreParameters from './SDXLUnifiedCanvasTabCoreParameters';
@@ -14,7 +13,6 @@ export default function SDXLUnifiedCanvasTabParameters() {
   return (
     <>
       <ParamSDXLPromptArea />
-      <ProcessButtons />
       <SDXLUnifiedCanvasTabCoreParameters />
       <ParamSDXLRefinerCollapse />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx

@@ -1,6 +1,7 @@
 import { Box, Flex } from '@chakra-ui/react';
 import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import SDXLImageToImageTabParameters from 'features/sdxl/components/SDXLImageToImageTabParameters';
 import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
 import SDXLUnifiedCanvasTabParameters from 'features/sdxl/components/SDXLUnifiedCanvasTabParameters';
@@ -59,11 +60,29 @@ export default memo(ParametersPanel);
 const ParametersPanelWrapper = memo((props: PropsWithChildren) => {
   return (
     <Flex
+      sx={{
+        w: 'full',
+        h: 'full',
+        flexDir: 'column',
+        gap: 2,
+      }}
+    >
+      <ProcessButtons />
+      <Flex
+        layerStyle="first"
         sx={{
           w: 'full',
           h: 'full',
           position: 'relative',
           borderRadius: 'base',
+          p: 2,
+        }}
+      >
+        <Flex
+          sx={{
+            w: 'full',
+            h: 'full',
+            position: 'relative',
           }}
         >
           <Box
@@ -103,6 +122,8 @@ const ParametersPanelWrapper = memo((props: PropsWithChildren) => {
             </OverlayScrollbarsComponent>
           </Box>
         </Flex>
+      </Flex>
+    </Flex>
   );
 });
 

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -3,24 +3,20 @@ import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
-import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 import { memo } from 'react';
+import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamlessCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx

@@ -10,7 +10,7 @@ const TextToImageTabMain = () => {
         position: 'relative',
         width: '100%',
         height: '100%',
-        p: 4,
+        p: 2,
         borderRadius: 'base',
       }}
     >

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -5,22 +5,18 @@ import ParamControlNetCollapse from 'features/parameters/components/Parameters/C
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import { memo } from 'react';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
-import { memo } from 'react';
 
 const TextToImageTabParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamNoiseCollapse />
       <ParamSymmetryCollapse />
       <ParamSeamlessCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx

@@ -4,24 +4,20 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv
 import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
-// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
 import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
 import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
-import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 import { memo } from 'react';
+import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
 
 const UnifiedCanvasParameters = () => {
   return (
     <>
       <ParamPromptArea />
-      <ProcessButtons />
       <UnifiedCanvasCoreParameters />
       <ParamControlNetCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
-      {/* <ParamVariationCollapse /> */}
       <ParamSymmetryCollapse />
       <ParamMaskAdjustmentCollapse />
       <ParamInfillAndScalingCollapse />