fix(ui): store floats for box

Author: psychedelicious

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

@@ -38,10 +38,10 @@ export const zImageWithDims = z.object({
 export type ImageWithDims = z.infer<typeof zImageWithDims>;
 
 const zCropBox = z.object({
-  x: z.number().int().min(0),
-  y: z.number().int().min(0),
-  width: z.number().int().positive(),
-  height: z.number().int().positive(),
+  x: z.number().min(0),
+  y: z.number().min(0),
+  width: z.number().positive(),
+  height: z.number().positive(),
 });
 export const zCroppableImageWithDims = z.object({
   original: zImageWithDims,

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

@@ -1,4 +1,14 @@
-import { Button, Divider, Flex, Select, Spacer, Text } from '@invoke-ai/ui-library';
+import {
+  Button,
+  ButtonGroup,
+  Divider,
+  Flex,
+  FormControl,
+  FormLabel,
+  Select,
+  Spacer,
+  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';
@@ -53,9 +63,6 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
       editor.onCropBoxChange((crop) => {
         setCropBox(crop);
       });
-      editor.onCropReset(() => {
-        setCropBox(null);
-      });
       setAspectRatio(getAspectRatioString(editor.getCropAspectRatio()));
       await onReady();
       editor.fitToContainer();
@@ -147,27 +154,38 @@ export const EditorContainer = ({ editor, onApplyCrop, onReady }: Props) => {
 
   return (
     <Flex w="full" h="full" flexDir="column" gap={4}>
-      <Flex gap={2}>
-        {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>
-        <Button onClick={zoomIn}>Zoom In</Button>
-        <Button onClick={zoomOut}>Zoom Out</Button>
-
-        <Button onClick={handleExport}>Export</Button>
+      <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>
+            <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>
+        </FormControl>
+
+        <Spacer />
+
+        <ButtonGroup size="sm" isAttached={false}>
+          <Button onClick={fitToContainer}>Fit View</Button>
+          <Button onClick={resetView}>Reset View</Button>
+          <Button onClick={zoomIn}>Zoom In</Button>
+          <Button onClick={zoomOut}>Zoom Out</Button>
+        </ButtonGroup>
+
+        <Spacer />
+
+        <ButtonGroup size="sm" isAttached={false}>
+          <Button onClick={handleApplyCrop}>Apply</Button>
+          <Button onClick={handleResetCrop}>Reset</Button>
+          <Button onClick={handleCancelCrop}>Cancel</Button>
+          <Button onClick={handleExport}>Export</Button>
+        </ButtonGroup>
       </Flex>
 
       <Flex position="relative" w="full" h="full" bg="base.900">

invokeai/frontend/web/src/features/editImageModal/lib/editor.ts

@@ -19,13 +19,9 @@ export type CropBox = {
  */
 type EditorCallbacks = {
   onCropBoxChange: Set<(crop: Readonly<CropBox>) => void>;
-  onCropReset: Set<() => void>;
   onZoomChange: Set<(zoom: number) => void>;
-  onImageLoad: Set<() => void>;
 };
 
-type SetElement<T> = T extends Set<infer U> ? U : never;
-
 /**
  * Crop box resize handle names.
  */
@@ -183,9 +179,7 @@ export class Editor {
 
   private callbacks: EditorCallbacks = {
     onCropBoxChange: new Set(),
-    onCropReset: new Set(),
     onZoomChange: new Set(),
-    onImageLoad: new Set(),
   };
 
   private cropBox: CropBox | null = null;
@@ -603,7 +597,9 @@ export class Editor {
     this.updateKonvaCropInteractionRect();
     this.updateKonvaCropInteractionGuides();
     this.updateKonvaCropInteractionHandlePositions();
-    this._invokeCallbacks('onCropBoxChange', cropBox);
+    for (const cb of this.callbacks.onCropBoxChange) {
+      cb(cropBox);
+    }
   };
 
   /**
@@ -1007,7 +1003,9 @@ export class Editor {
     // Update handle scaling to maintain constant screen size
     this.updateKonvaCropInteractionHandleScales();
     this.updateKonvaBg();
-    this._invokeCallbacks('onZoomChange', newScale);
+    for (const cb of this.callbacks.onZoomChange) {
+      cb(newScale);
+    }
   };
 
   /**
@@ -1103,7 +1101,6 @@ export class Editor {
       img.onload = () => {
         this.originalImage = img;
         this.updateImage(initial);
-        this._invokeCallbacks('onImageLoad');
         resolve();
       };
 
@@ -1119,14 +1116,14 @@ export class Editor {
    * Reset the crop box to encompass the entire image.
    */
   resetCrop = () => {
-    if (this.konva?.image.image) {
-      this.updateCropBox({
-        x: 0,
-        y: 0,
-        ...this.konva.image.image.size(),
-      });
+    if (!this.konva?.image.image) {
+      return;
     }
-    this._invokeCallbacks('onCropReset');
+    this.updateCropBox({
+      x: 0,
+      y: 0,
+      ...this.konva.image.image.size(),
+    });
   };
 
   /**
@@ -1276,7 +1273,9 @@ export class Editor {
 
     this.updateKonvaBg();
 
-    this._invokeCallbacks('onZoomChange', scale);
+    for (const cb of this.callbacks.onZoomChange) {
+      cb(scale);
+    }
   };
 
   /**
@@ -1330,7 +1329,9 @@ export class Editor {
 
     this.updateKonvaBg();
 
-    this._invokeCallbacks('onZoomChange', 1);
+    for (const cb of this.callbacks.onZoomChange) {
+      cb(1);
+    }
   };
 
   /**
@@ -1366,7 +1367,9 @@ export class Editor {
 
     this.updateKonvaBg();
 
-    this._invokeCallbacks('onZoomChange', scale);
+    for (const cb of this.callbacks.onZoomChange) {
+      cb(scale);
+    }
   };
 
   /**
@@ -1476,56 +1479,24 @@ export class Editor {
   };
 
   /**
-   * Helper to build a callback registrar function for a specific event name.
-   * @param name The callback event name.
+   * Register a callback for when the crop box changes (moved or resized).
    */
-  _buildCallbackRegistrar = <T extends keyof EditorCallbacks>(name: T) => {
-    return (cb: SetElement<EditorCallbacks[T]>): (() => void) => {
-      (this.callbacks[name] as Set<typeof cb>).add(cb);
-      return () => {
-        (this.callbacks[name] as Set<typeof cb>).delete(cb);
-      };
+  onCropBoxChange = (cb: (crop: Readonly<CropBox>) => void): (() => void) => {
+    this.callbacks.onCropBoxChange.add(cb);
+    return () => {
+      this.callbacks.onCropBoxChange.delete(cb);
     };
   };
 
-  /**
-   * Invoke all callbacks registered for a specific event.
-   * @param name The callback event name.
-   * @param args The arguments to pass to each callback.
-   */
-  private _invokeCallbacks = <T extends keyof EditorCallbacks>(
-    name: T,
-    ...args: EditorCallbacks[T] extends Set<(...args: infer P) => void> ? P : never
-  ): void => {
-    const callbacks = this.callbacks[name];
-    if (callbacks && callbacks.size > 0) {
-      callbacks.forEach((cb) => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (cb as (...args: any[]) => void)(...args);
-      });
-    }
-  };
-
-  /**
-   * Register a callback for when the crop is reset.
-   */
-  onCropReset = this._buildCallbackRegistrar('onCropReset');
-
-  /**
-   * Register a callback for when the crop box changes (moved or resized).
-   */
-  onCropBoxChange = this._buildCallbackRegistrar('onCropBoxChange');
-
-  /**
-   * Register a callback for when a new image is loaded.
-   */
-  onImageLoad = this._buildCallbackRegistrar('onImageLoad');
-
   /**
    * Register a callback for when the zoom level changes.
    */
-  onZoomChange = this._buildCallbackRegistrar('onZoomChange');
-
+  onZoomChange = (cb: (zoom: number) => void): (() => void) => {
+    this.callbacks.onZoomChange.add(cb);
+    return () => {
+      this.callbacks.onZoomChange.delete(cb);
+    };
+  };
   /**
    * Resize the editor container and adjust the Konva stage accordingly.
    *