Rearrange some canvas toolbar icons

Put brush stuff together and canvas movement stuff together

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -8,12 +8,7 @@ import {
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
-import {
+import { FaEraser, FaPaintBrush, FaSlidersH } from 'react-icons/fa';
-  FaArrowsAlt,
-  FaEraser,
-  FaPaintBrush,
-  FaSlidersH,
-} from 'react-icons/fa';
 import {
   canvasSelector,
   isStagingSelector,
@@ -52,18 +47,6 @@ const IAICanvasToolChooserOptions = () => {
   const { tool, brushColor, brushSize, brushColorString, isStaging } =
     useAppSelector(selector);
 
-  useHotkeys(
-    ['v'],
-    () => {
-      handleSelectMoveTool();
-    },
-    {
-      enabled: () => true,
-      preventDefault: true,
-    },
-    []
-  );
-
   useHotkeys(
     ['b'],
     () => {
@@ -114,7 +97,6 @@ const IAICanvasToolChooserOptions = () => {
 
   const handleSelectBrushTool = () => dispatch(setTool('brush'));
   const handleSelectEraserTool = () => dispatch(setTool('eraser'));
-  const handleSelectMoveTool = () => dispatch(setTool('move'));
 
   return (
     <ButtonGroup isAttached>
@@ -134,20 +116,12 @@ const IAICanvasToolChooserOptions = () => {
         isDisabled={isStaging}
         onClick={() => dispatch(setTool('eraser'))}
       />
-      <IAIIconButton
-        aria-label="Move Tool (V)"
-        tooltip="Move Tool (V)"
-        icon={<FaArrowsAlt />}
-        data-selected={tool === 'move' || isStaging}
-        onClick={handleSelectMoveTool}
-      />
-
       <IAIPopover
         trigger="hover"
         triggerComponent={
           <IAIIconButton
-            aria-label="Tool Options"
+            aria-label="Brush Options"
-            tooltip="Tool Options"
+            tooltip="Brush Options"
             icon={<FaSlidersH />}
           />
         }

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -4,11 +4,13 @@ import {
   resetCanvas,
   resetCanvasView,
   resizeAndScaleCanvas,
+  setTool,
 } from 'features/canvas/store/canvasSlice';
 import { useAppDispatch, useAppSelector } from 'app/store';
 import _ from 'lodash';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {
+  FaArrowsAlt,
   FaCopy,
   FaCrosshairs,
   FaDownload,
@@ -27,14 +29,21 @@ import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import useImageUploader from 'common/hooks/useImageUploader';
+import {
+  canvasSelector,
+  isStagingSelector,
+} from 'features/canvas/store/canvasSelectors';
 
 export const selector = createSelector(
-  [systemSelector],
+  [systemSelector, canvasSelector, isStagingSelector],
-  (system) => {
+  (system, canvas, isStaging) => {
     const { isProcessing } = system;
+    const { tool } = canvas;
 
     return {
       isProcessing,
+      isStaging,
+      tool,
     };
   },
   {
@@ -46,11 +55,23 @@ export const selector = createSelector(
 
 const IAICanvasOutpaintingControls = () => {
   const dispatch = useAppDispatch();
-  const { isProcessing } = useAppSelector(selector);
+  const { isProcessing, isStaging, tool } = useAppSelector(selector);
   const canvasBaseLayer = getCanvasBaseLayer();
 
   const { openUploader } = useImageUploader();
 
+  useHotkeys(
+    ['v'],
+    () => {
+      handleSelectMoveTool();
+    },
+    {
+      enabled: () => true,
+      preventDefault: true,
+    },
+    []
+  );
+
   useHotkeys(
     ['r'],
     () => {
@@ -111,6 +132,8 @@ const IAICanvasOutpaintingControls = () => {
     [canvasBaseLayer, isProcessing]
   );
 
+  const handleSelectMoveTool = () => dispatch(setTool('move'));
+
   const handleResetCanvasView = () => {
     const canvasBaseLayer = getCanvasBaseLayer();
     if (!canvasBaseLayer) return;
@@ -170,6 +193,22 @@ const IAICanvasOutpaintingControls = () => {
       <IAICanvasMaskOptions />
       <IAICanvasToolChooserOptions />
 
+      <ButtonGroup isAttached>
+        <IAIIconButton
+          aria-label="Move Tool (V)"
+          tooltip="Move Tool (V)"
+          icon={<FaArrowsAlt />}
+          data-selected={tool === 'move' || isStaging}
+          onClick={handleSelectMoveTool}
+        />
+        <IAIIconButton
+          aria-label="Reset View (R)"
+          tooltip="Reset View (R)"
+          icon={<FaCrosshairs />}
+          onClick={handleResetCanvasView}
+        />
+      </ButtonGroup>
+
       <ButtonGroup isAttached>
         <IAIIconButton
           aria-label="Merge Visible (Shift+M)"
@@ -212,12 +251,6 @@ const IAICanvasOutpaintingControls = () => {
           icon={<FaUpload />}
           onClick={openUploader}
         />
-        <IAIIconButton
-          aria-label="Reset View (R)"
-          tooltip="Reset View (R)"
-          icon={<FaCrosshairs />}
-          onClick={handleResetCanvasView}
-        />
         <IAIIconButton
           aria-label="Clear Canvas"
           tooltip="Clear Canvas"