Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove circular dependencies in frontend

Browse Source
This commit is contained in:
Kaspar Emanuel 2022-12-14 22:34:25 +00:00 committed by blessedcoolant
parent 2a2f38a016
commit 392c0725f3
131 changed files with 917 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/package.json
View File

@ -8,6 +8,8 @@
"build": "tsc && vite build",
"build-dev": "tsc && vite build -m development",
"preview": "vite preview",
"madge": "madge --circular src/main.tsx",
"lint": "eslint src/",
"postinstall": "patch-package"
},
"dependencies": {
@ -58,6 +60,7 @@
"eslint": "^8.23.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react-hooks": "^4.6.0",
"madge": "^5.0.1",
"patch-package": "^6.5.0",
"postinstall-postinstall": "^2.1.0",
"sass": "^1.55.0",
@ -67,5 +70,15 @@
"vite": "^3.0.7",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^3.5.2"
},
"madge": {
"detectiveOptions": {
"ts": {
"skipTypeImports": true
},
"tsx": {
"skipTypeImports": true
}
}
}
}

3
frontend/src/app/invokeai.d.ts vendored
View File

@ -12,8 +12,7 @@
* 'gfpgan'.
*/
import { Category as GalleryCategory } from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName } from 'features/tabs/tabMap';
import { IRect } from 'konva/lib/types';
/**

2
frontend/src/app/socketio/actions.ts
View File

@ -1,6 +1,6 @@
import { createAction } from '@reduxjs/toolkit';
import { GalleryCategory } from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName } from 'features/tabs/tabMap';
import * as InvokeAI from 'app/invokeai';
/**

4
frontend/src/app/socketio/emitters.ts
View File

@ -17,9 +17,9 @@ import {
modelChangeRequested,
setIsProcessing,
} from 'features/system/store/systemSlice';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName } from 'features/tabs/tabMap';
import * as InvokeAI from 'app/invokeai';
import { RootState } from 'app/store';
import type { RootState } from 'app/store';
/**
* Returns an object containing all functions which use `socketio.emit()`.

2
frontend/src/app/socketio/listeners.ts
View File

@ -39,7 +39,7 @@ import {
requestSystemConfig,
} from './actions';
import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
import { tabMap } from 'features/tabs/components/InvokeTabs';
import { tabMap } from 'features/tabs/tabMap';
/**
* Returns an object containing listener callbacks for socketio events.

6
frontend/src/app/store.ts
View File

@ -1,6 +1,4 @@
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { useDispatch, useSelector } from 'react-redux';
import type { TypedUseSelectorHook } from 'react-redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
@ -101,7 +99,3 @@ export const store = configureStore({
export type AppGetState = typeof store.getState;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

6
frontend/src/app/storeHooks.ts Normal file
View File

@ -0,0 +1,6 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from './store';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

2
frontend/src/common/components/GuidePopover.tsx
View File

@ -6,7 +6,7 @@ import {
Box,
} from '@chakra-ui/react';
import { SystemState } from 'features/system/store/systemSlice';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store';
import { createSelector } from '@reduxjs/toolkit';
import { ReactElement } from 'react';

2
frontend/src/common/components/ImageUploader.tsx
View File

@ -5,7 +5,7 @@ import {
useEffect,
KeyboardEvent,
} from 'react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { FileRejection, useDropzone } from 'react-dropzone';
import { useToast } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';

7
frontend/src/common/util/parameterTranslation.ts
View File

@ -4,11 +4,8 @@ import { SystemState } from 'features/system/store/systemSlice';
import { stringToSeedWeightsArray } from './seedWeightPairs';
import randomInt from './randomInt';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import {
CanvasState,
isCanvasMaskLine,
} from 'features/canvas/store/canvasTypes';
import { InvokeTabName } from 'features/tabs/tabMap';
import { CanvasState, isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
import generateMask from 'features/canvas/util/generateMask';
import openBase64ImageInTab from './openBase64ImageInTab';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';

2
frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx
View File

@ -1,4 +1,4 @@
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton';
import { clearCanvasHistory } from 'features/canvas/store/canvasSlice';

2
frontend/src/features/canvas/components/IAICanvas.tsx
View File

@ -1,7 +1,7 @@
import { useCallback, useRef } from 'react';
import Konva from 'konva';
import { Layer, Stage } from 'react-konva';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import {
canvasSelector,
isStagingSelector,

2
frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { Group, Rect } from 'react-konva';
import { canvasSelector } from '../store/canvasSelectors';

2
frontend/src/features/canvas/components/IAICanvasGrid.tsx
View File

@ -2,7 +2,7 @@
import { useColorMode } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
import { Group, Line as KonvaLine } from 'react-konva';

3
frontend/src/features/canvas/components/IAICanvasIntermediateImage.tsx
View File

@ -1,5 +1,6 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import { ImageConfig } from 'konva/lib/shapes/Image';
import _ from 'lodash';

2
frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { RectConfig } from 'konva/lib/shapes/Rect';
import { Rect } from 'react-konva';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';

2
frontend/src/features/canvas/components/IAICanvasMaskLines.tsx
View File

@ -1,6 +1,6 @@
import { GroupConfig } from 'konva/lib/Group';
import { Group, Line } from 'react-konva';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { createSelector } from '@reduxjs/toolkit';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { isCanvasMaskLine } from '../store/canvasTypes';

2
frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { Group, Line, Rect } from 'react-konva';
import {

2
frontend/src/features/canvas/components/IAICanvasResizer.tsx
View File

@ -1,6 +1,6 @@
import { Spinner } from '@chakra-ui/react';
import { useLayoutEffect, useRef } from 'react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import {
resizeAndScaleCanvas,

2
frontend/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { GroupConfig } from 'konva/lib/Group';
import _ from 'lodash';
import { Group, Rect } from 'react-konva';

2
frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -1,6 +1,6 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import _ from 'lodash';
import { useCallback } from 'react';

2
frontend/src/features/canvas/components/IAICanvasStatusText.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';

2
frontend/src/features/canvas/components/IAICanvasStatusText/IAICanvasStatusTextCursorPos.tsx
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import React from 'react';
import _ from 'lodash';

2
frontend/src/features/canvas/components/IAICanvasToolPreview.tsx
View File

@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { GroupConfig } from 'konva/lib/Group';
import _ from 'lodash';
import { Circle, Group } from 'react-konva';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import {

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -5,7 +5,7 @@ import { Vector2d } from 'konva/lib/types';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
roundDownToMultiple,
roundToMultiple,

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -7,7 +7,7 @@ import {
setMaskColor,
setShouldPreserveMaskedArea,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaMask, FaTrash } from 'react-icons/fa';

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
View File

@ -1,7 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaRedo } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -10,7 +10,7 @@ import {
setShouldShowIntermediates,
setShouldSnapToGrid,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaWrench } from 'react-icons/fa';

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -7,7 +7,7 @@ import {
setBrushSize,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import {

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -8,7 +8,7 @@ import {
setLayer,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import {

2
frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
View File

@ -1,7 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaUndo } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';

2
frontend/src/features/canvas/hooks/useCanvasDragMove.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';
import { useCallback } from 'react';

2
frontend/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -10,7 +10,7 @@ import {
setShouldSnapToGrid,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { useRef } from 'react';
import {
canvasSelector,

2
frontend/src/features/canvas/hooks/useCanvasMouseDown.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';

2
frontend/src/features/canvas/hooks/useCanvasMouseMove.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import Konva from 'konva';
import { Vector2d } from 'konva/lib/types';

2
frontend/src/features/canvas/hooks/useCanvasMouseOut.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store';
import { useAppDispatch } from 'app/storeHooks';
import { useCallback } from 'react';
import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';

2
frontend/src/features/canvas/hooks/useCanvasMouseUp.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import Konva from 'konva';
import _ from 'lodash';

2
frontend/src/features/canvas/hooks/useCanvasZoom.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';

2
frontend/src/features/canvas/hooks/useColorUnderCursor.ts
View File

@ -1,4 +1,4 @@
import { useAppDispatch } from 'app/store';
import { useAppDispatch } from 'app/storeHooks';
import Konva from 'konva';
import _ from 'lodash';
import {

2
frontend/src/features/gallery/components/CurrentImageButtons.tsx
View File

@ -1,7 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store';
import {
OptionsState,

3
frontend/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -1,4 +1,5 @@
import { RootState, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import CurrentImageButtons from './CurrentImageButtons';
import { MdPhoto } from 'react-icons/md';
import CurrentImagePreview from './CurrentImagePreview';

3
frontend/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -1,7 +1,8 @@
import { IconButton, Image } from '@chakra-ui/react';
import { useState } from 'react';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
GalleryCategory,
GalleryState,

12
frontend/src/features/gallery/components/DeleteImageModal.tsx
View File

@ -14,15 +14,9 @@ import {
Flex,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import {
ChangeEvent,
cloneElement,
forwardRef,
ReactElement,
SyntheticEvent,
useRef,
} from 'react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { ChangeEvent, ReactElement, SyntheticEvent } from 'react';
import { cloneElement, forwardRef, useRef } from 'react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { deleteImage } from 'app/socketio/actions';
import { RootState } from 'app/store';
import {

2
frontend/src/features/gallery/components/HoverableImage.tsx
View File

@ -6,7 +6,7 @@ import {
Tooltip,
useToast,
} from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
setCurrentImage,
setShouldHoldGalleryOpen,

5
frontend/src/features/gallery/components/ImageGallery.tsx
View File

@ -12,7 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { MdPhotoLibrary } from 'react-icons/md';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { requestImages } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import {
selectNextImage,
@ -41,7 +41,7 @@ import IAICheckbox from 'common/components/IAICheckbox';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import _ from 'lodash';
import IAIButton from 'common/components/IAIButton';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName } from 'features/tabs/tabMap';
const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
const GALLERY_IMAGE_WIDTH_OFFSET = 40;
@ -55,6 +55,7 @@ const GALLERY_TAB_WIDTHS: Record<
unifiedCanvas: { galleryMinWidth: 200, galleryMaxWidth: 200 },
nodes: { galleryMinWidth: 200, galleryMaxWidth: 500 },
postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
training: { galleryMinWidth: 200, galleryMaxWidth: 500 },
};
const LIGHTBOX_GALLERY_WIDTH = 400;

2
frontend/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -10,7 +10,7 @@ import {
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { memo } from 'react';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { useAppDispatch } from 'app/store';
import { useAppDispatch } from 'app/storeHooks';
import * as InvokeAI from 'app/invokeai';
import {
setCfgScale,

2
frontend/src/features/gallery/hooks/useGetImageByUuid.ts
View File

@ -1,5 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { gallerySelector } from '../store/gallerySliceSelectors';
const selector = createSelector(gallerySelector, (gallery) => ({

2
frontend/src/features/gallery/store/gallerySlice.ts
View File

@ -3,7 +3,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
import _, { clamp } from 'lodash';
import * as InvokeAI from 'app/invokeai';
import { IRect } from 'konva/lib/types';
import { InvokeTabName } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName } from 'features/tabs/tabMap';
export type GalleryCategory = 'user' | 'result';

3
frontend/src/features/lightbox/components/Lightbox.tsx
View File

@ -1,5 +1,6 @@
import { IconButton } from '@chakra-ui/react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
import { imagesSelector } from 'features/gallery/components/CurrentImagePreview';

2
frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx
View File

@ -1,6 +1,6 @@
import { Box, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';

2
frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISelect from 'common/components/IAISelect';
import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';

2
frontend/src/features/options/components/AdvancedOptions/Canvas/InpaintReplace.tsx
View File

@ -1,5 +1,5 @@
import React, { ChangeEvent } from 'react';
import { useAppDispatch, useAppSelector } from '../../../../../app/store';
import { useAppDispatch, useAppSelector } from '../../../../../app/storeHooks';
import _ from 'lodash';
import { createSelector } from '@reduxjs/toolkit';
import IAISwitch from '../../../../../common/components/IAISwitch';

2
frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { optionsSelector } from 'features/options/store/optionsSelectors';
import {

2
frontend/src/features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions.tsx
View File

@ -1,7 +1,7 @@
import { Flex } from '@chakra-ui/react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
FacetoolType,

3
frontend/src/features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent } from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRunFacetool } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageFit.tsx
View File

@ -1,9 +1,6 @@
import React, { ChangeEvent } from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldFitToWidthHeight } from 'features/options/store/optionsSlice';

3
frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { setImg2imgStrength } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Output/HiresOptions.tsx
View File

@ -1,10 +1,7 @@
import { Flex } from '@chakra-ui/react';
import { ChangeEvent } from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setHiresFix } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Output/SeamlessOptions.tsx
View File

@ -1,10 +1,7 @@
import { Flex } from '@chakra-ui/react';
import { ChangeEvent } from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setSeamless } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Seed/Perlin.tsx
View File

@ -1,9 +1,6 @@
import React from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setPerlin } from 'features/options/store/optionsSlice';

10
frontend/src/features/options/components/AdvancedOptions/Seed/RandomizeSeed.tsx
View File

@ -1,10 +1,8 @@
import React, { ChangeEvent } from 'react';
import { ChangeEvent } from 'react';
import React from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRandomizeSeed } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Seed/Seed.tsx
View File

@ -1,10 +1,7 @@
import React from 'react';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setSeed } from 'features/options/store/optionsSlice';

3
frontend/src/features/options/components/AdvancedOptions/Seed/ShuffleSeed.tsx
View File

@ -1,7 +1,8 @@
import { Button } from '@chakra-ui/react';
import React from 'react';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import randomInt from 'common/util/randomInt';
import { setSeed } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Seed/Threshold.tsx
View File

@ -1,9 +1,6 @@
import React from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setThreshold } from 'features/options/store/optionsSlice';

2
frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleOptions.tsx
View File

@ -1,5 +1,5 @@
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
setUpscalingLevel,

3
frontend/src/features/options/components/AdvancedOptions/Upscale/UpscaleToggle.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent } from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRunESRGAN } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Variations/GenerateVariations.tsx
View File

@ -1,9 +1,6 @@
import React, { ChangeEvent } from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldGenerateVariations } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Variations/SeedWeights.tsx
View File

@ -1,9 +1,6 @@
import React, { ChangeEvent } from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIInput from 'common/components/IAIInput';
import { validateSeedWeights } from 'common/util/seedWeightPairs';
import { setSeedWeights } from 'features/options/store/optionsSlice';

7
frontend/src/features/options/components/AdvancedOptions/Variations/VariationAmount.tsx
View File

@ -1,9 +1,6 @@
import React from 'react';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setVariationAmount } from 'features/options/store/optionsSlice';

3
frontend/src/features/options/components/MainOptions/MainAdvancedOptionsCheckbox.tsx
View File

@ -1,5 +1,6 @@
import React, { ChangeEvent } from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAICheckbox from 'common/components/IAICheckbox';
import { setShowAdvancedOptions } from 'features/options/store/optionsSlice';

6
frontend/src/features/options/components/MainOptions/MainCFGScale.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setCfgScale } from 'features/options/store/optionsSlice';
import { inputWidth } from './MainOptions';
export default function MainCFGScale() {
const dispatch = useAppDispatch();
@ -18,7 +18,7 @@ export default function MainCFGScale() {
max={200}
onChange={handleChangeCfgScale}
value={cfgScale}
width={inputWidth}
width="auto"
styleClass="main-option-block"
textAlign="center"
isInteger={false}

6
frontend/src/features/options/components/MainOptions/MainHeight.tsx
View File

@ -1,6 +1,8 @@
import React, { ChangeEvent } from 'react';
import { ChangeEvent } from 'react';
import React from 'react';
import { HEIGHTS } from 'app/constants';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISelect from 'common/components/IAISelect';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { setHeight } from 'features/options/store/optionsSlice';

6
frontend/src/features/options/components/MainOptions/MainIterations.tsx
View File

@ -1,13 +1,13 @@
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import React from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import type { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import {
OptionsState,
setIterations,
} from 'features/options/store/optionsSlice';
import { inputWidth } from './MainOptions';
const mainIterationsSelector = createSelector(
[(state: RootState) => state.options],
@ -39,7 +39,7 @@ export default function MainIterations() {
max={9999}
onChange={handleChangeIterations}
value={iterations}
width={inputWidth}
width="auto"
labelFontSize={0.5}
styleClass="main-option-block"
textAlign="center"

3
frontend/src/features/options/components/MainOptions/MainSampler.tsx
View File

@ -1,6 +1,7 @@
import React, { ChangeEvent } from 'react';
import { SAMPLERS } from 'app/constants';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISelect from 'common/components/IAISelect';
import { setSampler } from 'features/options/store/optionsSlice';

6
frontend/src/features/options/components/MainOptions/MainSteps.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';
import { setSteps } from 'features/options/store/optionsSlice';
import { inputWidth } from './MainOptions';
export default function MainSteps() {
const dispatch = useAppDispatch();
@ -18,7 +18,7 @@ export default function MainSteps() {
step={1}
onChange={handleChangeSteps}
value={steps}
width={inputWidth}
width="auto"
styleClass="main-option-block"
textAlign="center"
/>

3
frontend/src/features/options/components/MainOptions/MainWidth.tsx
View File

@ -1,6 +1,7 @@
import React, { ChangeEvent } from 'react';
import { WIDTHS } from 'app/constants';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISelect from 'common/components/IAISelect';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { setWidth } from 'features/options/store/optionsSlice';

3
frontend/src/features/options/components/OptionsAccordion.tsx
View File

@ -1,5 +1,6 @@
import { Accordion, ExpandedIndex } from '@chakra-ui/react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { setOpenAccordions } from 'features/system/store/systemSlice';
import InvokeAccordionItem, {
InvokeAccordionItemProps,

3
frontend/src/features/options/components/ProcessButtons/CancelButton.tsx
View File

@ -1,6 +1,7 @@
import { MdCancel } from 'react-icons/md';
import { cancelProcessing } from 'app/socketio/actions';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton, {
IAIIconButtonProps,
} from 'common/components/IAIIconButton';

2
frontend/src/features/options/components/ProcessButtons/InvokeButton.tsx
View File

@ -2,7 +2,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { FaPlay } from 'react-icons/fa';
import { readinessSelector } from 'app/selectors/readinessSelector';
import { generateImage } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIButton, { IAIButtonProps } from 'common/components/IAIButton';
import IAIIconButton, {
IAIIconButtonProps,

3
frontend/src/features/options/components/ProcessButtons/Loopback.tsx
View File

@ -1,6 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { FaRecycle } from 'react-icons/fa';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { OptionsState, setShouldLoopback } from 'features/options/store/optionsSlice';

2
frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx
View File

@ -1,7 +1,7 @@
import InvokeButton from './InvokeButton';
import CancelButton from './CancelButton';
import LoopbackButton from './Loopback';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
/**

3
frontend/src/features/options/components/PromptInput/PromptInput.tsx
View File

@ -1,6 +1,7 @@
import { FormControl, Textarea } from '@chakra-ui/react';
import { ChangeEvent, KeyboardEvent, useRef } from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { generateImage } from 'app/socketio/actions';
import { OptionsState, setPrompt } from 'features/options/store/optionsSlice';

2
frontend/src/features/options/store/optionsSelectors.ts
View File

@ -1,7 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { RootState } from 'app/store';
import { tabMap } from 'features/tabs/components/InvokeTabs';
import { tabMap } from 'features/tabs/tabMap';
import { OptionsState } from './optionsSlice';
export const activeTabNameSelector = createSelector(

2
frontend/src/features/options/store/optionsSlice.ts
View File

@ -4,7 +4,7 @@ import * as InvokeAI from 'app/invokeai';
import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs';
import { FACETOOL_TYPES } from 'app/constants';
import { InvokeTabName, tabMap } from 'features/tabs/components/InvokeTabs';
import { InvokeTabName, tabMap } from 'features/tabs/tabMap';
export type UpscalingLevel = 2 | 4;

2
frontend/src/features/system/components/ClearTempFolderButtonModal.tsx
View File

@ -1,5 +1,5 @@
import { emptyTempFolder } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';

2
frontend/src/features/system/components/Console.tsx
View File

@ -1,5 +1,5 @@
import { IconButton, Tooltip } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store';
import { errorSeen, setShouldShowLogViewer, SystemState } from 'features/system/store/systemSlice';
import { useLayoutEffect, useRef, useState } from 'react';

2
frontend/src/features/system/components/ModelSelect.tsx
View File

@ -1,7 +1,7 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { requestModelChange } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISelect from 'common/components/IAISelect';
import _ from 'lodash';
import { ChangeEvent } from 'react';

2
frontend/src/features/system/components/ProgressBar.tsx
View File

@ -1,7 +1,7 @@
import { Progress } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash';
import { useAppSelector } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { RootState } from 'app/store';
import { SystemState } from 'features/system/store/systemSlice';

3
frontend/src/features/system/components/SettingsModal/ModelList.tsx
View File

@ -12,7 +12,8 @@ import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { ModelStatus } from 'app/invokeai';
import { requestModelChange } from 'app/socketio/actions';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { SystemState } from 'features/system/store/systemSlice';
type ModelListItemProps = {

5
frontend/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -15,8 +15,9 @@ import {
import { createSelector } from '@reduxjs/toolkit';
import _, { isEqual } from 'lodash';
import { ChangeEvent, cloneElement, ReactElement } from 'react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { persistor } from 'main';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { persistor } from 'persistor';
import {
InProgressImageType,
setEnableImageDebugging,

3
frontend/src/features/system/components/StatusIndicator.tsx
View File

@ -1,7 +1,8 @@
import { Text, Tooltip } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { errorSeen, SystemState } from 'features/system/store/systemSlice';
const systemSelector = createSelector(

3
frontend/src/features/system/components/ThemeChanger.tsx
View File

@ -1,5 +1,6 @@
import { useColorMode, VStack } from '@chakra-ui/react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { setCurrentTheme } from 'features/options/store/optionsSlice';
import IAIPopover from 'common/components/IAIPopover';
import IAIIconButton from 'common/components/IAIIconButton';

2
frontend/src/features/system/hooks/useToastWatcher.ts
View File

@ -1,5 +1,5 @@
import { useToast } from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { useEffect } from 'react';
import { toastQueueSelector } from 'features/system/store/systemSelectors';
import { clearToastQueue } from 'features/system/store/systemSlice';

2
frontend/src/features/tabs/components/FloatingGalleryButton.tsx
View File

@ -1,5 +1,5 @@
import { MdPhotoLibrary } from 'react-icons/md';
import { useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';

3
frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
View File

@ -1,5 +1,6 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import {
OptionsState,

3
frontend/src/features/tabs/components/ImageToImage/ImageToImageDisplay.tsx
View File

@ -1,4 +1,5 @@
import { RootState, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import ImageUploadButton from 'common/components/ImageUploaderButton';
import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
import InitImagePreview from './InitImagePreview';

3
frontend/src/features/tabs/components/ImageToImage/InitImagePreview.tsx
View File

@ -1,5 +1,6 @@
import { Image, useToast } from '@chakra-ui/react';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import ImageUploaderIconButton from 'common/components/ImageUploaderIconButton';
import { clearInitialImage } from 'features/options/store/optionsSlice';

3
frontend/src/features/tabs/components/ImageToImage/InitialImageOverlay.tsx
View File

@ -1,6 +1,7 @@
import { Image } from '@chakra-ui/react';
import React from 'react';
import { RootState, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
export default function InitialImageOverlay() {
const initialImage = useAppSelector(

3
frontend/src/features/tabs/components/InvokeOptionsPanel.tsx
View File

@ -5,7 +5,8 @@ import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { CSSTransition } from 'react-transition-group';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
OptionsState,
setOptionsPanelScrollPosition,

19
frontend/src/features/tabs/components/InvokeTabs.tsx
View File

@ -2,7 +2,8 @@ import { Tab, TabPanel, TabPanels, Tabs, Tooltip } from '@chakra-ui/react';
import _ from 'lodash';
import React, { ReactElement } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import NodesWIP from 'common/components/WorkInProgress/NodesWIP';
import { PostProcessingWIP } from 'common/components/WorkInProgress/PostProcessingWIP';
import ImageToImageIcon from 'common/icons/ImageToImageIcon';
@ -20,8 +21,15 @@ import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
import TrainingWIP from 'common/components/WorkInProgress/Training';
import TrainingIcon from 'common/icons/TrainingIcon';
import { InvokeTabName } from 'features/tabs/tabMap';
export const tabDict = {
export interface InvokeTabInfo {
title: ReactElement;
workarea: ReactElement;
tooltip: string;
}
export const tabDict: Record<InvokeTabName, InvokeTabInfo> = {
txt2img: {
title: <TextToImageIcon fill={'black'} boxSize={'2.5rem'} />,
workarea: <TextToImageWorkarea />,
@ -54,13 +62,6 @@ export const tabDict = {
},
};
// Array where index maps to the key of tabDict
export const tabMap = _.map(tabDict, (tab, key) => key);
// Use tabMap to generate a union type of tab names
const tabMapTypes = [...tabMap] as const;
export type InvokeTabName = typeof tabMapTypes[number];
export default function InvokeTabs() {
const activeTab = useAppSelector(
(state: RootState) => state.options.activeTab

Some files were not shown because too many files have changed in this diff Show More