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

fix(ui): do not use state => state as an input selector

Browse Source 
This is a no-no, whoops!
This commit is contained in:
psychedelicious 2024-01-05 19:44:22 +11:00
parent ce64dbefce
commit a23502f7ff
235 changed files with 1087 additions and 951 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/package.json
View File

@ -167,10 +167,5 @@
"vite-plugin-dts": "^3.7.0",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^4.2.3"
},
"pnpm": {
"patchedDependencies": {
"reselect@5.0.1": "patches/reselect@5.0.1.patch"
}
}
}

10
invokeai/frontend/web/pnpm-lock.yaml
View File

@ -4,11 +4,6 @@ settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
patchedDependencies:
reselect@5.0.1:
hash: kvbgwzjyy4x4fnh7znyocvb75q
path: patches/reselect@5.0.1.patch
dependencies:
'@chakra-ui/anatomy':
specifier: ^2.2.2
@ -4570,7 +4565,7 @@ packages:
react-redux: 9.0.4(@types/react@18.2.46)(react@18.2.0)(redux@5.0.1)
redux: 5.0.1
redux-thunk: 3.1.0(redux@5.0.1)
reselect: 5.0.1(patch_hash=kvbgwzjyy4x4fnh7znyocvb75q)
reselect: 5.0.1
dev: false
/@roarr/browser-log-writer@1.3.0:
@ -11937,10 +11932,9 @@ packages:
hasBin: true
dev: true
/reselect@5.0.1(patch_hash=kvbgwzjyy4x4fnh7znyocvb75q):
/reselect@5.0.1:
resolution: {integrity: sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg==}
dev: false
patched: true
/resize-observer-polyfill@1.5.1:
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}

2
invokeai/frontend/web/src/app/components/Toaster.ts
View File

