feat(ui): support reset canvas view when no image on canvas

invokeai/frontend/web/src/common/hooks/useSingleAndDoubleClick.ts

@@ -1,27 +1,33 @@
 // https://stackoverflow.com/a/73731908
 import { useCallback, useEffect, useState } from 'react';
 
-export function useSingleAndDoubleClick(
+export type UseSingleAndDoubleClickOptions = {
-  handleSingleClick: () => void,
+  onSingleClick: () => void;
-  handleDoubleClick: () => void,
+  onDoubleClick: () => void;
-  delay = 250
+  latency?: number;
-) {
+};
+
+export function useSingleAndDoubleClick({
+  onSingleClick,
+  onDoubleClick,
+  latency = 250,
+}: UseSingleAndDoubleClickOptions): () => void {
   const [click, setClick] = useState(0);
 
   useEffect(() => {
     const timer = setTimeout(() => {
       if (click === 1) {
-        handleSingleClick();
+        onSingleClick();
       }
       setClick(0);
-    }, delay);
+    }, latency);
 
     if (click === 2) {
-      handleDoubleClick();
+      onDoubleClick();
     }
 
     return () => clearTimeout(timer);
-  }, [click, handleSingleClick, handleDoubleClick, delay]);
+  }, [click, onDoubleClick, latency, onSingleClick]);
 
   const onClick = useCallback(() => setClick((prev) => prev + 1), []);
 

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

@@ -15,7 +15,7 @@ import {
   canvasMerged,
   canvasSavedToGallery,
 } from 'features/canvas/store/actions';
-import { $canvasBaseLayer,$tool  } from 'features/canvas/store/canvasNanostore';
+import { $canvasBaseLayer, $tool } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import {
   resetCanvas,
@@ -135,26 +135,35 @@ const IAICanvasToolbar = () => {
     $tool.set('move');
   }, []);
 
-  const handleClickResetCanvasView = useSingleAndDoubleClick(
+  const handleResetCanvasView = useCallback(
-    () => handleResetCanvasView(false),
+    (shouldScaleTo1 = false) => {
-    () => handleResetCanvasView(true)
+      const canvasBaseLayer = $canvasBaseLayer.get();
+      if (!canvasBaseLayer) {
+        return;
+      }
+      const clientRect = canvasBaseLayer.getClientRect({
+        skipTransform: true,
+      });
+      dispatch(
+        resetCanvasView({
+          contentRect: clientRect,
+          shouldScaleTo1,
+        })
+      );
+    },
+    [dispatch]
   );
+  const onSingleClick = useCallback(() => {
+    handleResetCanvasView(false);
+  }, [handleResetCanvasView]);
+  const onDoubleClick = useCallback(() => {
+    handleResetCanvasView(true);
+  }, [handleResetCanvasView]);
 
-  const handleResetCanvasView = (shouldScaleTo1 = false) => {
+  const handleClickResetCanvasView = useSingleAndDoubleClick({
-    const canvasBaseLayer = $canvasBaseLayer.get();
+    onSingleClick,
-    if (!canvasBaseLayer) {
+    onDoubleClick,
-      return;
+  });
-    }
-    const clientRect = canvasBaseLayer.getClientRect({
-      skipTransform: true,
-    });
-    dispatch(
-      resetCanvasView({
-        contentRect: clientRect,
-        shouldScaleTo1,
-      })
-    );
-  };
 
   const handleResetCanvas = useCallback(() => {
     dispatch(resetCanvas());

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -488,32 +488,28 @@ export const canvasSlice = createSlice({
         stageDimensions: { width: stageWidth, height: stageHeight },
       } = state;
 
-      const { x, y, width, height } = contentRect;
+      const newScale = shouldScaleTo1
+        ? 1
+        : calculateScale(
+            stageWidth,
+            stageHeight,
+            contentRect.width || state.boundingBoxDimensions.width,
+            contentRect.height || state.boundingBoxDimensions.height,
+            STAGE_PADDING_PERCENTAGE
+          );
 
-      if (width !== 0 && height !== 0) {
+      const newCoordinates = calculateCoordinates(
-        const newScale = shouldScaleTo1
+        stageWidth,
-          ? 1
+        stageHeight,
-          : calculateScale(
+        contentRect.x || state.boundingBoxCoordinates.x,
-              stageWidth,
+        contentRect.y || state.boundingBoxCoordinates.y,
-              stageHeight,
+        contentRect.width || state.boundingBoxDimensions.width,
-              width,
+        contentRect.height || state.boundingBoxDimensions.height,
-              height,
+        newScale
-              STAGE_PADDING_PERCENTAGE
+      );
-            );
 
-        const newCoordinates = calculateCoordinates(
+      state.stageScale = newScale;
-          stageWidth,
+      state.stageCoordinates = newCoordinates;
-          stageHeight,
-          x,
-          y,
-          width,
-          height,
-          newScale
-        );
-
-        state.stageScale = newScale;
-        state.stageCoordinates = newCoordinates;
-      }
     },
     nextStagingAreaImage: (state) => {
       if (!state.layerState.stagingArea.images.length) {