From 657f32bdb5d3ef48732b2c3e9838aa3b24ee6311 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:43:58 +1000 Subject: [PATCH] chore(ui): lint (circular deps) --- .../addCommitStagingAreaImageListener.ts | 3 +- .../CanvasToolbarResetCanvasButton.tsx | 2 +- .../features/controlLayers/store/actions.ts | 4 +++ .../controlLayers/store/canvasSlice.ts | 35 ++++++++++--------- .../store/canvasStagingAreaSlice.ts | 2 +- 5 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 invokeai/frontend/web/src/features/controlLayers/store/actions.ts diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts index c209574520..0624c20393 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener.ts @@ -1,7 +1,8 @@ import { isAnyOf } from '@reduxjs/toolkit'; import { logger } from 'app/logging/logger'; import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'; -import { canvasReset, rasterLayerAdded } from 'features/controlLayers/store/canvasSlice'; +import { canvasReset } from 'features/controlLayers/store/actions'; +import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice'; import { stagingAreaImageAccepted, stagingAreaReset } from 'features/controlLayers/store/canvasStagingAreaSlice'; import { selectCanvasSlice } from 'features/controlLayers/store/selectors'; import type { CanvasRasterLayerState } from 'features/controlLayers/store/types'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx index 27a8f9816f..cd3ca221c3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx @@ -1,7 +1,7 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate'; -import { canvasReset } from 'features/controlLayers/store/canvasSlice'; +import { canvasReset } from 'features/controlLayers/store/actions'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { PiTrashBold } from 'react-icons/pi'; diff --git a/invokeai/frontend/web/src/features/controlLayers/store/actions.ts b/invokeai/frontend/web/src/features/controlLayers/store/actions.ts new file mode 100644 index 0000000000..9e1d9734cd --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/store/actions.ts @@ -0,0 +1,4 @@ +import { createAction } from '@reduxjs/toolkit'; + +// Needed to split this from canvasSlice.ts to avoid circular dependencies +export const canvasReset = createAction('canvas/canvasReset'); diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts index 1106dc21aa..8b8f000d72 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasSlice.ts @@ -6,6 +6,7 @@ import { deepClone } from 'common/util/deepClone'; import { roundDownToMultiple, roundToMultiple } from 'common/util/roundDownToMultiple'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { getPrefixedId } from 'features/controlLayers/konva/util'; +import { canvasReset } from 'features/controlLayers/store/actions'; import { modelChanged } from 'features/controlLayers/store/paramsSlice'; import { selectAllEntities, @@ -1033,22 +1034,6 @@ export const canvasSlice = createSlice({ break; } }, - canvasReset: (state) => { - const newState = getInitialState(); - - // We need to retain the optimal dimension across resets, as it is changed only when the model changes. Copy it - // from the old state, then recalculate the bbox size & scaled size. - newState.bbox.optimalDimension = state.bbox.optimalDimension; - const rect = calculateNewSize( - newState.bbox.aspectRatio.value, - newState.bbox.optimalDimension * newState.bbox.optimalDimension - ); - newState.bbox.rect.width = rect.width; - newState.bbox.rect.height = rect.height; - syncScaledSize(newState); - - return newState; - }, canvasUndo: () => {}, canvasRedo: () => {}, canvasClearHistory: () => {}, @@ -1074,11 +1059,27 @@ export const canvasSlice = createSlice({ syncScaledSize(state); } }); + + builder.addCase(canvasReset, (state) => { + const newState = getInitialState(); + + // We need to retain the optimal dimension across resets, as it is changed only when the model changes. Copy it + // from the old state, then recalculate the bbox size & scaled size. + newState.bbox.optimalDimension = state.bbox.optimalDimension; + const rect = calculateNewSize( + newState.bbox.aspectRatio.value, + newState.bbox.optimalDimension * newState.bbox.optimalDimension + ); + newState.bbox.rect.width = rect.width; + newState.bbox.rect.height = rect.height; + syncScaledSize(newState); + + return newState; + }); }, }); export const { - canvasReset, canvasUndo, canvasRedo, canvasClearHistory, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts index e11b4e16d5..f11338c840 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasStagingAreaSlice.ts @@ -1,7 +1,7 @@ import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'; import type { PersistConfig, RootState } from 'app/store/store'; import { deepClone } from 'common/util/deepClone'; -import { canvasReset } from 'features/controlLayers/store/canvasSlice'; +import { canvasReset } from 'features/controlLayers/store/actions'; import type { StagingAreaImage } from 'features/controlLayers/store/types'; import { selectCanvasQueueCounts } from 'services/api/endpoints/queue';