fix(ui): disable canvas-related image context menu items when canvas is busy

Author: psychedelicious

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewCanvasFromImage.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNewCanvasFromImage } from 'features/controlLayers/hooks/addLayerHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { toast } from 'features/toast/toast';
@@ -15,6 +16,7 @@ export const ImageMenuItemNewCanvasFromImage = memo(() => {
   const imageDTO = useImageDTOContext();
   const imageViewer = useImageViewer();
   const newCanvasFromImage = useNewCanvasFromImage();
+  const isBusy = useCanvasIsBusy();
 
   const onClick = useCallback(() => {
     newCanvasFromImage(imageDTO);
@@ -28,7 +30,7 @@ export const ImageMenuItemNewCanvasFromImage = memo(() => {
   }, [dispatch, imageDTO, imageViewer, newCanvasFromImage, t]);
 
   return (
-    <MenuItem icon={<PiFileBold />} onClickCapture={onClick}>
+    <MenuItem icon={<PiFileBold />} onClickCapture={onClick} isDisabled={isBusy}>
       {t('controlLayers.newCanvasFromImage')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemNewLayerFromImage.tsx

@@ -2,6 +2,7 @@ import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
 import { useNewRasterLayerFromImage } from 'features/controlLayers/hooks/addLayerHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { sentImageToCanvas } from 'features/gallery/store/actions';
@@ -16,6 +17,7 @@ export const ImageMenuItemNewLayerFromImage = memo(() => {
   const imageDTO = useImageDTOContext();
   const imageViewer = useImageViewer();
   const newRasterLayerFromImage = useNewRasterLayerFromImage();
+  const isBusy = useCanvasIsBusy();
 
   const onClick = useCallback(() => {
     dispatch(sentImageToCanvas());
@@ -30,7 +32,7 @@ export const ImageMenuItemNewLayerFromImage = memo(() => {
   }, [dispatch, imageDTO, imageViewer, newRasterLayerFromImage, t]);
 
   return (
-    <MenuItem icon={<NewLayerIcon />} onClickCapture={onClick}>
+    <MenuItem icon={<NewLayerIcon />} onClickCapture={onClick} isDisabled={isBusy}>
       {t('controlLayers.newLayerFromImage')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemsNewImg2ImgCanvasFromImage.tsx

@@ -1,6 +1,7 @@
 import { MenuItem } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useNewImg2ImgCanvasFromImage } from 'features/controlLayers/hooks/addLayerHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { toast } from 'features/toast/toast';
@@ -15,6 +16,7 @@ export const ImageMenuItemsNewImg2ImgCanvasFromImage = memo(() => {
   const imageDTO = useImageDTOContext();
   const imageViewer = useImageViewer();
   const newImg2ImgCanvasFromImage = useNewImg2ImgCanvasFromImage();
+  const isBusy = useCanvasIsBusy();
 
   const onClick = useCallback(() => {
     newImg2ImgCanvasFromImage(imageDTO);
@@ -28,7 +30,7 @@ export const ImageMenuItemsNewImg2ImgCanvasFromImage = memo(() => {
   }, [dispatch, imageDTO, imageViewer, newImg2ImgCanvasFromImage, t]);
 
   return (
-    <MenuItem icon={<PiFileImageBold />} onClickCapture={onClick}>
+    <MenuItem icon={<PiFileImageBold />} onClickCapture={onClick} isDisabled={isBusy}>
       {t('controlLayers.newImg2ImgCanvasFromImage')}
     </MenuItem>
   );