tidy(ui): rename from "editor" to "cropper", minor cleanup

Author: psychedelicious

invokeai/frontend/web/src/app/components/GlobalModalIsolator.tsx

@@ -2,11 +2,11 @@ import { GlobalImageHotkeys } from 'app/components/GlobalImageHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import { CanvasPasteModal } from 'features/controlLayers/components/CanvasPasteModal';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { CropImageModal } from 'features/cropper/components/CropImageModal';
 import { DeleteImageModal } from 'features/deleteImageModal/components/DeleteImageModal';
 import { DeleteVideoModal } from 'features/deleteVideoModal/components/DeleteVideoModal';
 import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
-import { EditImageModal } from 'features/editImageModal/components/EditImageModal';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
 import { ImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu';
 import { VideoContextMenu } from 'features/gallery/components/ContextMenu/VideoContextMenu';
@@ -59,7 +59,7 @@ export const GlobalModalIsolator = memo(() => {
         <CanvasPasteModal />
       </CanvasManagerProviderGate>
       <LoadWorkflowFromGraphModal />
-      <EditImageModal />
+      <CropImageModal />
     </>
   );
 });

invokeai/frontend/web/src/features/editImageModal/components/EditorContainer.tsx renamed to invokeai/frontend/web/src/features/cropper/components/CropImageEditor.tsx

@@ -10,42 +10,35 @@ import {
   Text,
 } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import type { CropBox } from 'features/editImageModal/lib/editor';
-import { closeEditImageModal, type EditImageModalState } from 'features/editImageModal/store';
+import type { AspectRatioID } from 'features/controlLayers/store/types';
+import { ASPECT_RATIO_MAP, isAspectRatioID } from 'features/controlLayers/store/types';
+import type { CropBox } from 'features/cropper/lib/editor';
+import { cropImageModalApi, type CropImageModalState } from 'features/cropper/store';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
+import { objectEntries } from 'tsafe';
 
 type Props = {
-  editor: EditImageModalState['editor'];
-  onApplyCrop: EditImageModalState['onApplyCrop'];
-  onReady: EditImageModalState['onReady'];
+  editor: CropImageModalState['editor'];
+  onApplyCrop: CropImageModalState['onApplyCrop'];
+  onReady: CropImageModalState['onReady'];
 };
 
