tidy(ui): clean up unused code 1

- Only export when necessary
- Remove totally usused functions, variables, state, etc
- Remove unused packages

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

@@ -9,7 +9,7 @@ import { isNumber } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Rect } from 'react-konva';
 
-export const canvasMaskCompositerSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+const canvasMaskCompositerSelector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   return {
     stageCoordinates: canvas.stageCoordinates,
     stageDimensions: canvas.stageDimensions,

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

@@ -1,14 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 
 import { selectCanvasSlice } from './canvasSlice';
-import { isCanvasBaseImage } from './canvasTypes';
 
 export const isStagingSelector = createSelector(
   selectCanvasSlice,
   (canvas) => canvas.batchIds.length > 0 || canvas.layerState.stagingArea.images.length > 0
 );
-
-export const initialCanvasImageSelector = createMemoizedSelector(selectCanvasSlice, (canvas) =>
-  canvas.layerState.objects.find(isCanvasBaseImage)
-);

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

@@ -38,7 +38,7 @@ import { CANVAS_GRID_SIZE_FINE } from './constants';
  */
 const MAX_HISTORY = 128;
 
-export const initialLayerState: CanvasLayerState = {
+const initialLayerState: CanvasLayerState = {
   objects: [],
   stagingArea: {
     images: [],
@@ -46,11 +46,10 @@ export const initialLayerState: CanvasLayerState = {
   },
 };
 
-export const initialCanvasState: CanvasState = {
+const initialCanvasState: CanvasState = {
   _version: 1,
   boundingBoxCoordinates: { x: 0, y: 0 },
   boundingBoxDimensions: { width: 512, height: 512 },
-  boundingBoxPreviewFill: { r: 0, g: 0, b: 0, a: 0.5 },
   boundingBoxScaleMethod: 'auto',
   brushColor: { r: 90, g: 90, b: 255, a: 1 },
   brushSize: 50,
@@ -215,9 +214,6 @@ export const canvasSlice = createSlice({
     setStageCoordinates: (state, action: PayloadAction<Vector2d>) => {
       state.stageCoordinates = action.payload;
     },
-    setBoundingBoxPreviewFill: (state, action: PayloadAction<RgbaColor>) => {
-      state.boundingBoxPreviewFill = action.payload;
-    },
     setStageScale: (state, action: PayloadAction<number>) => {
       state.stageScale = action.payload;
     },
@@ -231,9 +227,6 @@ export const canvasSlice = createSlice({
     setShouldLockBoundingBox: (state, action: PayloadAction<boolean>) => {
       state.shouldLockBoundingBox = action.payload;
     },
-    toggleShouldLockBoundingBox: (state) => {
-      state.shouldLockBoundingBox = !state.shouldLockBoundingBox;
-    },
     setShouldShowBoundingBox: (state, action: PayloadAction<boolean>) => {
       state.shouldShowBoundingBox = action.payload;
     },
@@ -573,19 +566,6 @@ export const canvasSlice = createSlice({
         },
       }),
     },
-    scaledBoundingBoxDimensionsReset: {
-      reducer: (state, action: PayloadActionWithOptimalDimension) => {
-        const scaledDimensions = getScaledBoundingBoxDimensions(
-          state.boundingBoxDimensions,
-          action.meta.optimalDimension
-        );
-        state.scaledBoundingBoxDimensions = scaledDimensions;
-      },
-      prepare: (payload: void, optimalDimension: number) => ({
-        payload: undefined,
-        meta: { optimalDimension },
-      }),
-    },
     setShouldShowStagingImage: (state, action: PayloadAction<boolean>) => {
       state.shouldShowStagingImage = action.payload;
     },
@@ -682,7 +662,6 @@ export const {
   resetCanvasView,
   setBoundingBoxCoordinates,
   setBoundingBoxDimensions,
-  setBoundingBoxPreviewFill,
   setBoundingBoxScaleMethod,
   setBrushColor,
   setBrushSize,
@@ -706,7 +685,6 @@ export const {
   setShouldSnapToGrid,
   setStageCoordinates,
   setStageScale,
-  toggleShouldLockBoundingBox,
   undo,
   setScaledBoundingBoxDimensions,
   setShouldRestrictStrokesToBox,
@@ -716,13 +694,12 @@ export const {
   canvasBatchIdAdded,
   canvasBatchIdsReset,
   aspectRatioChanged,
-  scaledBoundingBoxDimensionsReset,
 } = canvasSlice.actions;
 
 export const selectCanvasSlice = (state: RootState) => state.canvas;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export const migrateCanvasState = (state: any): any => {
+const migrateCanvasState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
     state.aspectRatio = initialAspectRatioState;

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

@@ -10,9 +10,9 @@ export const LAYER_NAMES_DICT: { label: string; value: CanvasLayer }[] = [
   { label: 'Mask', value: 'mask' },
 ];
 
-export const LAYER_NAMES = ['base', 'mask'] as const;
+const LAYER_NAMES = ['base', 'mask'] as const;
 
-export const zBoundingBoxScaleMethod = z.enum(['none', 'auto', 'manual']);
+const zBoundingBoxScaleMethod = z.enum(['none', 'auto', 'manual']);
 export type BoundingBoxScaleMethod = z.infer<typeof zBoundingBoxScaleMethod>;
 export const isBoundingBoxScaleMethod = (v: unknown): v is BoundingBoxScaleMethod =>
   zBoundingBoxScaleMethod.safeParse(v).success;
@@ -112,7 +112,6 @@ export interface CanvasState {
   _version: 1;
   boundingBoxCoordinates: Vector2d;
   boundingBoxDimensions: Dimensions;
-  boundingBoxPreviewFill: RgbaColor;
   boundingBoxScaleMethod: BoundingBoxScaleMethod;
   brushColor: RgbaColor;
   brushSize: number;

invokeai/frontend/web/src/features/canvas/util/colorToString.ts

@@ -1,16 +1,6 @@
-import type { RgbaColor, RgbColor } from 'react-colorful';
+import type { RgbaColor } from 'react-colorful';
 
 export const rgbaColorToString = (color: RgbaColor): string => {
   const { r, g, b, a } = color;
   return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
-
-export const rgbaColorToRgbString = (color: RgbaColor): string => {
-  const { r, g, b } = color;
-  return `rgba(${r}, ${g}, ${b})`;
-};
-
-export const rgbColorToString = (color: RgbColor): string => {
-  const { r, g, b } = color;
-  return `rgba(${r}, ${g}, ${b})`;
-};

invokeai/frontend/web/src/features/canvas/util/constants.ts

@@ -1,6 +1,3 @@
-// bounding box anchor size
-export const TRANSFORMER_ANCHOR_SIZE = 15;
-
 // canvas wheel zoom exponential scale factor
 export const CANVAS_SCALE_BY = 0.999;
 

invokeai/frontend/web/src/features/canvas/util/roundDimensionsToMultiple.ts

@@ -1,11 +0,0 @@
-import { roundToMultiple } from 'common/util/roundDownToMultiple';
-import type { Dimensions } from 'features/canvas/store/canvasTypes';
-
-const roundDimensionsToMultiple = (dimensions: Dimensions, multiple: number): Dimensions => {
-  return {
-    width: roundToMultiple(dimensions.width, multiple),
-    height: roundToMultiple(dimensions.height, multiple),
-  };
-};
-
-export default roundDimensionsToMultiple;