chore(ui): remove cruft related to old canvas scaling method

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

@@ -1,91 +0,0 @@
-import { Flex, Spinner } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  canvasSelector,
-  initialCanvasImageSelector,
-} from 'features/canvas/store/canvasSelectors';
-import {
-  resizeAndScaleCanvas,
-  resizeCanvas,
-  setCanvasContainerDimensions,
-  setDoesCanvasNeedScaling,
-} from 'features/canvas/store/canvasSlice';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useLayoutEffect, useRef } from 'react';
-
-const canvasResizerSelector = createSelector(
-  canvasSelector,
-  initialCanvasImageSelector,
-  activeTabNameSelector,
-  (canvas, initialCanvasImage, activeTabName) => {
-    const { doesCanvasNeedScaling, isCanvasInitialized } = canvas;
-    return {
-      doesCanvasNeedScaling,
-      activeTabName,
-      initialCanvasImage,
-      isCanvasInitialized,
-    };
-  }
-);
-
-const IAICanvasResizer = () => {
-  const dispatch = useAppDispatch();
-  const {
-    doesCanvasNeedScaling,
-    activeTabName,
-    initialCanvasImage,
-    isCanvasInitialized,
-  } = useAppSelector(canvasResizerSelector);
-
-  const ref = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    window.setTimeout(() => {
-      if (!ref.current) {
-        return;
-      }
-
-      const { clientWidth, clientHeight } = ref.current;
-
-      dispatch(
-        setCanvasContainerDimensions({
-          width: clientWidth,
-          height: clientHeight,
-        })
-      );
-
-      if (!isCanvasInitialized) {
-        dispatch(resizeAndScaleCanvas());
-      } else {
-        dispatch(resizeCanvas());
-      }
-
-      dispatch(setDoesCanvasNeedScaling(false));
-    }, 0);
-  }, [
-    dispatch,
-    initialCanvasImage,
-    doesCanvasNeedScaling,
-    activeTabName,
-    isCanvasInitialized,
-  ]);
-
-  return (
-    <Flex
-      ref={ref}
-      sx={{
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 4,
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <Spinner thickness="2px" size="xl" />
-    </Flex>
-  );
-};
-
-export default memo(IAICanvasResizer);

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

@@ -18,7 +18,6 @@ import {
 import {
   resetCanvas,
   resetCanvasView,
-  resizeAndScaleCanvas,
   setIsMaskEnabled,
   setLayer,
   setTool,
@@ -183,7 +182,6 @@ const IAICanvasToolbar = () => {
 
   const handleResetCanvas = () => {
     dispatch(resetCanvas());
-    dispatch(resizeAndScaleCanvas());
   };
 
   const handleMergeVisible = () => {

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

@@ -3,8 +3,4 @@ import { CanvasState } from './canvasTypes';
 /**
  * Canvas slice persist denylist
  */
-export const canvasPersistDenylist: (keyof CanvasState)[] = [
+export const canvasPersistDenylist: (keyof CanvasState)[] = ['cursorPosition'];
-  'cursorPosition',
-  'isCanvasInitialized',
-  'doesCanvasNeedScaling',
-];

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

@@ -5,10 +5,6 @@ import {
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
 import { setAspectRatio } from 'features/parameters/store/generationSlice';
-import {
-  setActiveTab,
-  setShouldUseCanvasBetaLayout,
-} from 'features/ui/store/uiSlice';
 import { IRect, Vector2d } from 'konva/lib/types';
 import { clamp, cloneDeep } from 'lodash-es';
 import { RgbaColor } from 'react-colorful';
@@ -50,12 +46,9 @@ export const initialCanvasState: CanvasState = {
   boundingBoxScaleMethod: 'none',
   brushColor: { r: 90, g: 90, b: 255, a: 1 },
   brushSize: 50,
-  canvasContainerDimensions: { width: 0, height: 0 },
   colorPickerColor: { r: 90, g: 90, b: 255, a: 1 },
   cursorPosition: null,
-  doesCanvasNeedScaling: false,
   futureLayerStates: [],
-  isCanvasInitialized: false,
   isDrawing: false,
   isMaskEnabled: true,
   isMouseOverBoundingBox: false,
@@ -208,7 +201,6 @@ export const canvasSlice = createSlice({
       };
       state.futureLayerStates = [];
 
-      state.isCanvasInitialized = false;
       const newScale = calculateScale(
         stageDimensions.width,
         stageDimensions.height,
@@ -228,7 +220,6 @@ export const canvasSlice = createSlice({
       );
       state.stageScale = newScale;
       state.stageCoordinates = newCoordinates;
-      state.doesCanvasNeedScaling = true;
     },
     setBoundingBoxDimensions: (state, action: PayloadAction<Dimensions>) => {
       const newDimensions = roundDimensionsTo64(action.payload);
@@ -258,9 +249,6 @@ export const canvasSlice = createSlice({
     setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => {
       state.boundingBoxPreviewFill = action.payload;
     },
-    setDoesCanvasNeedScaling: (state, action: PayloadAction<boolean>) => {
-      state.doesCanvasNeedScaling = action.payload;
-    },
     setStageScale: (state, action: PayloadAction<number>) => {
       state.stageScale = action.payload;
     },
@@ -493,136 +481,6 @@ export const canvasSlice = createSlice({
       state.layerState = initialLayerState;
       state.futureLayerStates = [];
     },
-    setCanvasContainerDimensions: (
-      state,
-      action: PayloadAction<Dimensions>
-    ) => {
-      state.canvasContainerDimensions = action.payload;
-    },
-    resizeAndScaleCanvas: (state) => {
-      const { width: containerWidth, height: containerHeight } =
-        state.canvasContainerDimensions;
-
-      const initialCanvasImage =
-        state.layerState.objects.find(isCanvasBaseImage);
-
-      const newStageDimensions = {
-        width: Math.floor(containerWidth),
-        height: Math.floor(containerHeight),
-      };
-
-      if (!initialCanvasImage) {
-        const newScale = calculateScale(
-          newStageDimensions.width,
-          newStageDimensions.height,
-          512,
-          512,
-          STAGE_PADDING_PERCENTAGE
-        );
-
-        const newCoordinates = calculateCoordinates(
-          newStageDimensions.width,
-          newStageDimensions.height,
-          0,
-          0,
-          512,
-          512,
-          newScale
-        );
-
-        const newBoundingBoxDimensions = { width: 512, height: 512 };
-
-        state.stageScale = newScale;
-        state.stageCoordinates = newCoordinates;
-        state.stageDimensions = newStageDimensions;
-        state.boundingBoxCoordinates = { x: 0, y: 0 };
-        state.boundingBoxDimensions = newBoundingBoxDimensions;
-
-        if (state.boundingBoxScaleMethod === 'auto') {
-          const scaledDimensions = getScaledBoundingBoxDimensions(
-            newBoundingBoxDimensions
-          );
-          state.scaledBoundingBoxDimensions = scaledDimensions;
-        }
-
-        return;
-      }
-
-      const { width: imageWidth, height: imageHeight } = initialCanvasImage;
-
-      const padding = 0.95;
-
-      const newScale = calculateScale(
-        containerWidth,
-        containerHeight,
-        imageWidth,
-        imageHeight,
-        padding
-      );
-
-      const newCoordinates = calculateCoordinates(
-        newStageDimensions.width,
-        newStageDimensions.height,
-        0,
-        0,
-        imageWidth,
-        imageHeight,
-        newScale
-      );
-
-      state.minimumStageScale = newScale;
-      state.stageScale = newScale;
-      state.stageCoordinates = floorCoordinates(newCoordinates);
-      state.stageDimensions = newStageDimensions;
-
-      state.isCanvasInitialized = true;
-    },
-    resizeCanvas: (state) => {
-      const { width: containerWidth, height: containerHeight } =
-        state.canvasContainerDimensions;
-
-      const newStageDimensions = {
-        width: Math.floor(containerWidth),
-        height: Math.floor(containerHeight),
-      };
-
-      state.stageDimensions = newStageDimensions;
-
-      if (!state.layerState.objects.find(isCanvasBaseImage)) {
-        const newScale = calculateScale(
-          newStageDimensions.width,
-          newStageDimensions.height,
-          512,
-          512,
-          STAGE_PADDING_PERCENTAGE
-        );
-
-        const newCoordinates = calculateCoordinates(
-          newStageDimensions.width,
-          newStageDimensions.height,
-          0,
-          0,
-          512,
-          512,
-          newScale
-        );
-
-        const newBoundingBoxDimensions = { width: 512, height: 512 };
-
-        state.stageScale = newScale;
-
-        state.stageCoordinates = newCoordinates;
-        state.boundingBoxCoordinates = { x: 0, y: 0 };
-        state.boundingBoxDimensions = newBoundingBoxDimensions;
-
-        if (state.boundingBoxScaleMethod === 'auto') {
-          const scaledDimensions = getScaledBoundingBoxDimensions(
-            newBoundingBoxDimensions
-          );
-          state.scaledBoundingBoxDimensions = scaledDimensions;
-        }
-      }
-    },
     canvasResized: (
       state,
       action: PayloadAction<{ width: number; height: number }>
@@ -923,14 +781,6 @@ export const canvasSlice = createSlice({
         state.layerState.stagingArea = initialLayerState.stagingArea;
       }
     });
-
-    builder.addCase(setShouldUseCanvasBetaLayout, (state) => {
-      state.doesCanvasNeedScaling = true;
-    });
-
-    builder.addCase(setActiveTab, (state) => {
-      state.doesCanvasNeedScaling = true;
-    });
     builder.addCase(setAspectRatio, (state, action) => {
       const ratio = action.payload;
       if (ratio) {
@@ -962,8 +812,6 @@ export const {
   resetCanvas,
   resetCanvasInteractionState,
   resetCanvasView,
-  resizeAndScaleCanvas,
-  resizeCanvas,
   setBoundingBoxCoordinates,
   setBoundingBoxDimensions,
   setBoundingBoxPreviewFill,
@@ -971,10 +819,8 @@ export const {
   flipBoundingBoxAxes,
   setBrushColor,
   setBrushSize,
-  setCanvasContainerDimensions,
   setColorPickerColor,
   setCursorPosition,
-  setDoesCanvasNeedScaling,
   setInitialCanvasImage,
   setIsDrawing,
   setIsMaskEnabled,

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

@@ -126,12 +126,9 @@ export interface CanvasState {
   boundingBoxScaleMethod: BoundingBoxScale;
   brushColor: RgbaColor;
   brushSize: number;
-  canvasContainerDimensions: Dimensions;
   colorPickerColor: RgbaColor;
   cursorPosition: Vector2d | null;
-  doesCanvasNeedScaling: boolean;
   futureLayerStates: CanvasLayerState[];
-  isCanvasInitialized: boolean;
   isDrawing: boolean;
   isMaskEnabled: boolean;
   isMouseOverBoundingBox: boolean;

invokeai/frontend/web/src/features/canvas/store/thunks/requestCanvasScale.ts

@@ -1,16 +0,0 @@
-import { AppDispatch, AppGetState } from 'app/store/store';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { debounce } from 'lodash-es';
-import { setDoesCanvasNeedScaling } from '../canvasSlice';
-
-const debouncedCanvasScale = debounce((dispatch: AppDispatch) => {
-  dispatch(setDoesCanvasNeedScaling(true));
-}, 300);
-
-export const requestCanvasRescale =
-  () => (dispatch: AppDispatch, getState: AppGetState) => {
-    const activeTabName = activeTabNameSelector(getState());
-    if (activeTabName === 'unifiedCanvas') {
-      debouncedCanvasScale(dispatch);
-    }
-  };

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

@@ -2,10 +2,7 @@ import { MenuItem } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch } from 'app/store/storeHooks';
-import {
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
-  resizeAndScaleCanvas,
-  setInitialCanvasImage,
-} from 'features/canvas/store/canvasSlice';
 import {
   imagesToChangeSelected,
   isModalOpenChanged,
@@ -29,6 +26,7 @@ import {
   FaShare,
   FaTrash,
 } from 'react-icons/fa';
+import { MdStar, MdStarBorder } from 'react-icons/md';
 import {
   useGetImageMetadataQuery,
   useStarImagesMutation,
@@ -37,7 +35,6 @@ import {
 import { ImageDTO } from 'services/api/types';
 import { useDebounce } from 'use-debounce';
 import { sentImageToCanvas, sentImageToImg2Img } from '../../store/actions';
-import { MdStar, MdStarBorder } from 'react-icons/md';
 
 type SingleSelectionMenuItemsProps = {
   imageDTO: ImageDTO;
@@ -110,7 +107,6 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const handleSendToCanvas = useCallback(() => {
     dispatch(sentImageToCanvas());
     dispatch(setInitialCanvasImage(imageDTO));
-    dispatch(resizeAndScaleCanvas());
     dispatch(setActiveTab('unifiedCanvas'));
 
     toaster({

invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx

@@ -1,8 +1,6 @@
 import { Flex } from '@chakra-ui/layout';
 import { Portal } from '@chakra-ui/portal';
-import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { RefObject, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdPhotoLibrary } from 'react-icons/md';
@@ -18,11 +16,9 @@ const FloatingGalleryButton = ({
   galleryPanelRef,
 }: Props) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
   const handleShowGallery = () => {
     galleryPanelRef.current?.expand();
-    dispatch(requestCanvasRescale());
   };
 
   if (!isGalleryCollapsed) {

invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx

@@ -1,7 +1,5 @@
 import { ChakraProps, Flex, Portal } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
 import { RefObject, memo } from 'react';
@@ -26,11 +24,9 @@ const FloatingSidePanelButtons = ({
   sidePanelRef,
 }: Props) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
   const handleShowSidePanel = () => {
     sidePanelRef.current?.expand();
-    dispatch(requestCanvasRescale());
   };
 
   if (!isSidePanelCollapsed) {

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -13,7 +13,6 @@ import { createSelector } from '@reduxjs/toolkit';
 import AuxiliaryProgressIndicator from 'app/components/AuxiliaryProgressIndicator';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
 import { InvokeTabName, tabMap } from 'features/ui/store/tabMap';
@@ -108,12 +107,6 @@ const InvokeTabs = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
-  const handleResizeGallery = useCallback(() => {
-    if (activeTabName === 'unifiedCanvas') {
-      dispatch(requestCanvasRescale());
-    }
-  }, [dispatch, activeTabName]);
-
   const handleClickTab = useCallback((e: MouseEvent<HTMLElement>) => {
     if (e.target instanceof HTMLElement) {
       e.target.blur();
@@ -189,7 +182,6 @@ const InvokeTabs = () => {
         collapseSidePanel();
         collapseGalleryPanel();
       }
-      dispatch(requestCanvasRescale());
     },
     [dispatch, isGalleryPanelCollapsed, isSidePanelCollapsed]
   );
@@ -198,7 +190,6 @@ const InvokeTabs = () => {
     ['t', 'o'],
     () => {
       toggleSidePanel();
-      dispatch(requestCanvasRescale());
     },
     [dispatch]
   );
@@ -207,7 +198,6 @@ const InvokeTabs = () => {
     'g',
     () => {
       toggleGalleryPanel();
-      dispatch(requestCanvasRescale());
     },
     [dispatch]
   );
@@ -253,7 +243,6 @@ const InvokeTabs = () => {
               ref={sidePanelRef}
               defaultSize={sidePanelMinSize}
               minSize={sidePanelMinSize}
-              onResize={handleResizeGallery}
               onCollapse={setIsSidePanelCollapsed}
               collapsible
             >
@@ -290,7 +279,6 @@ const InvokeTabs = () => {
               id="gallery"
               ref={galleryPanelRef}
               order={2}
-              onResize={handleResizeGallery}
               defaultSize={galleryPanelMinSize}
               minSize={galleryPanelMinSize}
               onCollapse={setIsGalleryPanelCollapsed}

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTab.tsx

@@ -1,6 +1,4 @@
 import { Box } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import InitialImageDisplay from 'features/parameters/components/Parameters/ImageToImage/InitialImageDisplay';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
 import { memo, useCallback, useRef } from 'react';
@@ -13,7 +11,6 @@ import ResizeHandle from '../ResizeHandle';
 import TextToImageTabMain from '../TextToImage/TextToImageTabMain';
 
 const ImageToImageTab = () => {
-  const dispatch = useAppDispatch();
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
 
   const handleDoubleClickHandle = useCallback(() => {
@@ -50,9 +47,6 @@ const ImageToImageTab = () => {
           order={1}
           defaultSize={50}
           minSize={25}
-          onResize={() => {
-            dispatch(requestCanvasRescale());
-          }}
         >
           <TextToImageTabMain />
         </Panel>

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasResetCanvas.tsx

@@ -1,10 +1,7 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import {
+import { resetCanvas } from 'features/canvas/store/canvasSlice';
-  resetCanvas,
-  resizeAndScaleCanvas,
-} from 'features/canvas/store/canvasSlice';
 import { useTranslation } from 'react-i18next';
 import { FaTrash } from 'react-icons/fa';
 
@@ -15,7 +12,6 @@ export default function UnifiedCanvasResetCanvas() {
 
   const handleResetCanvas = () => {
     dispatch(resetCanvas());
-    dispatch(resizeAndScaleCanvas());
   };
   return (
     <IAIIconButton

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx

@@ -1,27 +1,11 @@
 import { Flex } from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { stateSelector } from 'app/store/store';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDropOverlay from 'common/components/IAIDropOverlay';
 import IAICanvas from 'features/canvas/components/IAICanvas';
 import IAICanvasToolbar from 'features/canvas/components/IAICanvasToolbar/IAICanvasToolbar';
-import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import { CanvasInitialImageDropData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { memo, useLayoutEffect } from 'react';
+import { memo } from 'react';
-
-const selector = createSelector(
-  [stateSelector],
-  ({ canvas }) => {
-    const { doesCanvasNeedScaling } = canvas;
-    return {
-      doesCanvasNeedScaling,
-    };
-  },
-  defaultSelectorOptions
-);
 
 const droppableData: CanvasInitialImageDropData = {
   id: 'canvas-intial-image',
@@ -29,10 +13,6 @@ const droppableData: CanvasInitialImageDropData = {
 };
 
 const UnifiedCanvasContent = () => {
-  const dispatch = useAppDispatch();
-
-  const { doesCanvasNeedScaling } = useAppSelector(selector);
-
   const {
     isOver,
     setNodeRef: setDroppableRef,
@@ -42,16 +22,6 @@ const UnifiedCanvasContent = () => {
     data: droppableData,
   });
 
-  useLayoutEffect(() => {
-    const resizeCallback = () => {
-      dispatch(requestCanvasRescale());
-    };
-
-    window.addEventListener('resize', resizeCallback);
-
-    return () => window.removeEventListener('resize', resizeCallback);
-  }, [dispatch]);
-
   return (
     <Flex
       layerStyle="first"
@@ -69,7 +39,6 @@ const UnifiedCanvasContent = () => {
     >
       <IAICanvasToolbar />
       <IAICanvas />
-      {/* {doesCanvasNeedScaling ? <IAICanvasResizer /> : <IAICanvas />} */}
       {isValidDrop(droppableData, active) && (
         <IAIDropOverlay isOver={isOver} label="Set Canvas Initial Image" />
       )}