-const CROP_ASPECT_RATIO_MAP: Record<string, number> = {
-  '16:9': 16 / 9,
-  '3:2': 3 / 2,
-  '4:3': 4 / 3,
-  '1:1': 1,
-  '3:4': 3 / 4,
-  '2:3': 2 / 3,
-  '9:16': 9 / 16,
-};
-
-const getAspectRatioString = (ratio: number | null) => {
+const getAspectRatioString = (ratio: number | null): AspectRatioID => {
   if (!ratio) {
-    return 'free';
+    return 'Free';
   }
-  const entries = Object.entries(CROP_ASPECT_RATIO_MAP);
+  const entries = objectEntries(ASPECT_RATIO_MAP);
   for (const [key, value] of entries) {
-    if (value === ratio) {
+    if (value.ratio === ratio) {
       return key;
     }
   }
-  return 'free';
+  return 'Free';
 };
 
-export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
+export const CropImageEditor = memo(({ editor, onApplyCrop, onReady }: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [zoom, setZoom] = useState(100);
   const [cropBox, setCropBox] = useState<CropBox | null>(null);
@@ -90,12 +83,15 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
   const handleAspectRatioChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       const newRatio = e.target.value;
+      if (!isAspectRatioID(newRatio)) {
+        return;
+      }
       setAspectRatio(newRatio);
 
-      if (newRatio === 'free') {
+      if (newRatio === 'Free') {
         editor.setCropAspectRatio(null);
       } else {
-        editor.setCropAspectRatio(CROP_ASPECT_RATIO_MAP[newRatio] ?? null);
+        editor.setCropAspectRatio(ASPECT_RATIO_MAP[newRatio]?.ratio ?? null);
       }
     },
     [editor]
@@ -107,11 +103,11 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
 
   const handleApplyCrop = useCallback(async () => {
     await onApplyCrop();
-    closeEditImageModal();
+    cropImageModalApi.close();
   }, [onApplyCrop]);
 
   const handleCancelCrop = useCallback(() => {
-    closeEditImageModal();
+    cropImageModalApi.close();
   }, []);
 
   const handleExport = useCallback(async () => {
@@ -157,15 +153,15 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
       <Flex gap={2} alignItems="center">
         <FormControl flex={1}>
           <FormLabel>Aspect Ratio:</FormLabel>
-          <Select size="sm" value={aspectRatio} onChange={handleAspectRatioChange} w={64}>
-            <option value="free">Free</option>
+          <Select size="sm" value={aspectRatio} onChange={handleAspectRatioChange} w={32}>
+            <option value="Free">Free</option>
             <option value="16:9">16:9</option>
             <option value="3:2">3:2</option>
             <option value="4:3">4:3</option>
-            <option value="1:1">1:1 (Square)</option>
+            <option value="1:1">1:1</option>
             <option value="3:4">3:4</option>
-            <option value="2:3">2:3 (Portrait)</option>
-            <option value="9:16">9:16 (Portrait)</option>
+            <option value="2:3">2:3</option>
+            <option value="9:16">9:16</option>
           </Select>
         </FormControl>
 
@@ -184,7 +180,7 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
           <Button onClick={handleApplyCrop}>Apply</Button>
           <Button onClick={handleResetCrop}>Reset</Button>
           <Button onClick={handleCancelCrop}>Cancel</Button>
-          <Button onClick={handleExport}>Export</Button>
+          <Button onClick={handleExport}>Save to Assets</Button>
         </ButtonGroup>
       </Flex>
 
@@ -212,4 +208,6 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
       </Flex>
     </Flex>
   );
-};
+});
+
+CropImageEditor.displayName = 'CropImageEditor';

invokeai/frontend/web/src/features/editImageModal/components/EditImageModal.tsx renamed to invokeai/frontend/web/src/features/cropper/components/CropImageModal.tsx

@@ -1,25 +1,29 @@
 import { Modal, ModalBody, ModalContent, ModalHeader, ModalOverlay } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { $editImageModalState, closeEditImageModal } from 'features/editImageModal/store';
+import { cropImageModalApi } from 'features/cropper/store';
+import { memo } from 'react';
 
-import { EditorContainer } from './EditorContainer';
+import { CropImageEditor } from './CropImageEditor';
 
-export const EditImageModal = () => {
-  const state = useStore($editImageModalState);
+export const CropImageModal = memo(() => {
+  const state = useStore(cropImageModalApi.$state);
 
   if (!state) {
     return null;
   }
 
   return (
-    <Modal isOpen={true} onClose={closeEditImageModal} isCentered useInert={false} size="full">
+    // This modal is always open when this component is rendered
+    <Modal isOpen={true} onClose={cropImageModalApi.close} isCentered useInert={false} size="full">
       <ModalOverlay />
       <ModalContent minH="unset" minW="unset" maxH="90vh" maxW="90vw" w="full" h="full" borderRadius="base">
         <ModalHeader>Crop Image</ModalHeader>
         <ModalBody px={4} pb={4} pt={0}>
-          <EditorContainer editor={state.editor} onApplyCrop={state.onApplyCrop} onReady={state.onReady} />
+          <CropImageEditor editor={state.editor} onApplyCrop={state.onApplyCrop} onReady={state.onReady} />
         </ModalBody>
       </ModalContent>
     </Modal>
   );
-};
+});
+
+CropImageModal.displayName = 'CropImageModal';

invokeai/frontend/web/src/features/editImageModal/lib/editor.ts renamed to invokeai/frontend/web/src/features/cropper/lib/editor.ts

@@ -0,0 +1,26 @@
+import type { Editor } from 'features/cropper/lib/editor';
+import { atom } from 'nanostores';
+
+export type CropImageModalState = {
+  editor: Editor;
+  onApplyCrop: () => Promise<void> | void;
+  onReady: () => Promise<void> | void;
+};
+
+const $state = atom<CropImageModalState | null>(null);
+
+const open = (state: CropImageModalState) => {
+  $state.set(state);
+};
+
+const close = () => {
+  const state = $state.get();
+  state?.editor.destroy();
+  $state.set(null);
+};
+
+export const cropImageModalApi = {
+  $state,
+  open,
+  close,
+};

invokeai/frontend/web/src/features/cropper/store/index.ts

@@ -4,12 +4,12 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
 import { ASPECT_RATIO_MAP } from 'features/controlLayers/store/types';
 import { imageDTOToCroppableImage, imageDTOToImageWithDims } from 'features/controlLayers/store/util';
+import { Editor } from 'features/cropper/lib/editor';
+import { cropImageModalApi } from 'features/cropper/store';
 import { videoFrameFromImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { DndImage } from 'features/dnd/DndImage';
 import { DndImageIcon, imageButtonSx } from 'features/dnd/DndImageIcon';
-import { Editor } from 'features/editImageModal/lib/editor';
-import { openEditImageModal } from 'features/editImageModal/store';
 import {
   selectStartingFrameImage,
   selectVideoAspectRatio,
@@ -93,7 +93,7 @@ export const StartingFrameImage = () => {
       await editor.loadImage(originalImageDTO.image_url, initial);
     };
 
-    openEditImageModal({ editor, onApplyCrop, onReady });
+    cropImageModalApi.open({ editor, onApplyCrop, onReady });
   }, [dispatch, originalImageDTO, startingFrameImage?.crop, uploadImage]);
 
   const fitsCurrentAspectRatio = useMemo(() => {