refactor(ui): remove "apply", "start" and "cancel" concepts from editor

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -104,6 +104,7 @@
         "copy": "Copy",
         "copyError": "$t(gallery.copy) Error",
         "clipboard": "Clipboard",
+        "crop": "Crop",
         "on": "On",
         "off": "Off",
         "or": "or",

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -43,7 +43,7 @@ const zCropBox = z.object({
   width: z.number().int().positive(),
   height: z.number().int().positive(),
 });
-export const zCroppableImage = z.object({
+export const zCroppableImageWithDims = z.object({
   original: zImageWithDims,
   crop: z
     .object({
@@ -53,7 +53,7 @@ export const zCroppableImage = z.object({
     })
     .optional(),
 });
-export type CroppableImageWithDims = z.infer<typeof zCroppableImage>;
+export type CroppableImageWithDims = z.infer<typeof zCroppableImageWithDims>;
 
 const zImageWithDimsDataURL = z.object({
   dataURL: z.string(),

invokeai/frontend/web/src/features/dnd/DndImage.tsx

@@ -9,10 +9,8 @@ import { singleImageDndSource } from 'features/dnd/dnd';
 import type { DndDragPreviewSingleImageState } from 'features/dnd/DndDragPreviewSingleImage';
 import { createSingleImageDragPreview, setSingleImageDragPreview } from 'features/dnd/DndDragPreviewSingleImage';
 import { firefoxDndFix } from 'features/dnd/util';
-import { Editor } from 'features/editImageModal/lib/editor';
-import { openEditImageModal } from 'features/editImageModal/store';
 import { useImageContextMenu } from 'features/gallery/components/ContextMenu/ImageContextMenu';
-import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
 const sx = {
@@ -28,14 +26,12 @@ const sx = {
 type Props = {
   imageDTO: ImageDTO;
   asThumbnail?: boolean;
-  editable?: boolean;
 } & ImageProps;
 
 export const DndImage = memo(
-  forwardRef(({ imageDTO, asThumbnail, editable, ...rest }: Props, forwardedRef) => {
+  forwardRef(({ imageDTO, asThumbnail, ...rest }: Props, forwardedRef) => {
     const store = useAppStore();
     const crossOrigin = useStore($crossOrigin);
-    const [previewDataURL, setPreviewDataURl] = useState<string | null>(null);
 
     const [isDragging, setIsDragging] = useState(false);
     const ref = useRef<HTMLImageElement>(null);
@@ -73,32 +69,18 @@ export const DndImage = memo(
 
     useImageContextMenu(imageDTO, ref);
 
-    const edit = useCallback(() => {
-      if (!editable) {
-        return;
-      }
-
-      const editor = new Editor();
-      editor.onCropApply(async () => {
-        const previewDataURL = await editor.exportImage('dataURL', { withCropOverlay: true });
-        setPreviewDataURl(previewDataURL);
-      });
-      openEditImageModal(imageDTO.image_name, editor);
-    }, [editable, imageDTO.image_name]);
-
     return (
       <>
         <Image
           role="button"
           ref={ref}
-          src={previewDataURL ?? (asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url)}
+          src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
           fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url}
           width={imageDTO.width}
           height={imageDTO.height}
           sx={sx}
           data-is-dragging={isDragging}
           crossOrigin={!asThumbnail ? crossOrigin : undefined}
-          onClick={edit}
           {...rest}
         />
         {dragPreviewState?.type === 'single-image' ? createSingleImageDragPreview(dragPreviewState) : null}

invokeai/frontend/web/src/features/editImageModal/components/EditImageModal.tsx

@@ -7,13 +7,17 @@ import { EditorContainer } from './EditorContainer';
 export const EditImageModal = () => {
   const state = useStore($editImageModalState);
 
+  if (!state) {
+    return null;
+  }
+
   return (
-    <Modal isOpen={state.isOpen} onClose={closeEditImageModal} isCentered useInert={false} size="full">
+    <Modal isOpen={true} onClose={closeEditImageModal} isCentered useInert={false} size="full">
       <ModalOverlay />
       <ModalContent minH="unset" minW="unset" maxH="90vh" maxW="90vw" w="full" h="full" borderRadius="base">
-        <ModalHeader>Edit Image</ModalHeader>
+        <ModalHeader>Crop Image</ModalHeader>
         <ModalBody px={4} pb={4} pt={0}>
-          {state.isOpen && <EditorContainer editor={state.editor} imageName={state.imageName} />}
+          <EditorContainer editor={state.editor} onApplyCrop={state.onApplyCrop} onReady={state.onReady} />
         </ModalBody>
       </ModalContent>
     </Modal>

invokeai/frontend/web/src/features/editImageModal/components/EditorContainer.tsx

@@ -1,12 +1,15 @@
 import { Button, Divider, Flex, Select, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import type { CropBox, Editor } from 'features/editImageModal/lib/editor';
+import type { CropBox } from 'features/editImageModal/lib/editor';
+import { closeEditImageModal, type EditImageModalState } from 'features/editImageModal/store';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
 
 type Props = {
-  editor: Editor;
+  editor: EditImageModalState['editor'];
+  onApplyCrop: EditImageModalState['onApplyCrop'];
+  onReady: EditImageModalState['onReady'];
 };
 
 const CROP_ASPECT_RATIO_MAP: Record<string, number> = {
@@ -19,7 +22,7 @@ const CROP_ASPECT_RATIO_MAP: Record<string, number> = {
   '9:16': 9 / 16,
 };
 
-export const getAspectRatioString = (ratio: number | null) => {
+const getAspectRatioString = (ratio: number | null) => {
   if (!ratio) {
     return 'free';
   }
@@ -32,53 +35,32 @@ export const getAspectRatioString = (ratio: number | null) => {
   return 'free';
 };
 
-export const EditorContainer = ({ editor }: Props) => {
+export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [zoom, setZoom] = useState(100);
-  const [cropInProgress, setCropInProgress] = useState(false);
   const [cropBox, setCropBox] = useState<CropBox | null>(null);
-  const [cropApplied, setCropApplied] = useState(false);
   const [aspectRatio, setAspectRatio] = useState<string>('free');
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
 
   const [uploadImage] = useUploadImageMutation({ fixedCacheKey: 'editorContainer' });
 
   const setup = useCallback(
-    (container: HTMLDivElement) => {
+    async (container: HTMLDivElement) => {
       editor.init(container);
       editor.onZoomChange((zoom) => {
         setZoom(zoom);
       });
-      editor.onCropStart(() => {
-        setCropInProgress(true);
-        setCropBox(null);
-      });
       editor.onCropBoxChange((crop) => {
         setCropBox(crop);
       });
-      editor.onCropApply(() => {
-        setCropApplied(true);
-        setCropInProgress(false);
-        setCropBox(null);
-      });
       editor.onCropReset(() => {
-        setCropApplied(true);
-        setCropInProgress(false);
         setCropBox(null);
       });
-      editor.onCropCancel(() => {
-        setCropInProgress(false);
-        setCropBox(null);
-      });
-      editor.onImageLoad(() => {
-        // setCropInfo('');
-        // setIsCropping(false);
-        // setHasCropBbox(false);
-      });
       setAspectRatio(getAspectRatioString(editor.getCropAspectRatio()));
+      await onReady();
       editor.fitToContainer();
     },
-    [editor]
+    [editor, onReady]
   );
 
   useEffect(() => {
@@ -98,14 +80,6 @@ export const EditorContainer = ({ editor }: Props) => {
     };
   }, [editor, setup]);
 
-  const handleStartCrop = useCallback(() => {
-    editor.startCrop();
-    // Apply current aspect ratio if not free
-    if (aspectRatio !== 'free') {
-      editor.setCropAspectRatio(CROP_ASPECT_RATIO_MAP[aspectRatio] ?? null);
-    }
-  }, [aspectRatio, editor]);
-
   const handleAspectRatioChange = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       const newRatio = e.target.value;
@@ -120,18 +94,19 @@ export const EditorContainer = ({ editor }: Props) => {
     [editor]
   );
 
-  const handleApplyCrop = useCallback(() => {
-    editor.applyCrop();
-  }, [editor]);
-
-  const handleCancelCrop = useCallback(() => {
-    editor.cancelCrop();
-  }, [editor]);
-
   const handleResetCrop = useCallback(() => {
     editor.resetCrop();
   }, [editor]);
 
+  const handleApplyCrop = useCallback(async () => {
+    await onApplyCrop();
+    closeEditImageModal();
+  }, [onApplyCrop]);
+
+  const handleCancelCrop = useCallback(() => {
+    closeEditImageModal();
+  }, []);
+
   const handleExport = useCallback(async () => {
     try {
       const blob = await editor.exportImage('blob');
@@ -144,7 +119,6 @@ export const EditorContainer = ({ editor }: Props) => {
         board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
       }).unwrap();
     } catch (err) {
-      console.error('Export failed:', err);
       if (err instanceof Error && err.message.includes('tainted')) {
         alert(
           'Cannot export image: The image is from a different domain (CORS issue). To fix this:\n\n1. Load images from the same domain\n2. Use images from CORS-enabled sources\n3. Upload a local image file instead'
@@ -174,23 +148,19 @@ export const EditorContainer = ({ editor }: Props) => {
   return (
     <Flex w="full" h="full" flexDir="column" gap={4}>
       <Flex gap={2}>
-        {!cropInProgress && <Button onClick={handleStartCrop}>Start Crop</Button>}
-        {cropApplied && <Button onClick={handleResetCrop}>Reset Crop</Button>}
-        {cropInProgress && (
-          <>
-            <Select value={aspectRatio} onChange={handleAspectRatioChange}>
-              <option value="free">Free</option>
-              <option value="1:1">1:1 (Square)</option>
-              <option value="4:3">4:3</option>
-              <option value="16:9">16:9</option>
-              <option value="3:2">3:2</option>
-              <option value="2:3">2:3 (Portrait)</option>
-              <option value="9:16">9:16 (Portrait)</option>
-            </Select>
-            <Button onClick={handleApplyCrop}>Apply Crop</Button>
-            <Button onClick={handleCancelCrop}>Cancel Crop</Button>
-          </>
-        )}
+        {cropBox && <Button onClick={handleResetCrop}>Reset Crop</Button>}
+        <Select value={aspectRatio} onChange={handleAspectRatioChange} w={64}>
+          <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="3:4">3:4</option>
+          <option value="2:3">2:3 (Portrait)</option>
+          <option value="9:16">9:16 (Portrait)</option>
+        </Select>
+        <Button onClick={handleApplyCrop}>Apply Crop</Button>
+        <Button onClick={handleCancelCrop}>Cancel Crop</Button>
 
         <Button onClick={fitToContainer}>Fit</Button>
         <Button onClick={resetView}>Reset View</Button>
@@ -208,13 +178,9 @@ export const EditorContainer = ({ editor }: Props) => {
         <Text>Mouse wheel: Zoom</Text>
         <Divider orientation="vertical" />
         <Text>Space + Drag: Pan</Text>
-        {cropInProgress && (
-          <>
-            <Divider orientation="vertical" />
-            <Text>Drag crop box or handles to adjust</Text>
-          </>
-        )}
-        {cropInProgress && cropBox && (
+        <Divider orientation="vertical" />
+        <Text>Drag crop box or handles to adjust</Text>
+        {cropBox && (
           <>
             <Divider orientation="vertical" />
             <Text>