@ -11,7 +11,7 @@ import { memo, useCallback, useEffect } from 'react';
*/
const Toaster = () => {
const dispatch = useAppDispatch();
const toastQueue = useAppSelector((state) => state.system.toastQueue);
const toastQueue = useAppSelector((s) => s.system.toastQueue);
const toast = useToast();
useEffect(() => {
toastQueue.forEach((t) => {

19
invokeai/frontend/web/src/app/logging/useLogger.ts
View File

@ -1,6 +1,6 @@
import { createLogWriter } from '@roarr/browser-log-writer';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import type { RootState} from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { useEffect, useMemo } from 'react';
import { ROARR, Roarr } from 'roarr';
@ -8,14 +8,17 @@ import { ROARR, Roarr } from 'roarr';
import type { LoggerNamespace } from './logger';
import { $logger, BASE_CONTEXT, LOG_LEVEL_MAP, logger } from './logger';
const selector = createMemoizedSelector(stateSelector, ({ system }) => {
const { consoleLogLevel, shouldLogToConsole } = system;
const selector = createMemoizedSelector(
(state: RootState) => state.system,
(system) => {
const { consoleLogLevel, shouldLogToConsole } = system;
return {
consoleLogLevel,
shouldLogToConsole,
};
});
return {
consoleLogLevel,
shouldLogToConsole,
};
}
);
export const useLogger = (namespace: LoggerNamespace) => {
const { consoleLogLevel, shouldLogToConsole } = useAppSelector(selector);

21
invokeai/frontend/web/src/app/store/createMemoizedSelector.ts
View File

@ -1,33 +1,32 @@
import {
createDraftSafeSelectorCreator,
createSelectorCreator,
lruMemoize,
weakMapMemoize,
} from '@reduxjs/toolkit';
import type { GetSelectorsOptions } from '@reduxjs/toolkit/dist/entities/state_selectors';
import { isEqual } from 'lodash-es';
/**
* A memoized selector creator that uses LRU cache and lodash's isEqual for equality check.
*/
export const createMemoizedSelector = createSelectorCreator({
memoize: lruMemoize,
memoizeOptions: {
resultEqualityCheck: isEqual,
},
argsMemoize: lruMemoize,
memoize: weakMapMemoize,
// memoizeOptions: {
// resultEqualityCheck: isEqual,
// },
argsMemoize: weakMapMemoize,
});
/**
* A memoized selector creator that uses LRU cache default shallow equality check.
*/
export const createLruSelector = createSelectorCreator({
memoize: lruMemoize,
argsMemoize: lruMemoize,
memoize: weakMapMemoize,
argsMemoize: weakMapMemoize,
});
export const createLruDraftSafeSelector = createDraftSafeSelectorCreator({
memoize: lruMemoize,
argsMemoize: lruMemoize,
memoize: weakMapMemoize,
argsMemoize: weakMapMemoize,
});
export const getSelectorsOptions: GetSelectorsOptions = {

2
invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts
View File

@ -8,7 +8,6 @@ import { initialPostprocessingState } from 'features/parameters/store/postproces
import { initialSDXLState } from 'features/sdxl/store/sdxlSlice';
import { initialConfigState } from 'features/system/store/configSlice';
import { initialSystemState } from 'features/system/store/systemSlice';
import { initialHotkeysState } from 'features/ui/store/hotkeysSlice';
import { initialUIState } from 'features/ui/store/uiSlice';
import { defaultsDeep } from 'lodash-es';
import type { UnserializeFunction } from 'redux-remember';
@ -24,7 +23,6 @@ const initialStates: {
system: initialSystemState,
config: initialConfigState,
ui: initialUIState,
hotkeys: initialHotkeysState,
controlAdapters: initialControlAdapterState,
dynamicPrompts: initialDynamicPromptsState,
sdxl: initialSDXLState,

10
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted.ts
View File

@ -20,9 +20,15 @@ export const addDeleteBoardAndImagesFulfilledListener = () => {
let wasNodeEditorReset = false;
let wereControlAdaptersReset = false;
const state = getState();
const { generation, canvas, nodes, controlAdapters } = getState();
deleted_images.forEach((image_name) => {
const imageUsage = getImageUsage(state, image_name);
const imageUsage = getImageUsage(
generation,
canvas,
nodes,
controlAdapters,
image_name
);
if (imageUsage.isInitialImage && !wasInitialImageReset) {
dispatch(clearInitialImage());

3
invokeai/frontend/web/src/app/store/store.ts
View File

@ -151,6 +151,3 @@ export type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type AppThunkDispatch = ThunkDispatch<RootState, any, UnknownAction>;
export type AppDispatch = ReturnType<typeof createStore>['dispatch'];
export function stateSelector(state: RootState) {
return state;
}

2
invokeai/frontend/web/src/common/components/IAIInformationalPopover/IAIInformationalPopover.tsx
View File

@ -32,7 +32,7 @@ const IAIInformationalPopover = ({
...rest
}: Props) => {
const shouldEnableInformationalPopovers = useAppSelector(
(state) => state.system.shouldEnableInformationalPopovers
(s) => s.system.shouldEnableInformationalPopovers
);
const data = useMemo(() => POPOVER_DATA[feature], [feature]);

2
invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx
View File

@ -13,7 +13,7 @@ export const InvLabel = memo(
ref
) => {
const shouldEnableInformationalPopovers = useAppSelector(
(state) => state.system.shouldEnableInformationalPopovers
(s) => s.system.shouldEnableInformationalPopovers
);
const ctx = useContext(InvControlGroupContext);

2
invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts
View File

@ -30,7 +30,7 @@ export const useGroupedModelInvSelect = <T extends AnyModelConfigEntity>(
): UseGroupedModelInvSelectReturn => {
const { t } = useTranslation();
const base_model = useAppSelector(
(state) => state.generation.model?.base_model ?? 'sdxl'
(s) => s.generation.model?.base_model ?? 'sdxl'
);
const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } =
arg;

6
invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts
View File

@ -1,6 +1,6 @@
import { useAppToaster } from 'app/components/Toaster';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import type { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback, useEffect, useState } from 'react';
@ -16,8 +16,8 @@ const accept: Accept = {
};
const selector = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
({ gallery }, activeTabName) => {
[(state: RootState) => state.gallery, activeTabNameSelector],
(gallery, activeTabName) => {
let postUploadAction: PostUploadAction = { type: 'TOAST' };
if (activeTabName === 'unifiedCanvas') {

2
invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx
View File

@ -33,7 +33,7 @@ export const useImageUploadButton = ({
isDisabled,
}: UseImageUploadButtonArgs) => {
const autoAddBoardId = useAppSelector(
(state) => state.gallery.autoAddBoardId
(s) => s.gallery.autoAddBoardId
);
const [uploadImage] = useUploadImageMutation();
const onDropAccepted = useCallback(

26
invokeai/frontend/web/src/common/hooks/useIsReadyToEnqueue.ts
View File

@ -1,5 +1,5 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import type { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterAll } from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
@ -11,16 +11,22 @@ import { forEach } from 'lodash-es';
import { getConnectedEdges } from 'reactflow';
const selector = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
[
(state: RootState) => state.controlAdapters,
(state: RootState) => state.generation,
(state: RootState) => state.system,
(state: RootState) => state.nodes,
(state: RootState) => state.nodeTemplates,
(state: RootState) => state.dynamicPrompts,
activeTabNameSelector,
],
(
{
controlAdapters,
generation,
system,
nodes,
nodeTemplates,
dynamicPrompts,
},
controlAdapters,
generation,
system,
nodes,
nodeTemplates,
dynamicPrompts,
activeTabName
) => {
const { initialImage, model, positivePrompt } = generation;

10
invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx
View File

@ -1,7 +1,6 @@
import { Box, chakra, Flex } from '@chakra-ui/react';
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import useCanvasDragMove from 'features/canvas/hooks/useCanvasDragMove';
import useCanvasHotkeys from 'features/canvas/hooks/useCanvasHotkeys';
@ -17,7 +16,10 @@ import {
$isTransformingBoundingBox,
} from 'features/canvas/store/canvasNanostore';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { canvasResized } from 'features/canvas/store/canvasSlice';
import {
canvasResized,
selectCanvasSlice,
} from 'features/canvas/store/canvasSlice';
import {
setCanvasBaseLayer,
setCanvasStage,
@ -41,8 +43,8 @@ import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
import IAICanvasToolPreview from './IAICanvasToolPreview';
const selector = createMemoizedSelector(
[stateSelector, isStagingSelector],
({ canvas }, isStaging) => {
[selectCanvasSlice, isStagingSelector],
(canvas, isStaging) => {
const {
isMaskEnabled,
stageScale,

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx
View File

@ -1,10 +1,10 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { memo } from 'react';
import { Group, Rect } from 'react-konva';
const selector = createMemoizedSelector(stateSelector, ({ canvas }) => {
const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
const {
boundingBoxCoordinates,
boundingBoxDimensions,

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasGrid.tsx
View File

@ -1,13 +1,13 @@
// Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import type { ReactElement } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { Group, Line as KonvaLine } from 'react-konva';
import { getArbitraryBaseColor } from 'theme/colors';
const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
const selector = createMemoizedSelector([selectCanvasSlice], (canvas) => {
const { stageScale, stageCoordinates, stageDimensions } = canvas;
return { stageScale, stageCoordinates, stageDimensions };
});

11
invokeai/frontend/web/src/features/canvas/components/IAICanvasIntermediateImage.tsx
View File

@ -2,14 +2,15 @@ import {
createLruSelector,
createMemoizedSelector,
} from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { selectSystemSlice } from 'features/system/store/systemSlice';
import { memo, useEffect, useState } from 'react';
import { Image as KonvaImage } from 'react-konva';
const progressImageSelector = createLruSelector(
[stateSelector],
({ system, canvas }) => {
[selectSystemSlice, selectCanvasSlice],
(system, canvas) => {
const { denoiseProgress } = system;
const { batchIds } = canvas;
@ -20,8 +21,8 @@ const progressImageSelector = createLruSelector(
);
const boundingBoxSelector = createMemoizedSelector(
[stateSelector],
({ canvas }) => canvas.layerState.stagingArea.boundingBox
[selectCanvasSlice],
(canvas) => canvas.layerState.stagingArea.boundingBox
);
const IAICanvasIntermediateImage = () => {

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskCompositer.tsx
View File

@ -1,6 +1,6 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import type Konva from 'konva';
import type { RectConfig } from 'konva/lib/shapes/Rect';
@ -9,8 +9,8 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Rect } from 'react-konva';
export const canvasMaskCompositerSelector = createMemoizedSelector(
stateSelector,
({ canvas }) => {
selectCanvasSlice,
(canvas) => {
const { maskColor, stageCoordinates, stageDimensions, stageScale } = canvas;
return {

11
invokeai/frontend/web/src/features/canvas/components/IAICanvasMaskLines.tsx
View File

@ -1,18 +1,9 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { isCanvasMaskLine } from 'features/canvas/store/canvasTypes';
import type { GroupConfig } from 'konva/lib/Group';
import { memo } from 'react';
import { Group, Line } from 'react-konva';
export const canvasLinesSelector = createMemoizedSelector(
[stateSelector],
({ canvas }) => {
return canvas.layerState.objects.filter(isCanvasMaskLine);
}
);
type InpaintingCanvasLinesProps = GroupConfig;
/**
@ -21,7 +12,7 @@ type InpaintingCanvasLinesProps = GroupConfig;
* Uses globalCompositeOperation to handle the brush and eraser tools.
*/
const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
const objects = useAppSelector((state) => state.canvas.layerState.objects);
const objects = useAppSelector((s) => s.canvas.layerState.objects);
return (
<Group listening={false} {...props}>

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

@ -12,7 +12,7 @@ import { Group, Line, Rect } from 'react-konva';
import IAICanvasImage from './IAICanvasImage';
const IAICanvasObjectRenderer = () => {
const objects = useAppSelector((state) => state.canvas.layerState.objects);
const objects = useAppSelector((s) => s.canvas.layerState.objects);
return (
<Group name="outpainting-objects" listening={false}>

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx
View File

@ -1,6 +1,6 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import type { GroupConfig } from 'konva/lib/Group';
import { memo } from 'react';
import { Group, Rect } from 'react-konva';
@ -9,7 +9,7 @@ import IAICanvasImage from './IAICanvasImage';
const dash = [4, 4];
const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
const {
layerState,
shouldShowStagingImage,

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
View File

@ -1,7 +1,6 @@
import { Flex } from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@ -11,6 +10,7 @@ import {
discardStagedImages,
nextStagingAreaImage,
prevStagingAreaImage,
selectCanvasSlice,
setShouldShowStagingImage,
setShouldShowStagingOutline,
} from 'features/canvas/store/canvasSlice';
@ -29,7 +29,7 @@ import {
} from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
const {
layerState: {
stagingArea: { images, selectedImageIndex },

4
invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx
View File

@ -1,7 +1,7 @@
import { Box, Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import roundToHundreth from 'features/canvas/util/roundToHundreth';
import GenerationModeStatusText from 'features/parameters/components/Canvas/GenerationModeStatusText';
import { memo } from 'react';
@ -11,7 +11,7 @@ import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusT
const warningColor = 'var(--invokeai-colors-warning-500)';
const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
const {
stageDimensions: { width: stageWidth, height: stageHeight },
stageCoordinates: { x: stageX, y: stageY },

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolPreview.tsx
View File

@ -1,12 +1,12 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import {
$cursorPosition,
$isMovingBoundingBox,
$isTransformingBoundingBox,
} from 'features/canvas/store/canvasNanostore';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import {
COLOR_PICKER_SIZE,
@ -17,8 +17,8 @@ import { memo, useMemo } from 'react';
import { Circle, Group } from 'react-konva';
const canvasBrushPreviewSelector = createMemoizedSelector(
stateSelector,
({ canvas }) => {
selectCanvasSlice,
(canvas) => {
const {
brushSize,
colorPickerColor,

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx
View File

@ -1,6 +1,5 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $shift } from 'common/hooks/useGlobalModifiers';
import {
@ -18,6 +17,7 @@ import {
} from 'features/canvas/store/canvasNanostore';
import {
aspectRatioChanged,
selectCanvasSlice,
setBoundingBoxCoordinates,
setBoundingBoxDimensions,
setShouldSnapToGrid,
@ -39,8 +39,8 @@ import { Group, Rect, Transformer } from 'react-konva';
const borderDash = [4, 4];
const boundingBoxPreviewSelector = createMemoizedSelector(
[stateSelector, selectOptimalDimension],
({ canvas }, optimalDimension) => {
[selectCanvasSlice, selectOptimalDimension],
(canvas, optimalDimension) => {
const {
boundingBoxCoordinates,
boundingBoxDimensions,

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -1,6 +1,5 @@
import { Box, Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker';
import { InvButton } from 'common/components/InvButton/InvButton';
@ -17,6 +16,7 @@ import { canvasMaskSavedToGallery } from 'features/canvas/store/actions';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
clearMask,
selectCanvasSlice,
setIsMaskEnabled,
setLayer,
setMaskColor,
@ -31,8 +31,8 @@ import { useTranslation } from 'react-i18next';
import { FaMask, FaSave, FaTrash } from 'react-icons/fa';
export const selector = createMemoizedSelector(
[stateSelector, isStagingSelector],
({ canvas }, isStaging) => {
[selectCanvasSlice, isStagingSelector],
(canvas, isStaging) => {
const { maskColor, layer, isMaskEnabled, shouldPreserveMaskedArea } =
canvas;

7
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx
View File

@ -1,8 +1,7 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { redo } from 'features/canvas/store/canvasSlice';
import { redo, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@ -10,8 +9,8 @@ import { useTranslation } from 'react-i18next';
import { FaRedo } from 'react-icons/fa';
const canvasRedoSelector = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
({ canvas }, activeTabName) => {
[selectCanvasSlice, activeTabNameSelector],
(canvas, activeTabName) => {
const { futureLayerStates } = canvas;
return {

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -1,6 +1,5 @@
import { Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -11,6 +10,7 @@ import {
} from 'common/components/InvPopover/wrapper';
import ClearCanvasHistoryButtonModal from 'features/canvas/components/ClearCanvasHistoryButtonModal';
import {
selectCanvasSlice,
setShouldAntialias,
setShouldAutoSave,
setShouldCropToBoundingBoxOnSave,
@ -29,8 +29,8 @@ import { useTranslation } from 'react-i18next';
import { FaWrench } from 'react-icons/fa';
export const canvasControlsSelector = createMemoizedSelector(
[stateSelector],
({ canvas }) => {
[selectCanvasSlice],
(canvas) => {
const {
shouldAutoSave,
shouldCropToBoundingBoxOnSave,

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -1,6 +1,5 @@
import { Box, Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker';
import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@ -17,6 +16,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
addEraseRect,
addFillRect,
selectCanvasSlice,
setBrushColor,
setBrushSize,
setTool,
@ -37,8 +37,8 @@ import {
} from 'react-icons/fa';
export const selector = createMemoizedSelector(
[stateSelector, isStagingSelector],
({ canvas }, isStaging) => {
[selectCanvasSlice, isStagingSelector],
(canvas, isStaging) => {
const { tool, brushColor, brushSize } = canvas;
return {

6
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -1,6 +1,5 @@
import { Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -20,6 +19,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
resetCanvas,
resetCanvasView,
selectCanvasSlice,
setIsMaskEnabled,
setLayer,
setTool,
@ -49,8 +49,8 @@ import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
import IAICanvasUndoButton from './IAICanvasUndoButton';
export const selector = createMemoizedSelector(
[stateSelector, isStagingSelector],
({ canvas }, isStaging) => {
[selectCanvasSlice, isStagingSelector],
(canvas, isStaging) => {
const { tool, shouldCropToBoundingBoxOnSave, layer, isMaskEnabled } =
canvas;

7
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasUndoButton.tsx
View File

@ -1,8 +1,7 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { undo } from 'features/canvas/store/canvasSlice';
import { selectCanvasSlice,undo } from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@ -10,8 +9,8 @@ import { useTranslation } from 'react-i18next';
import { FaUndo } from 'react-icons/fa';
const canvasUndoSelector = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
({ canvas }, activeTabName) => {
[selectCanvasSlice, activeTabNameSelector],
(canvas, activeTabName) => {
const { pastLayerStates } = canvas;
return {

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

@ -12,7 +12,7 @@ import { useCallback } from 'react';
const useCanvasDrag = () => {
const dispatch = useAppDispatch();
const isStaging = useAppSelector(isStagingSelector);
const tool = useAppSelector((state) => state.canvas.tool);
const tool = useAppSelector((s) => s.canvas.tool);
const isMovingBoundingBox = useStore($isMovingBoundingBox);
const handleDragStart = useCallback(() => {
if (!((tool === 'move' || isStaging) && !isMovingBoundingBox)) {

10
invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts
View File

@ -6,18 +6,18 @@ import { useEffect, useState } from 'react';
import { useDebounce } from 'react-use';
export const useCanvasGenerationMode = () => {
const layerState = useAppSelector((state) => state.canvas.layerState);
const layerState = useAppSelector((s) => s.canvas.layerState);
const boundingBoxCoordinates = useAppSelector(
(state) => state.canvas.boundingBoxCoordinates
(s) => s.canvas.boundingBoxCoordinates
);
const boundingBoxDimensions = useAppSelector(
(state) => state.canvas.boundingBoxDimensions
(s) => s.canvas.boundingBoxDimensions
);
const isMaskEnabled = useAppSelector((state) => state.canvas.isMaskEnabled);
const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
const shouldPreserveMaskedArea = useAppSelector(
(state) => state.canvas.shouldPreserveMaskedArea
(s) => s.canvas.shouldPreserveMaskedArea
);
const [generationMode, setGenerationMode] = useState<
GenerationMode | undefined

6
invokeai/frontend/web/src/features/canvas/hooks/useCanvasHotkeys.ts
View File

@ -1,5 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
resetCanvasInteractionState,
@ -8,6 +7,7 @@ import {
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
clearMask,
selectCanvasSlice,
setIsMaskEnabled,
setShouldShowBoundingBox,
setShouldSnapToGrid,
@ -20,8 +20,8 @@ import { useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
const selector = createMemoizedSelector(
[stateSelector, activeTabNameSelector, isStagingSelector],
({ canvas }, activeTabName, isStaging) => {
[selectCanvasSlice, activeTabNameSelector, isStagingSelector],
(canvas, activeTabName, isStaging) => {
const {
shouldLockBoundingBox,
shouldShowBoundingBox,

10
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseDown.ts
View File

@ -1,12 +1,11 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
setIsDrawing,
setIsMovingStage,
} from 'features/canvas/store/canvasNanostore';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { addLine } from 'features/canvas/store/canvasSlice';
import { addLine, selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import type Konva from 'konva';
@ -17,11 +16,10 @@ import { useCallback } from 'react';
import useColorPicker from './useColorUnderCursor';
const selector = createMemoizedSelector(
[activeTabNameSelector, stateSelector, isStagingSelector],
(activeTabName, { canvas }, isStaging) => {
const { tool } = canvas;
[activeTabNameSelector, selectCanvasSlice, isStagingSelector],
(activeTabName, canvas, isStaging) => {
return {
tool,
tool: canvas.tool,
activeTabName,
isStaging,
};

13
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseMove.ts
View File

@ -1,13 +1,15 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
$isDrawing,
setCursorPosition,
} from 'features/canvas/store/canvasNanostore';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
import {
addPointToCurrentLine,
selectCanvasSlice,
} from 'features/canvas/store/canvasSlice';
import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import type Konva from 'konva';
@ -18,11 +20,10 @@ import { useCallback } from 'react';
import useColorPicker from './useColorUnderCursor';
const selector = createMemoizedSelector(
[activeTabNameSelector, stateSelector, isStagingSelector],
(activeTabName, { canvas }, isStaging) => {
const { tool } = canvas;
[activeTabNameSelector, selectCanvasSlice, isStagingSelector],
(activeTabName, canvas, isStaging) => {
return {
tool,
tool: canvas.tool,
activeTabName,
isStaging,
};

20
invokeai/frontend/web/src/features/canvas/hooks/useCanvasMouseUp.ts
View File

@ -1,6 +1,4 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import {
$isDrawing,
@ -8,32 +6,20 @@ import {
setIsMovingStage,
} from 'features/canvas/store/canvasNanostore';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import {
// addPointToCurrentEraserLine,
addPointToCurrentLine,
} from 'features/canvas/store/canvasSlice';
import { addPointToCurrentLine } from 'features/canvas/store/canvasSlice';
import getScaledCursorPosition from 'features/canvas/util/getScaledCursorPosition';
import type Konva from 'konva';
import type { MutableRefObject } from 'react';
import { useCallback } from 'react';
const selector = createMemoizedSelector(
[stateSelector, isStagingSelector],
({ canvas }, isStaging) => {
return {
tool: canvas.tool,
isStaging,
};
}
);
const useCanvasMouseUp = (
stageRef: MutableRefObject<Konva.Stage | null>,
didMouseMoveRef: MutableRefObject<boolean>
) => {
const dispatch = useAppDispatch();
const isDrawing = useStore($isDrawing);
const { tool, isStaging } = useAppSelector(selector);
const tool = useAppSelector((s) => s.canvas.tool);
const isStaging = useAppSelector(isStagingSelector);
return useCallback(() => {
if (tool === 'move' || isStaging) {

9
invokeai/frontend/web/src/features/canvas/hooks/useCanvasZoom.ts
View File

@ -1,6 +1,4 @@
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { $isMoveStageKeyHeld } from 'features/canvas/store/canvasNanostore';
import {
@ -18,14 +16,9 @@ import { clamp } from 'lodash-es';
import type { MutableRefObject } from 'react';
import { useCallback } from 'react';
const selector = createMemoizedSelector(
[stateSelector],
(state) => state.canvas.stageScale
);
const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
const dispatch = useAppDispatch();
const stageScale = useAppSelector(selector);
const stageScale = useAppSelector((s) => s.canvas.stageScale);
const isMoveStageKeyHeld = useStore($isMoveStageKeyHeld);
return useCallback(

6
invokeai/frontend/web/src/features/canvas/store/canvasSelectors.ts
View File

@ -1,13 +1,13 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import type { RootState } from 'app/store/store';
import { stateSelector } from 'app/store/store';
import { selectCanvasSlice } from './canvasSlice';
import type { CanvasImage } from './canvasTypes';
import { isCanvasBaseImage } from './canvasTypes';
export const isStagingSelector = createMemoizedSelector(
[stateSelector],
({ canvas }) =>
selectCanvasSlice,
(canvas) =>
canvas.batchIds.length > 0 ||
canvas.layerState.stagingArea.images.length > 0
);

3
invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import {
roundDownToMultiple,
roundToMultiple,
@ -781,3 +782,5 @@ export const {
} = canvasSlice.actions;
export default canvasSlice.reducer;
export const selectCanvasSlice = (state: RootState) => state.canvas;

6
invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx
View File

@ -1,6 +1,5 @@
import { Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -13,6 +12,7 @@ import { InvText } from 'common/components/InvText/wrapper';
import {
changeBoardReset,
isModalOpenChanged,
selectChangeBoardModalSlice,
} from 'features/changeBoardModal/store/slice';
import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -23,8 +23,8 @@ import {
} from 'services/api/endpoints/images';
const selector = createMemoizedSelector(
[stateSelector],
({ changeBoardModal }) => {
selectChangeBoardModalSlice,
(changeBoardModal) => {
const { isModalOpen, imagesToChange } = changeBoardModal;
return {

4
invokeai/frontend/web/src/features/changeBoardModal/store/slice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import type { ImageDTO } from 'services/api/types';
import { initialState } from './initialState';
@ -25,3 +26,6 @@ export const { isModalOpenChanged, imagesToChangeSelected, changeBoardReset } =
changeBoardModal.actions;
export default changeBoardModal.reducer;
export const selectChangeBoardModalSlice = (state: RootState) =>
state.changeBoardModal;

18
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
View File

@ -2,7 +2,6 @@ import type { SystemStyleObject } from '@chakra-ui/react';
import { Box, Flex, Spinner } from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIDndImage from 'common/components/IAIDndImage';
import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
@ -10,16 +9,21 @@ import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import { useControlAdapterControlImage } from 'features/controlAdapters/hooks/useControlAdapterControlImage';
import { useControlAdapterProcessedControlImage } from 'features/controlAdapters/hooks/useControlAdapterProcessedControlImage';
import { useControlAdapterProcessorType } from 'features/controlAdapters/hooks/useControlAdapterProcessorType';
import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
controlAdapterImageChanged,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import type {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'features/dnd/types';
import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
import {
heightChanged,
selectOptimalDimension,
widthChanged,
} from 'features/parameters/store/generationSlice';
import { selectSystemSlice } from 'features/system/store/systemSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -38,8 +42,14 @@ type Props = {
};
const selector = createMemoizedSelector(
[stateSelector, activeTabNameSelector, selectOptimalDimension],
({ controlAdapters, gallery, system }, activeTabName, optimalDimension) => {
[
selectControlAdaptersSlice,
selectGallerySlice,
selectSystemSlice,
activeTabNameSelector,
selectOptimalDimension,
],
(controlAdapters, gallery, system, activeTabName, optimalDimension) => {
const { pendingControlImages } = controlAdapters;
const { autoAddBoardId } = gallery;
const { isConnected } = system;

9
invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx
View File

@ -1,5 +1,4 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
@ -10,6 +9,7 @@ import { useControlAdapterModel } from 'features/controlAdapters/hooks/useContro
import { useControlAdapterModelEntities } from 'features/controlAdapters/hooks/useControlAdapterModelEntities';
import { useControlAdapterType } from 'features/controlAdapters/hooks/useControlAdapterType';
import { controlAdapterModelChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { pick } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@ -24,9 +24,8 @@ type ParamControlAdapterModelProps = {
id: string;
};
const selector = createMemoizedSelector(stateSelector, ({ generation }) => {
const { model } = generation;
return { mainModel: model };
const selector = createMemoizedSelector(selectGenerationSlice, (generation) => {
return { mainModel: generation.model };
});
const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
@ -35,7 +34,7 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
const model = useControlAdapterModel(id);
const dispatch = useAppDispatch();
const currentBaseModel = useAppSelector(
(state) => state.generation.model?.base_model
(s) => s.generation.model?.base_model
);
const { mainModel } = useAppSelector(selector);
const { t } = useTranslation();

2
invokeai/frontend/web/src/features/controlAdapters/hooks/useAddControlAdapter.ts
View File

@ -7,7 +7,7 @@ import { useControlAdapterModels } from './useControlAdapterModels';
export const useAddControlAdapter = (type: ControlAdapterType) => {
const baseModel = useAppSelector(
(state) => state.generation.model?.base_model
(s) => s.generation.model?.base_model
);
const dispatch = useAppDispatch();

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapter.ts
View File

@ -1,13 +1,15 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapter = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) =>
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) =>
selectControlAdapterById(controlAdapters, id)
),
[id]

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterBeginEndStepPct.ts
View File

@ -1,13 +1,15 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterBeginEndStepPct = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const cn = selectControlAdapterById(controlAdapters, id);
return cn
? {

10
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlImage.ts
View File

@ -1,15 +1,17 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterControlImage = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
stateSelector,
({ controlAdapters }) =>
selectControlAdaptersSlice,
(controlAdapters) =>
selectControlAdapterById(controlAdapters, id)?.controlImage
),
[id]

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterControlMode.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNet } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterControlMode = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
if (ca && isControlNet(ca)) {
return ca.controlMode;

10
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterIsEnabled.ts
View File

@ -1,15 +1,17 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterIsEnabled = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
stateSelector,
({ controlAdapters }) =>
selectControlAdaptersSlice,
(controlAdapters) =>
selectControlAdapterById(controlAdapters, id)?.isEnabled ?? false
),
[id]

10
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterModel.ts
View File

@ -1,15 +1,17 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterModel = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
stateSelector,
({ controlAdapters }) =>
selectControlAdaptersSlice,
(controlAdapters) =>
selectControlAdapterById(controlAdapters, id)?.model
),
[id]

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessedControlImage.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterProcessedControlImage = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
return ca && isControlNetOrT2IAdapter(ca)

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorNode.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterProcessorNode = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
return ca && isControlNetOrT2IAdapter(ca)

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterProcessorType.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterProcessorType = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
return ca && isControlNetOrT2IAdapter(ca)

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterResizeMode.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterResizeMode = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
if (ca && isControlNetOrT2IAdapter(ca)) {
return ca.resizeMode;

8
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterShouldAutoConfig.ts
View File

@ -1,14 +1,16 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { useMemo } from 'react';
export const useControlAdapterShouldAutoConfig = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ controlAdapters }) => {
createMemoizedSelector(selectControlAdaptersSlice, (controlAdapters) => {
const ca = selectControlAdapterById(controlAdapters, id);
if (ca && isControlNetOrT2IAdapter(ca)) {
return ca.shouldAutoConfig;

11
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterType.ts
View File

@ -1,16 +1,17 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterType = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
stateSelector,
({ controlAdapters }) =>
selectControlAdapterById(controlAdapters, id)?.type
selectControlAdaptersSlice,
(controlAdapters) => selectControlAdapterById(controlAdapters, id)?.type
),
[id]
);

10
invokeai/frontend/web/src/features/controlAdapters/hooks/useControlAdapterWeight.ts
View File

@ -1,15 +1,17 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectControlAdapterById } from 'features/controlAdapters/store/controlAdaptersSlice';
import {
selectControlAdapterById,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import { useMemo } from 'react';
export const useControlAdapterWeight = (id: string) => {
const selector = useMemo(
() =>
createMemoizedSelector(
stateSelector,
({ controlAdapters }) =>
selectControlAdaptersSlice,
(controlAdapters) =>
selectControlAdapterById(controlAdapters, id)?.weight
),
[id]

4
invokeai/frontend/web/src/features/controlAdapters/store/controlAdaptersSlice.ts
View File

@ -1,6 +1,7 @@
import type { PayloadAction, Update } from '@reduxjs/toolkit';
import { createEntityAdapter, createSlice, isAnyOf } from '@reduxjs/toolkit';
import { getSelectorsOptions } from 'app/store/createMemoizedSelector';
import type { RootState } from 'app/store/store';
import { buildControlAdapter } from 'features/controlAdapters/util/buildControlAdapter';
import type {
ParameterControlNetModel,
@ -489,3 +490,6 @@ export const isAnyControlAdapterAdded = isAnyOf(
controlAdapterAddedFromImage,
controlAdapterRecalled
);
export const selectControlAdaptersSlice = (state: RootState) =>
state.controlAdapters;

2
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageButton.tsx
View File

@ -12,7 +12,7 @@ type DeleteImageButtonProps = Omit<InvIconButtonProps, 'aria-label'> & {
export const DeleteImageButton = memo((props: DeleteImageButtonProps) => {
const { onClick, isDisabled } = props;
const { t } = useTranslation();
const isConnected = useAppSelector((state) => state.system.isConnected);
const isConnected = useAppSelector((s) => s.system.isConnected);
return (
<InvIconButton

37
invokeai/frontend/web/src/features/deleteImageModal/components/DeleteImageModal.tsx
View File

@ -1,11 +1,12 @@
import { Divider, Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvConfirmationAlertDialog } from 'common/components/InvConfirmationAlertDialog/InvConfirmationAlertDialog';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSwitch } from 'common/components/InvSwitch/wrapper';
import { InvText } from 'common/components/InvText/wrapper';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
import {
getImageUsage,
@ -14,9 +15,16 @@ import {
import {
imageDeletionCanceled,
isModalOpenChanged,
selectDeleteImageModalSlice,
} from 'features/deleteImageModal/store/slice';
import type { ImageUsage } from 'features/deleteImageModal/store/types';
import { setShouldConfirmOnDelete } from 'features/system/store/systemSlice';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { selectConfigSlice } from 'features/system/store/configSlice';
import {
selectSystemSlice,
setShouldConfirmOnDelete,
} from 'features/system/store/systemSlice';
import { some } from 'lodash-es';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
@ -25,15 +33,32 @@ import { useTranslation } from 'react-i18next';
import ImageUsageMessage from './ImageUsageMessage';
const selector = createMemoizedSelector(
[stateSelector, selectImageUsage],
(state, imagesUsage) => {
const { system, config, deleteImageModal } = state;
[
selectSystemSlice,
selectConfigSlice,
selectDeleteImageModalSlice,
selectGenerationSlice,
selectCanvasSlice,
selectNodesSlice,
selectControlAdaptersSlice,
selectImageUsage,
],
(
system,
config,
deleteImageModal,
generation,
canvas,
nodes,
controlAdapters,
imagesUsage
) => {
const { shouldConfirmOnDelete } = system;
const { canRestoreDeletedImagesFromBin } = config;
const { imagesToDelete, isModalOpen } = deleteImageModal;
const allImageUsage = (imagesToDelete ?? []).map(({ image_name }) =>
getImageUsage(state, image_name)
getImageUsage(generation, canvas, nodes, controlAdapters, image_name)
);
const imageUsageSummary: ImageUsage = {

35
invokeai/frontend/web/src/features/deleteImageModal/store/selectors.ts
View File

@ -1,15 +1,30 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import type { RootState } from 'app/store/store';
import { selectControlAdapterAll } from 'features/controlAdapters/store/controlAdaptersSlice';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import type { CanvasState } from 'features/canvas/store/canvasTypes';
import {
selectControlAdapterAll,
selectControlAdaptersSlice,
} from 'features/controlAdapters/store/controlAdaptersSlice';
import type { ControlAdaptersState } from 'features/controlAdapters/store/types';
import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
import { selectDeleteImageModalSlice } from 'features/deleteImageModal/store/slice';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import type { NodesState } from 'features/nodes/store/types';
import { isImageFieldInputInstance } from 'features/nodes/types/field';
import { isInvocationNode } from 'features/nodes/types/invocation';
import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import type { GenerationState } from 'features/parameters/store/types';
import { some } from 'lodash-es';
import type { ImageUsage } from './types';
export const getImageUsage = (state: RootState, image_name: string) => {
const { generation, canvas, nodes, controlAdapters } = state;
export const getImageUsage = (
generation: GenerationState,
canvas: CanvasState,
nodes: NodesState,
controlAdapters: ControlAdaptersState,
image_name: string
) => {
const isInitialImage = generation.initialImage?.imageName === image_name;
const isCanvasImage = canvas.layerState.objects.some(
@ -42,16 +57,20 @@ export const getImageUsage = (state: RootState, image_name: string) => {
};
export const selectImageUsage = createMemoizedSelector(
[(state: RootState) => state],
(state) => {
const { imagesToDelete } = state.deleteImageModal;
selectDeleteImageModalSlice,
selectGenerationSlice,
selectCanvasSlice,
selectNodesSlice,
selectControlAdaptersSlice,
(deleteImageModal, generation, canvas, nodes, controlAdapters) => {
const { imagesToDelete } = deleteImageModal;
if (!imagesToDelete.length) {
return [];
}
const imagesUsage = imagesToDelete.map((i) =>
getImageUsage(state, i.image_name)
getImageUsage(generation, canvas, nodes, controlAdapters, i.image_name)
);
return imagesUsage;

4
invokeai/frontend/web/src/features/deleteImageModal/store/slice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import type { ImageDTO } from 'services/api/types';
import { initialDeleteImageState } from './initialState';
@ -28,3 +29,6 @@ export const {
} = deleteImageModal.actions;
export default deleteImageModal.reducer;
export const selectDeleteImageModalSlice = (state: RootState) =>
state.deleteImageModal;

6
invokeai/frontend/web/src/features/dnd/hooks/useScaledCenteredModifer.ts
View File

@ -1,14 +1,14 @@
import type { Modifier } from '@dnd-kit/core';
import { getEventCoordinates } from '@dnd-kit/utilities';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useCallback } from 'react';
const selectZoom = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
({ nodes }, activeTabName) =>
[selectNodesSlice, activeTabNameSelector],
(nodes, activeTabName) =>
activeTabName === 'nodes' ? nodes.viewport.zoom : 1
);

10
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx
View File

@ -1,5 +1,3 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSwitch } from 'common/components/InvSwitch/wrapper';
@ -7,14 +5,8 @@ import { combinatorialToggled } from 'features/dynamicPrompts/store/dynamicPromp
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(stateSelector, (state) => {
const { combinatorial } = state.dynamicPrompts;
return { combinatorial };
});
const ParamDynamicPromptsCombinatorial = () => {
const { combinatorial } = useAppSelector(selector);
const combinatorial = useAppSelector((s) => s.dynamicPrompts.combinatorial);
const dispatch = useAppDispatch();
const { t } = useTranslation();

37
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsMaxPrompts.tsx
View File

@ -1,26 +1,33 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { maxPromptsChanged } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import {
maxPromptsChanged,
selectDynamicPromptsSlice,
} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { selectConfigSlice } from 'features/system/store/configSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector(stateSelector, (state) => {
const { maxPrompts, combinatorial } = state.dynamicPrompts;
const { min, sliderMax, inputMax, initial } =
state.config.sd.dynamicPrompts.maxPrompts;
const selector = createMemoizedSelector(
selectDynamicPromptsSlice,
selectConfigSlice,
(dynamicPrompts, config) => {
const { maxPrompts, combinatorial } = dynamicPrompts;
const { min, sliderMax, inputMax, initial } =
config.sd.dynamicPrompts.maxPrompts;
return {
maxPrompts,
min,
sliderMax,
inputMax,
initial,
isDisabled: !combinatorial,
};
});
return {
maxPrompts,
min,
sliderMax,
inputMax,
initial,
isDisabled: !combinatorial,
};
}
);
const ParamDynamicPromptsMaxPrompts = () => {
const { maxPrompts, min, sliderMax, inputMax, initial, isDisabled } =

23
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsPreview.tsx
View File

@ -1,26 +1,29 @@
import type { ChakraProps } from '@chakra-ui/react';
import { Flex, ListItem, OrderedList, Spinner } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover';
import { InvText } from 'common/components/InvText/wrapper';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { FaCircleExclamation } from 'react-icons/fa6';
const selector = createMemoizedSelector(stateSelector, (state) => {
const { isLoading, isError, prompts, parsingError } = state.dynamicPrompts;
const selector = createMemoizedSelector(
selectDynamicPromptsSlice,
(dynamicPrompts) => {
const { isLoading, isError, prompts, parsingError } = dynamicPrompts;
return {
prompts,
parsingError,
isError,
isLoading,
};
});
return {
prompts,
parsingError,
isError,
isLoading,
};
}
);
const listItemStyles: ChakraProps['sx'] = {
'&::marker': { color: 'base.500' },

2
invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsSeedBehaviour.tsx
View File

@ -16,7 +16,7 @@ const ParamDynamicPromptsSeedBehaviour = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const seedBehaviour = useAppSelector(
(state) => state.dynamicPrompts.seedBehaviour
(s) => s.dynamicPrompts.seedBehaviour
);
const options = useMemo<InvSelectOption[]>(() => {

2
invokeai/frontend/web/src/features/dynamicPrompts/components/ShowDynamicPromptsPreviewButton.tsx
View File

@ -14,7 +14,7 @@ const loadingStyles: SystemStyleObject = {
export const ShowDynamicPromptsPreviewButton = memo(() => {
const { t } = useTranslation();
const isLoading = useAppSelector((state) => state.dynamicPrompts.isLoading);
const isLoading = useAppSelector((s) => s.dynamicPrompts.isLoading);
const { isOpen, onOpen } = useDynamicPromptsModal();
return (
<InvTooltip

4
invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import { z } from 'zod';
export const zSeedBehaviour = z.enum(['PER_ITERATION', 'PER_PROMPT']);
@ -74,3 +75,6 @@ export const {
} = dynamicPromptsSlice.actions;
export default dynamicPromptsSlice.reducer;
export const selectDynamicPromptsSlice = (state: RootState) =>
state.dynamicPrompts;

2
invokeai/frontend/web/src/features/embedding/EmbeddingSelect.tsx
View File

@ -18,7 +18,7 @@ export const EmbeddingSelect = memo(
const { t } = useTranslation();
const currentBaseModel = useAppSelector(
(state) => state.generation.model?.base_model
(s) => s.generation.model?.base_model
);
const getIsDisabled = useCallback(

22
invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx
View File

@ -1,5 +1,3 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
@ -7,24 +5,22 @@ import type {
InvSelectOnChange,
InvSelectOption,
} from 'common/components/InvSelect/types';
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import {
autoAddBoardIdChanged,
} from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
return {
autoAddBoardId,
autoAssignBoardOnClick,
};
});
const BoardAutoAddSelect = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
const autoAddBoardId = useAppSelector(
(s) => s.gallery.autoAddBoardId
);
const autoAssignBoardOnClick = useAppSelector(
(s) => s.gallery.autoAssignBoardOnClick
);
const { options, hasBoards } = useListAllBoardsQuery(undefined, {
selectFromResult: ({ data }) => {
const options: InvSelectOption[] = [

8
invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx
View File

@ -1,12 +1,14 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem';
import { InvMenuList } from 'common/components/InvMenu/InvMenuList';
import { InvMenuGroup } from 'common/components/InvMenu/wrapper';
import { autoAddBoardIdChanged } from 'features/gallery/store/gallerySlice';
import {
autoAddBoardIdChanged,
selectGallerySlice,
} from 'features/gallery/store/gallerySlice';
import type { BoardId } from 'features/gallery/store/types';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { addToast } from 'features/system/store/systemSlice';
@ -38,7 +40,7 @@ const BoardContextMenu = ({
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ gallery }) => {
createMemoizedSelector(selectGallerySlice, (gallery) => {
const isAutoAdd = gallery.autoAddBoardId === board_id;
const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;
return { isAutoAdd, autoAssignBoardOnClick };

14
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
View File

@ -1,6 +1,4 @@
import { Collapse, Flex, Grid, GridItem } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
@ -20,18 +18,18 @@ const overlayScrollbarsStyles: CSSProperties = {
width: '100%',
};
const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
const { selectedBoardId, boardSearchText } = gallery;
return { selectedBoardId, boardSearchText };
});
type Props = {
isOpen: boolean;
};
const BoardsList = (props: Props) => {
const { isOpen } = props;
const { selectedBoardId, boardSearchText } = useAppSelector(selector);
const selectedBoardId = useAppSelector(
(s) => s.gallery.selectedBoardId
);
const boardSearchText = useAppSelector(
(s) => s.gallery.boardSearchText
);
const { data: boards } = useListAllBoardsQuery();
const filteredBoards = boardSearchText
? boards?.filter((board) =>

9
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
View File

@ -1,7 +1,5 @@
import { CloseIcon } from '@chakra-ui/icons';
import { Input, InputGroup, InputRightElement } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
@ -9,14 +7,9 @@ import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
const { boardSearchText } = gallery;
return { boardSearchText };
});
const BoardsSearch = () => {
const dispatch = useAppDispatch();
const { boardSearchText } = useAppSelector(selector);
const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
const inputRef = useRef<HTMLInputElement>(null);
const { t } = useTranslation();

4
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
View File

@ -10,7 +10,6 @@ import {
} from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIDroppable from 'common/components/IAIDroppable';
import { InvText } from 'common/components/InvText/wrapper';
@ -22,6 +21,7 @@ import BoardContextMenu from 'features/gallery/components/Boards/BoardContextMen
import {
autoAddBoardIdChanged,
boardIdSelected,
selectGallerySlice,
} from 'features/gallery/store/gallerySlice';
import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -56,7 +56,7 @@ const GalleryBoard = ({
const dispatch = useAppDispatch();
const selector = useMemo(
() =>
createMemoizedSelector(stateSelector, ({ gallery }) => {
createMemoizedSelector(selectGallerySlice, (gallery) => {
const isSelectedForAutoAdd = board.board_id === gallery.autoAddBoardId;
const autoAssignBoardOnClick = gallery.autoAssignBoardOnClick;

12
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
View File

@ -1,6 +1,4 @@
import { Box, Flex, Image } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import InvokeAILogoImage from 'assets/images/logo.png';
import IAIDroppable from 'common/components/IAIDroppable';
@ -26,14 +24,12 @@ interface Props {
isSelected: boolean;
}
const selector = createMemoizedSelector(stateSelector, ({ gallery }) => {
const { autoAddBoardId, autoAssignBoardOnClick } = gallery;
return { autoAddBoardId, autoAssignBoardOnClick };
});
const NoBoardBoard = memo(({ isSelected }: Props) => {
const dispatch = useAppDispatch();
const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
const autoAssignBoardOnClick = useAppSelector(
(s) => s.gallery.autoAssignBoardOnClick
);
const boardName = useBoardName('none');
const handleSelectBoard = useCallback(() => {
dispatch(boardIdSelected({ boardId: 'none' }));

39
invokeai/frontend/web/src/features/gallery/components/Boards/DeleteBoardModal.tsx
View File

@ -1,7 +1,6 @@
import { Flex, Skeleton } from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import {
InvAlertDialog,
@ -13,9 +12,13 @@ import {
} from 'common/components/InvAlertDialog/wrapper';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvText } from 'common/components/InvText/wrapper';
import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
import { selectControlAdaptersSlice } from 'features/controlAdapters/store/controlAdaptersSlice';
import ImageUsageMessage from 'features/deleteImageModal/components/ImageUsageMessage';
import { getImageUsage } from 'features/deleteImageModal/store/selectors';
import type { ImageUsage } from 'features/deleteImageModal/store/types';
import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { some } from 'lodash-es';
import { memo, useCallback, useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
@ -35,26 +38,34 @@ const DeleteBoardModal = (props: Props) => {
const { boardToDelete, setBoardToDelete } = props;
const { t } = useTranslation();
const canRestoreDeletedImagesFromBin = useAppSelector(
(state) => state.config.canRestoreDeletedImagesFromBin
(s) => s.config.canRestoreDeletedImagesFromBin
);
const { currentData: boardImageNames, isFetching: isFetchingBoardNames } =
useListAllImageNamesForBoardQuery(boardToDelete?.board_id ?? skipToken);
const selectImageUsageSummary = useMemo(
() =>
createMemoizedSelector([stateSelector], (state) => {
const allImageUsage = (boardImageNames ?? []).map((imageName) =>
getImageUsage(state, imageName)
);
createMemoizedSelector(
[
selectGenerationSlice,
selectCanvasSlice,
selectNodesSlice,
selectControlAdaptersSlice,
],
(generation, canvas, nodes, controlAdapters) => {
const allImageUsage = (boardImageNames ?? []).map((imageName) =>
getImageUsage(generation, canvas, nodes, controlAdapters, imageName)
);
const imageUsageSummary: ImageUsage = {
isInitialImage: some(allImageUsage, (i) => i.isInitialImage),
isCanvasImage: some(allImageUsage, (i) => i.isCanvasImage),
isNodesImage: some(allImageUsage, (i) => i.isNodesImage),
isControlImage: some(allImageUsage, (i) => i.isControlImage),
};
return { imageUsageSummary };
}),
const imageUsageSummary: ImageUsage = {
isInitialImage: some(allImageUsage, (i) => i.isInitialImage),
isCanvasImage: some(allImageUsage, (i) => i.isCanvasImage),
isNodesImage: some(allImageUsage, (i) => i.isNodesImage),
isControlImage: some(allImageUsage, (i) => i.isControlImage),
};
return { imageUsageSummary };
}
),
[boardImageNames]
);

15
invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImageButtons.tsx
View File

@ -3,7 +3,6 @@ import { skipToken } from '@reduxjs/toolkit/query';
import { useAppToaster } from 'app/components/Toaster';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
import { InvIconButton } from 'common/components/InvIconButton/InvIconButton';
@ -13,13 +12,17 @@ import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteIm
import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
import { sentImageToImg2Img } from 'features/gallery/store/actions';
import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
import ParamUpscalePopover from 'features/parameters/components/Upscale/ParamUpscaleSettings';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
import { initialImageSelected } from 'features/parameters/store/actions';
import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { selectConfigSlice } from 'features/system/store/configSlice';
import { selectSystemSlice } from 'features/system/store/systemSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import {
selectUiSlice,
setShouldShowImageDetails,
setShouldShowProgressInViewer,
} from 'features/ui/store/uiSlice';
@ -40,8 +43,14 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images';
import { useDebouncedMetadata } from 'services/api/hooks/useDebouncedMetadata';
const currentImageButtonsSelector = createMemoizedSelector(
[stateSelector, activeTabNameSelector],
({ gallery, system, ui, config }, activeTabName) => {
[
selectGallerySlice,
selectSystemSlice,
selectUiSlice,
selectConfigSlice,
activeTabNameSelector,
],
(gallery, system, ui, config, activeTabName) => {
const { isConnected, shouldConfirmOnDelete, denoiseProgress } = system;
const {

9
invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
View File

@ -1,7 +1,6 @@
import { Box, Flex } from '@chakra-ui/react';
import { skipToken } from '@reduxjs/toolkit/query';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import IAIDndImage from 'common/components/IAIDndImage';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@ -14,6 +13,8 @@ import ImageMetadataViewer from 'features/gallery/components/ImageMetadataViewer
import NextPrevImageButtons from 'features/gallery/components/NextPrevImageButtons';
import { useNextPrevImage } from 'features/gallery/hooks/useNextPrevImage';
import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import { selectSystemSlice } from 'features/system/store/systemSlice';
import { selectUiSlice } from 'features/ui/store/uiSlice';
import type { AnimationProps } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion';
import type { CSSProperties } from 'react';
@ -24,8 +25,10 @@ import { FaImage } from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
export const imagesSelector = createMemoizedSelector(
[stateSelector, selectLastSelectedImage],
({ ui, system }, lastSelectedImage) => {
selectUiSlice,
selectSystemSlice,
selectLastSelectedImage,
(ui, system, lastSelectedImage) => {
const {
shouldShowImageDetails,
shouldHidePreview,

4
invokeai/frontend/web/src/features/gallery/components/CurrentImage/ProgressImage.tsx
View File

@ -5,10 +5,10 @@ import { memo, useMemo } from 'react';
const CurrentImagePreview = () => {
const progress_image = useAppSelector(
(state) => state.system.denoiseProgress?.progress_image
(s) => s.system.denoiseProgress?.progress_image
);
const shouldAntialiasProgressImage = useAppSelector(
(state) => state.system.shouldAntialiasProgressImage
(s) => s.system.shouldAntialiasProgressImage
);
const sx = useMemo<SystemStyleObject>(

10
invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
View File

@ -1,17 +1,9 @@
import { ChevronUpIcon } from '@chakra-ui/icons';
import { Button, Flex, Spacer } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { memo, useMemo } from 'react';
import { useBoardName } from 'services/api/hooks/useBoardName';
const selector = createMemoizedSelector([stateSelector], (state) => {
const { selectedBoardId } = state.gallery;
return { selectedBoardId };
});
type Props = {
isOpen: boolean;
onToggle: () => void;
@ -19,7 +11,7 @@ type Props = {
const GalleryBoardName = (props: Props) => {
const { isOpen, onToggle } = props;
const { selectedBoardId } = useAppSelector(selector);
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const boardName = useBoardName(selectedBoardId);
const formattedBoardName = useMemo(() => {

6
invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
View File

@ -1,6 +1,5 @@
import { Flex } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvCheckbox } from 'common/components/InvCheckbox/wrapper';
import { InvControl } from 'common/components/InvControl/InvControl';
@ -15,6 +14,7 @@ import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { InvSwitch } from 'common/components/InvSwitch/wrapper';
import {
autoAssignBoardOnClickChanged,
selectGallerySlice,
setGalleryImageMinimumWidth,
shouldAutoSwitchChanged,
} from 'features/gallery/store/gallerySlice';
@ -25,9 +25,9 @@ import { FaWrench } from 'react-icons/fa';
import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
const selector = createMemoizedSelector([stateSelector], (state) => {
const selector = createMemoizedSelector(selectGallerySlice, (gallery) => {
const { galleryImageMinimumWidth, shouldAutoSwitch, autoAssignBoardOnClick } =
state.gallery;
gallery;
return {
galleryImageMinimumWidth,

10
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx
View File

@ -1,5 +1,3 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import type { InvContextMenuProps } from 'common/components/InvContextMenu/InvContextMenu';
import { InvContextMenu } from 'common/components/InvContextMenu/InvContextMenu';
@ -16,14 +14,8 @@ type Props = {
children: InvContextMenuProps<HTMLDivElement>['children'];
};
const selector = createMemoizedSelector([stateSelector], ({ gallery }) => {
const selectionCount = gallery.selection.length;
return { selectionCount };
});
const ImageContextMenu = ({ imageDTO, children }: Props) => {
const { selectionCount } = useAppSelector(selector);
const selectionCount = useAppSelector((s) => s.gallery.selection.length);
const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
e.preventDefault();

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx
View File

@ -22,7 +22,7 @@ import {
const MultipleSelectionMenuItems = () => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const selection = useAppSelector((state) => state.gallery.selection);
const selection = useAppSelector((s) => s.gallery.selection);
const customStarUi = useStore($customStarUI);
const isBulkDownloadEnabled =

12
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -8,9 +8,7 @@ import {
VStack,
} from '@chakra-ui/react';
import { useStore } from '@nanostores/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvButton } from 'common/components/InvButton/InvButton';
import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup';
@ -24,19 +22,11 @@ import GalleryBoardName from './GalleryBoardName';
import GallerySettingsPopover from './GallerySettingsPopover';
import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
const selector = createMemoizedSelector([stateSelector], (state) => {
const { galleryView } = state.gallery;
return {
galleryView,
};
});
const ImageGalleryContent = () => {
const { t } = useTranslation();
const resizeObserverRef = useRef<HTMLDivElement>(null);
const galleryGridRef = useRef<HTMLDivElement>(null);
const { galleryView } = useAppSelector(selector);
const galleryView = useAppSelector((s) => s.gallery.galleryView);
const dispatch = useAppDispatch();
const galleryHeader = useStore($galleryHeader);
const { isOpen: isBoardListOpen, onToggle: onToggleBoardList } =

2
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx
View File

@ -45,7 +45,7 @@ const GalleryImageGrid = () => {
overlayScrollbarsParams
);
const selectedBoardId = useAppSelector(
(state) => state.gallery.selectedBoardId
(s) => s.gallery.selectedBoardId
);
const { currentViewTotal } = useBoardTotal(selectedBoardId);
const queryArgs = useAppSelector(selectListImagesBaseQueryArgs);

11
invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
View File

@ -1,8 +1,7 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { selectionChanged } from 'features/gallery/store/gallerySlice';
import { selectGallerySlice, selectionChanged } from 'features/gallery/store/gallerySlice';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import type { MouseEvent } from 'react';
import { useCallback, useMemo } from 'react';
@ -11,13 +10,11 @@ import type { ImageDTO } from 'services/api/types';
import { imagesSelectors } from 'services/api/util';
const selector = createMemoizedSelector(
[stateSelector, selectListImagesBaseQueryArgs],
({ gallery }, queryArgs) => {
const selection = gallery.selection;
[selectGallerySlice, selectListImagesBaseQueryArgs],
(gallery, queryArgs) => {
return {
queryArgs,
selection,
selection: gallery.selection,
};
}
);

4
invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
View File

@ -1,5 +1,5 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
import { imageSelected } from 'features/gallery/store/gallerySlice';
@ -29,7 +29,7 @@ export const $useNextPrevImageState = map<UseNextPrevImageState>({
});
export const nextPrevImageButtonsSelector = createMemoizedSelector(
[stateSelector, selectListImagesBaseQueryArgs],
[(state: RootState) => state, selectListImagesBaseQueryArgs],
(state, baseQueryArgs) => {
const { data, status } =
imagesApi.endpoints.listImages.select(baseQueryArgs)(state);

2
invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts
View File

@ -12,7 +12,7 @@ export const gallerySelector = (state: RootState) => state.gallery;
export const selectLastSelectedImage = createMemoizedSelector(
(state: RootState) => state,
(state) => state.gallery.selection[state.gallery.selection.length - 1]
(s) => s.gallery.selection[state.gallery.selection.length - 1]
);
export const selectListImagesBaseQueryArgs = createMemoizedSelector(

3
invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice, isAnyOf } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import { uniqBy } from 'lodash-es';
import { boardsApi } from 'services/api/endpoints/boards';
import { imagesApi } from 'services/api/endpoints/images';
@ -103,3 +104,5 @@ const isAnyBoardDeleted = isAnyOf(
imagesApi.endpoints.deleteBoard.matchFulfilled,
imagesApi.endpoints.deleteBoardAndImages.matchFulfilled
);
export const selectGallerySlice = (state: RootState) => state.gallery;

2
invokeai/frontend/web/src/features/hrf/components/HrfSettings.tsx
View File

@ -9,7 +9,7 @@ import ParamHrfToggle from './ParamHrfToggle';
export const HrfSettings = memo(() => {
const isHRFFeatureEnabled = useFeatureStatus('hrf').isFeatureEnabled;
const hrfEnabled = useAppSelector((state) => state.hrf.hrfEnabled);
const hrfEnabled = useAppSelector((s) => s.hrf.hrfEnabled);
if (!isHRFFeatureEnabled) {
return null;

2
invokeai/frontend/web/src/features/hrf/components/ParamHrfMethod.tsx
View File

@ -18,7 +18,7 @@ const options: InvSelectOption[] = [
const ParamHrfMethodSelect = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const hrfMethod = useAppSelector((state) => state.hrf.hrfMethod);
const hrfMethod = useAppSelector((s) => s.hrf.hrfMethod);
const onChange = useCallback<InvSelectOnChange>(
(v) => {

36
invokeai/frontend/web/src/features/hrf/components/ParamHrfStrength.tsx
View File

@ -1,27 +1,31 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSlider } from 'common/components/InvSlider/InvSlider';
import { setHrfStrength } from 'features/hrf/store/hrfSlice';
import { selectHrfSlice, setHrfStrength } from 'features/hrf/store/hrfSlice';
import { selectConfigSlice } from 'features/system/store/configSlice';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createMemoizedSelector([stateSelector], ({ hrf, config }) => {
const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
config.sd.hrfStrength;
const { hrfStrength } = hrf;
const selector = createMemoizedSelector(
selectHrfSlice,
selectConfigSlice,
(hrf, config) => {
const { initial, min, sliderMax, inputMax, fineStep, coarseStep } =
config.sd.hrfStrength;
const { hrfStrength } = hrf;
return {
hrfStrength,
initial,
min,
sliderMax,
inputMax,
step: coarseStep,
fineStep,
};
});
return {
hrfStrength,
initial,
min,
sliderMax,
inputMax,
step: coarseStep,
fineStep,
};
}
);
const ParamHrfStrength = () => {
const { hrfStrength, initial, min, sliderMax, step, fineStep } =

3
invokeai/frontend/web/src/features/hrf/store/hrfSlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import type {
ParameterHRFMethod,
ParameterStrength,
@ -38,3 +39,5 @@ export const hrfSlice = createSlice({
export const { setHrfEnabled, setHrfStrength, setHrfMethod } = hrfSlice.actions;
export default hrfSlice.reducer;
export const selectHrfSlice = (state: RootState) => state.hrf;

4
invokeai/frontend/web/src/features/lora/components/LoRAList.tsx
View File

@ -1,12 +1,12 @@
import { Flex } from '@chakra-ui/layout';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { LoRACard } from 'features/lora/components/LoRACard';
import { selectLoraSlice } from 'features/lora/store/loraSlice';
import { map } from 'lodash-es';
import { memo } from 'react';
const selector = createMemoizedSelector(stateSelector, ({ lora }) => {
const selector = createMemoizedSelector(selectLoraSlice, (lora) => {
return { lorasArray: map(lora.loras) };
});

7
invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
View File

@ -1,17 +1,16 @@
import type { ChakraProps } from '@chakra-ui/react';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { InvControl } from 'common/components/InvControl/InvControl';
import { InvSelect } from 'common/components/InvSelect/InvSelect';
import { useGroupedModelInvSelect } from 'common/components/InvSelect/useGroupedModelInvSelect';
import { loraAdded } from 'features/lora/store/loraSlice';
import { loraAdded, selectLoraSlice } from 'features/lora/store/loraSlice';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
import { useGetLoRAModelsQuery } from 'services/api/endpoints/models';
const selector = createMemoizedSelector(stateSelector, ({ lora }) => ({
const selector = createMemoizedSelector(selectLoraSlice, (lora) => ({
addedLoRAs: lora.loras,
}));
@ -21,7 +20,7 @@ const LoRASelect = () => {
const { t } = useTranslation();
const { addedLoRAs } = useAppSelector(selector);
const currentBaseModel = useAppSelector(
(state) => state.generation.model?.base_model
(s) => s.generation.model?.base_model
);
const getIsDisabled = (lora: LoRAModelConfigEntity): boolean => {

3
invokeai/frontend/web/src/features/lora/store/loraSlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
import type { ParameterLoRAModel } from 'features/parameters/types/parameterSchemas';
import type { LoRAModelConfigEntity } from 'services/api/endpoints/models';
@ -74,3 +75,5 @@ export const {
} = loraSlice.actions;
export default loraSlice.reducer;
export const selectLoraSlice = (state: RootState) => state.lora;

3
invokeai/frontend/web/src/features/modelManager/store/modelManagerSlice.ts
View File

@ -1,5 +1,6 @@
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
import type { RootState } from 'app/store/store';
type ModelManagerState = {
searchFolder: string | null;
@ -28,3 +29,5 @@ export const { setSearchFolder, setAdvancedAddScanModel } =
modelManagerSlice.actions;
export default modelManagerSlice.reducer;
export const selectModelManagerSlice = (state: RootState) => state.modelmanager;

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