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

Updates code quality tooling and formats codebase

Browse Source 
- `eslint` and `prettier` configs
- `husky` to format and lint via pre-commit hook
- `babel-plugin-transform-imports` to treeshake `lodash` and other packages if needed

Lints and formats codebase.
This commit is contained in:
psychedelicious 2023-02-04 11:36:31 +11:00 committed by mauwii
parent f80a64a0f4
commit 45a5ccba84
No known key found for this signature in database
GPG Key ID: D923DB04ADB3F5AB
185 changed files with 1933 additions and 868 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/.babelrc Normal file
View File

@ -0,0 +1,13 @@
{
"plugins": [
[
"transform-imports",
{
"lodash": {
"transform": "lodash/${member}",
"preventFullImport": true
}
}
]
]
}

5
invokeai/frontend/.eslintignore Normal file
View File

@ -0,0 +1,5 @@
dist/
.husky/
node_modules/
patches/
public/

40
invokeai/frontend/.eslintrc.js Normal file
View File

@ -0,0 +1,40 @@
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'plugin:react/jsx-runtime',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint', 'eslint-plugin-react-hooks'],
root: true,
rules: {
'react-hooks/exhaustive-deps': 'error',
'no-var': 'error',
'brace-style': 'error',
'prefer-template': 'error',
radix: 'error',
'space-before-blocks': 'error',
'import/prefer-default-export': 'off',
'@typescript-eslint/no-unused-vars': ['warn', { varsIgnorePattern: '_+' }],
},
settings: {
react: {
version: 'detect',
},
},
};

3
invokeai/frontend/.gitignore vendored
View File

@ -23,3 +23,6 @@ dist-ssr
*.njsproj
*.sln
*.sw?
# build stats
stats.html

4
invokeai/frontend/.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
cd invokeai/frontend/ && yarn run lint

5
invokeai/frontend/.prettierignore Normal file
View File

@ -0,0 +1,5 @@
dist/
.husky/
node_modules/
patches/
public/

6
invokeai/frontend/.prettierrc.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: true,
singleQuote: true,
};

1
invokeai/frontend/dist/locales/options/en.json vendored
View File

@ -48,7 +48,6 @@
"sendTo": "Send to",
"sendToImg2Img": "Send to Image to Image",
"sendToUnifiedCanvas": "Send To Unified Canvas",
"copyImage": "Copy Image",
"copyImageToLink": "Copy Image To Link",
"downloadImage": "Download Image",
"openInViewer": "Open In Viewer",

22
invokeai/frontend/package.json
View File

@ -2,15 +2,16 @@
"name": "invoke-ai-ui",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"prepare": "cd ../../ && husky install invokeai/frontend/.husky",
"dev": "vite dev",
"build": "tsc && vite build",
"build-dev": "tsc && vite build -m development",
"preview": "vite preview",
"madge": "madge --circular src/main.tsx",
"lint": "eslint src/",
"prettier": "prettier *.{json,cjs,ts,html} src/**/*.{ts,tsx}",
"lint": "eslint --fix .",
"lint-staged": "lint-staged",
"prettier": "prettier *.{json,js,ts,html} src/**/*.{ts,tsx,scss} --write .",
"fmt": "npm run prettier -- --write",
"postinstall": "patch-package"
},
@ -64,13 +65,20 @@
"@typescript-eslint/parser": "^5.36.2",
"@vitejs/plugin-legacy": "^3.0.1",
"@vitejs/plugin-react": "^2.0.1",
"babel-plugin-transform-imports": "^2.0.0",
"eslint": "^8.23.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"husky": "^8.0.3",
"lint-staged": "^13.1.0",
"madge": "^5.0.1",
"patch-package": "^6.5.0",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.8.1",
"prettier": "^2.8.3",
"prettier-plugin-organize-imports": "^3.2.2",
"rollup-plugin-visualizer": "^5.9.0",
"sass": "^1.55.0",
"terser": "^5.16.1",
"tsc-watch": "^5.0.3",
@ -88,5 +96,11 @@
"skipTypeImports": true
}
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,cjs}": [
"npx prettier --write",
"npx eslint --fix"
]
}
}

1
invokeai/frontend/public/locales/parameters/en.json
View File

@ -49,7 +49,6 @@
"sendToImg2Img": "Send to Image to Image",
"sendToUnifiedCanvas": "Send To Unified Canvas",
"copyImageToLink": "Copy Image To Link",
"copyImage": "Copy Image",
"downloadImage": "Download Image",
"openInViewer": "Open In Viewer",
"closeViewer": "Close Viewer",

8
invokeai/frontend/src/app/App.tsx
View File

@ -1,14 +1,14 @@
import ImageUploader from 'common/components/ImageUploader';
import Console from 'features/system/components/Console';
import ProgressBar from 'features/system/components/ProgressBar';
import SiteHeader from 'features/system/components/SiteHeader';
import Console from 'features/system/components/Console';
import { keepGUIAlive } from './utils';
import InvokeTabs from 'features/ui/components/InvokeTabs';
import ImageUploader from 'common/components/ImageUploader';
import { keepGUIAlive } from './utils';
import useToastWatcher from 'features/system/hooks/useToastWatcher';
import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
keepGUIAlive();

10
invokeai/frontend/src/app/selectors/readinessSelector.ts
View File

@ -1,10 +1,10 @@
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { validateSeedWeights } from 'common/util/seedWeightPairs';
import { initialCanvasImageSelector } from 'features/canvas/store/canvasSelectors';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
export const readinessSelector = createSelector(
[
@ -65,8 +65,8 @@ export const readinessSelector = createSelector(
},
{
memoizeOptions: {
equalityCheck: _.isEqual,
resultEqualityCheck: _.isEqual,
equalityCheck: isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,7 +1,7 @@
import { createAction } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai';
import { GalleryCategory } from 'features/gallery/store/gallerySlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import * as InvokeAI from 'app/invokeai';
/**
* We can't use redux-toolkit's createSlice() to make these actions,

8
invokeai/frontend/src/app/socketio/emitters.ts
View File

@ -1,10 +1,11 @@
import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
import dateFormat from 'dateformat';
import { Socket } from 'socket.io-client';
import * as InvokeAI from 'app/invokeai';
import type { RootState } from 'app/store';
import {
frontendToBackendParameters,
FrontendToBackendParametersConfig,
} from 'common/util/parameterTranslation';
import dateFormat from 'dateformat';
import {
GalleryCategory,
GalleryState,
@ -17,8 +18,7 @@ import {
setIsProcessing,
} from 'features/system/store/systemSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import * as InvokeAI from 'app/invokeai';
import type { RootState } from 'app/store';
import { Socket } from 'socket.io-client';
/**
* Returns an object containing all functions which use `socketio.emit()`.

26
invokeai/frontend/src/app/socketio/listeners.ts
View File

@ -1,24 +1,24 @@
import { AnyAction, MiddlewareAPI, Dispatch } from '@reduxjs/toolkit';
import { v4 as uuidv4 } from 'uuid';
import { AnyAction, Dispatch, MiddlewareAPI } from '@reduxjs/toolkit';
import dateFormat from 'dateformat';
import i18n from 'i18n';
import { v4 as uuidv4 } from 'uuid';
import * as InvokeAI from 'app/invokeai';
import {
addLogEntry,
addToast,
errorOccurred,
processingCanceled,
setCurrentStatus,
setFoundModels,
setIsCancelable,
setIsConnected,
setIsProcessing,
setSystemStatus,
setCurrentStatus,
setSystemConfig,
processingCanceled,
errorOccurred,
setModelList,
setIsCancelable,
addToast,
setFoundModels,
setSearchFolder,
setSystemConfig,
setSystemStatus,
} from 'features/system/store/systemSlice';
import {
@ -30,20 +30,20 @@ import {
setIntermediateImage,
} from 'features/gallery/store/gallerySlice';
import type { RootState } from 'app/store';
import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
import {
clearInitialImage,
setInfillMethod,
setInitialImage,
setMaskPath,
} from 'features/parameters/store/generationSlice';
import { tabMap } from 'features/ui/store/tabMap';
import {
requestImages,
requestNewImages,
requestSystemConfig,
} from './actions';
import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
import { tabMap } from 'features/ui/store/tabMap';
import type { RootState } from 'app/store';
/**
* Returns an object containing listener callbacks for socketio events.

4
invokeai/frontend/src/app/socketio/middleware.ts
View File

@ -1,8 +1,8 @@
import { Middleware } from '@reduxjs/toolkit';
import { io } from 'socket.io-client';
import makeSocketIOListeners from './listeners';
import makeSocketIOEmitters from './emitters';
import makeSocketIOListeners from './listeners';
import * as InvokeAI from 'app/invokeai';
@ -26,7 +26,7 @@ export const socketioMiddleware = () => {
const socketio = io(origin, {
timeout: 60000,
path: window.location.pathname + 'socket.io',
path: `${window.location.pathname}socket.io`,
});
let areListenersSet = false;

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

@ -5,13 +5,13 @@ import storage from 'redux-persist/lib/storage'; // defaults to localStorage for
import { getPersistConfig } from 'redux-deep-persist';
import canvasReducer from 'features/canvas/store/canvasSlice';
import galleryReducer from 'features/gallery/store/gallerySlice';
import lightboxReducer from 'features/lightbox/store/lightboxSlice';
import generationReducer from 'features/parameters/store/generationSlice';
import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
import galleryReducer from 'features/gallery/store/gallerySlice';
import systemReducer from 'features/system/store/systemSlice';
import canvasReducer from 'features/canvas/store/canvasSlice';
import uiReducer from 'features/ui/store/uiSlice';
import lightboxReducer from 'features/lightbox/store/lightboxSlice';
import { socketioMiddleware } from './socketio/middleware';

2
invokeai/frontend/src/common/components/GuideIcon.tsx
View File

@ -1,7 +1,7 @@
import { Box, forwardRef, Icon } from '@chakra-ui/react';
import { Feature } from 'app/features';
import { IconType } from 'react-icons';
import { MdHelp } from 'react-icons/md';
import { Feature } from 'app/features';
import GuidePopover from './GuidePopover';
type GuideIconProps = {

8
invokeai/frontend/src/common/components/GuidePopover.tsx
View File

@ -1,16 +1,16 @@
import {
Box,
Popover,
PopoverArrow,
PopoverContent,
PopoverTrigger,
Box,
} from '@chakra-ui/react';
import { SystemState } from 'features/system/store/systemSlice';
import { useAppSelector } from 'app/storeHooks';
import { createSelector } from '@reduxjs/toolkit';
import { ReactElement } from 'react';
import { Feature, useFeatureHelpInfo } from 'app/features';
import { useAppSelector } from 'app/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors';
import { SystemState } from 'features/system/store/systemSlice';
import { ReactElement } from 'react';
type GuideProps = {
children: ReactElement;

4
invokeai/frontend/src/common/components/IAIIconButton.tsx
View File

@ -1,9 +1,9 @@
import {
IconButtonProps,
forwardRef,
IconButton,
IconButtonProps,
Tooltip,
TooltipProps,
forwardRef,
} from '@chakra-ui/react';
export type IAIIconButtonProps = IconButtonProps & {

19
invokeai/frontend/src/common/components/IAINumberInput.tsx
View File

@ -1,19 +1,20 @@
import {
FormControl,
FormControlProps,
FormLabel,
FormLabelProps,
NumberDecrementStepper,
NumberIncrementStepper,
NumberInput,
NumberInputField,
NumberIncrementStepper,
NumberDecrementStepper,
NumberInputProps,
FormLabel,
NumberInputFieldProps,
NumberInputProps,
NumberInputStepperProps,
FormControlProps,
FormLabelProps,
TooltipProps,
Tooltip,
TooltipProps,
} from '@chakra-ui/react';
import _ from 'lodash';
import { clamp } from 'lodash';
import { FocusEvent, useEffect, useState } from 'react';
const numberStringRegex = /^-?(0\.)?\.?$/;
@ -104,7 +105,7 @@ const IAINumberInput = (props: Props) => {
* clamp it on blur and floor it if needed.
*/
const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
const clamped = _.clamp(
const clamped = clamp(
isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value),
min,
max

4
invokeai/frontend/src/common/components/IAIPopover.tsx
View File

@ -1,11 +1,11 @@
import {
BoxProps,
Popover,
PopoverArrow,
PopoverContent,
PopoverProps,
PopoverTrigger,
BoxProps,
} from '@chakra-ui/react';
import { PopoverProps } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIPopoverProps = PopoverProps & {

7
invokeai/frontend/src/common/components/IAISlider.tsx
View File

@ -23,10 +23,11 @@ import {
Tooltip,
TooltipProps,
} from '@chakra-ui/react';
import React, { FocusEvent, useMemo, useState, useEffect } from 'react';
import { clamp } from 'lodash';
import { FocusEvent, useEffect, useMemo, useState } from 'react';
import { BiReset } from 'react-icons/bi';
import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
import _ from 'lodash';
export type IAIFullSliderProps = {
label: string;
@ -122,7 +123,7 @@ export default function IAISlider(props: IAIFullSliderProps) {
const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
if (e.target.value === '') e.target.value = String(min);
const clamped = _.clamp(
const clamped = clamp(
isInteger ? Math.floor(Number(e.target.value)) : Number(localInputValue),
min,
numberInputMax

28
invokeai/frontend/src/common/components/ImageUploader.tsx
View File

@ -1,20 +1,20 @@
import {
useCallback,
ReactNode,
useState,
useEffect,
KeyboardEvent,
} from 'react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { FileRejection, useDropzone } from 'react-dropzone';
import { useToast } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { tabDict } from 'features/ui/components/InvokeTabs';
import ImageUploadOverlay from './ImageUploadOverlay';
import { uploadImage } from 'features/gallery/store/thunks/uploadImage';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import useImageUploader from 'common/hooks/useImageUploader';
import { uploadImage } from 'features/gallery/store/thunks/uploadImage';
import { tabDict } from 'features/ui/components/InvokeTabs';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import {
KeyboardEvent,
ReactNode,
useCallback,
useEffect,
useState,
} from 'react';
import { FileRejection, useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import ImageUploadOverlay from './ImageUploadOverlay';
type ImageUploaderProps = {
children: ReactNode;
@ -33,7 +33,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
(rejection: FileRejection) => {
setIsHandlingUpload(true);
const msg = rejection.errors.reduce(
(acc: string, cur: { message: string }) => acc + '\n' + cur.message,
(acc: string, cur: { message: string }) => `${acc}\n${cur.message}`,
''
);
toast({

2
invokeai/frontend/src/common/components/ImageUploaderButton.tsx
View File

@ -1,7 +1,7 @@
import { Heading } from '@chakra-ui/react';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { useContext } from 'react';
import { FaUpload } from 'react-icons/fa';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
type ImageUploaderButtonProps = {
styleClass?: string;

2
invokeai/frontend/src/common/components/ImageUploaderIconButton.tsx
View File

@ -1,6 +1,6 @@
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import { useContext } from 'react';
import { FaUpload } from 'react-icons/fa';
import { ImageUploaderTriggerContext } from 'app/contexts/ImageUploaderTriggerContext';
import IAIIconButton from './IAIIconButton';
const ImageUploaderIconButton = () => {

1
invokeai/frontend/src/common/components/WorkInProgress/NodesWIP.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
export default function NodesWIP() {

1
invokeai/frontend/src/common/components/WorkInProgress/PostProcessingWIP.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
export const PostProcessingWIP = () => {

1
invokeai/frontend/src/common/components/WorkInProgress/Training.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
export default function TrainingWIP() {

1
invokeai/frontend/src/common/components/radix-ui/IAISlider.tsx
View File

@ -1,6 +1,5 @@
import { Tooltip } from '@chakra-ui/react';
import * as Slider from '@radix-ui/react-slider';
import React from 'react';
type IAISliderProps = Slider.SliderProps & {
value: number[];

12
invokeai/frontend/src/common/util/parameterTranslation.ts
View File

@ -1,24 +1,24 @@
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { Dimensions } from 'features/canvas/store/canvasTypes';
import { GenerationState } from 'features/parameters/store/generationSlice';
import { SystemState } from 'features/system/store/systemSlice';
import { Vector2d } from 'konva/lib/types';
import { Dimensions } from 'features/canvas/store/canvasTypes';
import { stringToSeedWeightsArray } from './seedWeightPairs';
import randomInt from './randomInt';
import { InvokeTabName } from 'features/ui/store/tabMap';
import {
CanvasState,
isCanvasMaskLine,
} from 'features/canvas/store/canvasTypes';
import generateMask from 'features/canvas/util/generateMask';
import openBase64ImageInTab from './openBase64ImageInTab';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import type {
UpscalingLevel,
FacetoolType,
UpscalingLevel,
} from 'features/parameters/store/postprocessingSlice';
import { PostprocessingState } from 'features/parameters/store/postprocessingSlice';
import { InvokeTabName } from 'features/ui/store/tabMap';
import openBase64ImageInTab from './openBase64ImageInTab';
import randomInt from './randomInt';
import { stringToSeedWeightsArray } from './seedWeightPairs';
export type FrontendToBackendParametersConfig = {
generationMode: InvokeTabName;

2
invokeai/frontend/src/common/util/seedWeightPairs.ts
View File

@ -63,6 +63,6 @@ export const stringToSeedWeightsArray = (
const stringPairs = string.split(',');
const arrPairs = stringPairs.map((p) => p.split(':'));
return arrPairs.map(
(p: Array<string>): Array<number> => [parseInt(p[0]), parseFloat(p[1])]
(p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
);
};

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

@ -1,37 +1,38 @@
import { useCallback, useRef } from 'react';
import Konva from 'konva';
import { Layer, Stage } from 'react-konva';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import IAICanvasMaskLines from './IAICanvasMaskLines';
import IAICanvasToolPreview from './IAICanvasToolPreview';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types';
import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
import { isEqual } from 'lodash';
import { useCallback, useRef } from 'react';
import { Layer, Stage } from 'react-konva';
import useCanvasDragMove from '../hooks/useCanvasDragMove';
import useCanvasHotkeys from '../hooks/useCanvasHotkeys';
import _ from 'lodash';
import { createSelector } from '@reduxjs/toolkit';
import IAICanvasMaskCompositer from './IAICanvasMaskCompositer';
import useCanvasWheel from '../hooks/useCanvasZoom';
import useCanvasMouseDown from '../hooks/useCanvasMouseDown';
import useCanvasMouseUp from '../hooks/useCanvasMouseUp';
import useCanvasMouseMove from '../hooks/useCanvasMouseMove';
import useCanvasMouseOut from '../hooks/useCanvasMouseOut';
import useCanvasDragMove from '../hooks/useCanvasDragMove';
import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
import IAICanvasGrid from './IAICanvasGrid';
import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
import IAICanvasStatusText from './IAICanvasStatusText';
import IAICanvasStagingArea from './IAICanvasStagingArea';
import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
import useCanvasMouseUp from '../hooks/useCanvasMouseUp';
import useCanvasWheel from '../hooks/useCanvasZoom';
import {
setCanvasBaseLayer,
setCanvasStage,
} from '../util/konvaInstanceProvider';
import { KonvaEventObject } from 'konva/lib/Node';
import IAICanvasBoundingBoxOverlay from './IAICanvasBoundingBoxOverlay';
import IAICanvasGrid from './IAICanvasGrid';
import IAICanvasIntermediateImage from './IAICanvasIntermediateImage';
import IAICanvasMaskCompositer from './IAICanvasMaskCompositer';
import IAICanvasMaskLines from './IAICanvasMaskLines';
import IAICanvasObjectRenderer from './IAICanvasObjectRenderer';
import IAICanvasStagingArea from './IAICanvasStagingArea';
import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
import IAICanvasStatusText from './IAICanvasStatusText';
import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
import IAICanvasToolPreview from './IAICanvasToolPreview';
const selector = createSelector(
[canvasSelector, isStagingSelector],
@ -82,7 +83,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,6 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { isEqual } from 'lodash';
import { Group, Rect } from 'react-konva';
import { canvasSelector } from '../store/canvasSelectors';
@ -27,7 +28,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -3,10 +3,11 @@
import { useColorMode } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { isEqual, range } from 'lodash';
import { ReactNode, useCallback, useLayoutEffect, useState } from 'react';
import { Group, Line as KonvaLine } from 'react-konva';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
const selector = createSelector(
[canvasSelector],
@ -16,7 +17,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);
@ -85,7 +86,7 @@ const IAICanvasGrid = () => {
xSteps = Math.round(xSize / 64) + 1,
ySteps = Math.round(ySize / 64) + 1;
const xLines = _.range(0, xSteps).map((i) => (
const xLines = range(0, xSteps).map((i) => (
<KonvaLine
key={`x_${i}`}
x={fullRect.x1 + i * 64}
@ -95,7 +96,7 @@ const IAICanvasGrid = () => {
strokeWidth={1}
/>
));
const yLines = _.range(0, ySteps).map((i) => (
const yLines = range(0, ySteps).map((i) => (
<KonvaLine
key={`y_${i}`}
x={fullRect.x1}

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

@ -3,7 +3,8 @@ import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import { ImageConfig } from 'konva/lib/shapes/Image';
import _ from 'lodash';
import { isEqual } from 'lodash';
import { useEffect, useState } from 'react';
import { Image as KonvaImage } from 'react-konva';
@ -14,7 +15,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,13 +1,13 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { RectConfig } from 'konva/lib/shapes/Rect';
import { Rect } from 'react-konva';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { useCallback, useEffect, useRef, useState } from 'react';
import Konva from 'konva';
import { isNumber } from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
export const canvasMaskCompositerSelector = createSelector(
canvasSelector,

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

@ -1,10 +1,11 @@
import { GroupConfig } from 'konva/lib/Group';
import { Group, Line } from 'react-konva';
import { useAppSelector } from 'app/storeHooks';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash';
import { Group, Line } from 'react-konva';
import { isCanvasMaskLine } from '../store/canvasTypes';
import _ from 'lodash';
export const canvasLinesSelector = createSelector(
[canvasSelector],
@ -13,7 +14,7 @@ export const canvasLinesSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,6 +1,9 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash';
import { Group, Line, Rect } from 'react-konva';
import {
isCanvasBaseImage,
@ -9,8 +12,6 @@ import {
isCanvasFillRect,
} from '../store/canvasTypes';
import IAICanvasImage from './IAICanvasImage';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
const selector = createSelector(
[canvasSelector],
@ -24,7 +25,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

14
invokeai/frontend/src/features/canvas/components/IAICanvasResizer.tsx
View File

@ -1,18 +1,18 @@
import { Spinner } from '@chakra-ui/react';
import { useLayoutEffect, useRef } from 'react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import {
canvasSelector,
initialCanvasImageSelector,
} from 'features/canvas/store/canvasSelectors';
import {
resizeAndScaleCanvas,
resizeCanvas,
setCanvasContainerDimensions,
setDoesCanvasNeedScaling,
} from 'features/canvas/store/canvasSlice';
import { createSelector } from '@reduxjs/toolkit';
import {
canvasSelector,
initialCanvasImageSelector,
} from 'features/canvas/store/canvasSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useLayoutEffect, useRef } from 'react';
const canvasResizerSelector = createSelector(
canvasSelector,

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

@ -1,9 +1,10 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { GroupConfig } from 'konva/lib/Group';
import _ from 'lodash';
import { Group, Rect } from 'react-konva';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash';
import { Group, Rect } from 'react-konva';
import IAICanvasImage from './IAICanvasImage';
const selector = createSelector(
@ -34,7 +35,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,18 +1,8 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import _ from 'lodash';
import { useCallback } from 'react';
import {
FaArrowLeft,
FaArrowRight,
FaCheck,
FaEye,
FaEyeSlash,
FaPlus,
FaSave,
} from 'react-icons/fa';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import {
commitStagingAreaImage,
@ -22,9 +12,20 @@ import {
setShouldShowStagingImage,
setShouldShowStagingOutline,
} from 'features/canvas/store/canvasSlice';
import { isEqual } from 'lodash';
import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { saveStagingAreaImageToGallery } from 'app/socketio/actions';
import { useTranslation } from 'react-i18next';
import {
FaArrowLeft,
FaArrowRight,
FaCheck,
FaEye,
FaEyeSlash,
FaPlus,
FaSave,
} from 'react-icons/fa';
const selector = createSelector(
[canvasSelector],
@ -48,7 +49,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,10 +1,11 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';
import roundToHundreth from '../util/roundToHundreth';
import { isEqual } from 'lodash';
import { useTranslation } from 'react-i18next';
import roundToHundreth from '../util/roundToHundreth';
import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';
const selector = createSelector(
[canvasSelector],
@ -59,7 +60,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,9 +1,9 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import React from 'react';
import _ from 'lodash';
import roundToHundreth from 'features/canvas/util/roundToHundreth';
import { isEqual } from 'lodash';
import { useTranslation } from 'react-i18next';
const cursorPositionSelector = createSelector(
@ -23,7 +23,7 @@ const cursorPositionSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,10 +1,11 @@
import { createSelector } from '@reduxjs/toolkit';
import { GroupConfig } from 'konva/lib/Group';
import _ from 'lodash';
import { Circle, Group } from 'react-konva';
import { useAppSelector } from 'app/storeHooks';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash';
import { Circle, Group } from 'react-konva';
import {
COLOR_PICKER_SIZE,
COLOR_PICKER_STROKE_RADIUS,
@ -106,7 +107,7 @@ const canvasBrushPreviewSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,10 +1,4 @@
import { createSelector } from '@reduxjs/toolkit';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
roundDownToMultiple,
@ -18,7 +12,14 @@ import {
setIsMovingBoundingBox,
setIsTransformingBoundingBox,
} from 'features/canvas/store/canvasSlice';
import Konva from 'konva';
import { GroupConfig } from 'konva/lib/Group';
import { KonvaEventObject } from 'konva/lib/Node';
import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Group, Rect, Transformer } from 'react-konva';
const boundingBoxPreviewSelector = createSelector(
canvasSelector,
@ -48,7 +49,7 @@ const boundingBoxPreviewSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,5 +1,15 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAICheckbox from 'common/components/IAICheckbox';
import IAIColorPicker from 'common/components/IAIColorPicker';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import {
clearMask,
setIsMaskEnabled,
@ -7,21 +17,12 @@ import {
setMaskColor,
setShouldPreserveMaskedArea,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaMask, FaTrash } from 'react-icons/fa';
import IAIPopover from 'common/components/IAIPopover';
import IAICheckbox from 'common/components/IAICheckbox';
import IAIColorPicker from 'common/components/IAIColorPicker';
import IAIButton from 'common/components/IAIButton';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { FaMask, FaTrash } from 'react-icons/fa';
export const selector = createSelector(
[canvasSelector, isStagingSelector],
@ -40,7 +41,7 @@ export const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,14 +1,15 @@
import { createSelector } from '@reduxjs/toolkit';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaRedo } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaRedo } from 'react-icons/fa';
import _ from 'lodash';
import { redo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash';
import { useTranslation } from 'react-i18next';
const canvasRedoSelector = createSelector(
@ -23,7 +24,7 @@ const canvasRedoSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,5 +1,10 @@
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAICheckbox from 'common/components/IAICheckbox';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import {
setShouldAutoSave,
setShouldCropToBoundingBoxOnSave,
@ -10,18 +15,14 @@ import {
setShouldShowIntermediates,
setShouldSnapToGrid,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import { FaWrench } from 'react-icons/fa';
import IAIPopover from 'common/components/IAIPopover';
import IAICheckbox from 'common/components/IAICheckbox';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import EmptyTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
import ClearCanvasHistoryButtonModal from '../ClearCanvasHistoryButtonModal';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { FaWrench } from 'react-icons/fa';
import ClearCanvasHistoryButtonModal from '../ClearCanvasHistoryButtonModal';
export const canvasControlsSelector = createSelector(
[canvasSelector],
@ -50,7 +51,7 @@ export const canvasControlsSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,5 +1,14 @@
import { ButtonGroup, Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIColorPicker from 'common/components/IAIColorPicker';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import IAISlider from 'common/components/IAISlider';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import {
addEraseRect,
addFillRect,
@ -7,9 +16,11 @@ import {
setBrushSize,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import { systemSelector } from 'features/system/store/systemSelectors';
import { clamp, isEqual } from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import {
FaEraser,
FaEyeDropper,
@ -18,16 +29,6 @@ import {
FaPlus,
FaSlidersH,
} from 'react-icons/fa';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import IAIPopover from 'common/components/IAIPopover';
import IAISlider from 'common/components/IAISlider';
import IAIColorPicker from 'common/components/IAIColorPicker';
import { useTranslation } from 'react-i18next';
export const selector = createSelector(
[canvasSelector, isStagingSelector, systemSelector],
@ -45,7 +46,7 @@ export const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);
@ -143,7 +144,7 @@ const IAICanvasToolChooserOptions = () => {
dispatch(
setBrushColor({
...brushColor,
a: _.clamp(brushColor.a - 0.05, 0.05, 1),
a: clamp(brushColor.a - 0.05, 0.05, 1),
})
);
},
@ -160,7 +161,7 @@ const IAICanvasToolChooserOptions = () => {
dispatch(
setBrushColor({
...brushColor,
a: _.clamp(brushColor.a + 0.05, 0.05, 1),
a: clamp(brushColor.a + 0.05, 0.05, 1),
})
);
},

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

@ -1,5 +1,14 @@
import { ButtonGroup } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import IAISelect from 'common/components/IAISelect';
import useImageUploader from 'common/hooks/useImageUploader';
import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import {
resetCanvas,
resetCanvasView,
@ -8,9 +17,18 @@ import {
setLayer,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import _ from 'lodash';
import IAIIconButton from 'common/components/IAIIconButton';
import {
CanvasLayer,
LAYER_NAMES_DICT,
} from 'features/canvas/store/canvasTypes';
import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import {
FaArrowsAlt,
FaCopy,
@ -21,28 +39,11 @@ import {
FaTrash,
FaUpload,
} from 'react-icons/fa';
import IAICanvasUndoButton from './IAICanvasUndoButton';
import IAICanvasMaskOptions from './IAICanvasMaskOptions';
import IAICanvasRedoButton from './IAICanvasRedoButton';
import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
import IAICanvasMaskOptions from './IAICanvasMaskOptions';
import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
import { useHotkeys } from 'react-hotkeys-hook';
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
import { systemSelector } from 'features/system/store/systemSelectors';
import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
import useImageUploader from 'common/hooks/useImageUploader';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import IAISelect from 'common/components/IAISelect';
import {
CanvasLayer,
LAYER_NAMES_DICT,
} from 'features/canvas/store/canvasTypes';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick';
import IAICanvasUndoButton from './IAICanvasUndoButton';
export const selector = createSelector(
[systemSelector, canvasSelector, isStagingSelector],
@ -62,7 +63,7 @@ export const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,14 +1,15 @@
import { createSelector } from '@reduxjs/toolkit';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaUndo } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaUndo } from 'react-icons/fa';
import _ from 'lodash';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { undo } from 'features/canvas/store/canvasSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { useTranslation } from 'react-i18next';
const canvasUndoSelector = createSelector(
@ -23,7 +24,7 @@ const canvasUndoSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,8 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';
import { useCallback } from 'react';
import {
canvasSelector,
isStagingSelector,
@ -11,6 +8,10 @@ import {
setIsMovingStage,
setStageCoordinates,
} from 'features/canvas/store/canvasSlice';
import { KonvaEventObject } from 'konva/lib/Node';
import { isEqual } from 'lodash';
import { useCallback } from 'react';
const selector = createSelector(
[canvasSelector, isStagingSelector],
@ -22,7 +23,7 @@ const selector = createSelector(
isMovingBoundingBox,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
{ memoizeOptions: { resultEqualityCheck: isEqual } }
);
const useCanvasDrag = () => {

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

@ -1,7 +1,9 @@
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import {
clearMask,
resetCanvasInteractionState,
@ -10,12 +12,11 @@ import {
setShouldSnapToGrid,
setTool,
} from 'features/canvas/store/canvasSlice';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { useRef } from 'react';
import {
canvasSelector,
isStagingSelector,
} from 'features/canvas/store/canvasSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import { CanvasTool } from '../store/canvasTypes';
import { getCanvasStage } from '../util/konvaInstanceProvider';
@ -44,7 +45,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,10 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import {
canvasSelector,
isStagingSelector,
@ -14,6 +9,12 @@ import {
setIsDrawing,
setIsMovingStage,
} from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import { isEqual } from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition';
import useColorPicker from './useColorUnderCursor';
@ -27,7 +28,7 @@ const selector = createSelector(
isStaging,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
{ memoizeOptions: { resultEqualityCheck: isEqual } }
);
const useCanvasMouseDown = (stageRef: MutableRefObject<Konva.Stage | null>) => {

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

@ -1,10 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import { Vector2d } from 'konva/lib/types';
import _ from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import {
canvasSelector,
isStagingSelector,
@ -13,6 +8,12 @@ import {
addPointToCurrentLine,
setCursorPosition,
} from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import { Vector2d } from 'konva/lib/types';
import { isEqual } from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition';
import useColorPicker from './useColorUnderCursor';
@ -27,7 +28,7 @@ const selector = createSelector(
isStaging,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
{ memoizeOptions: { resultEqualityCheck: isEqual } }
);
const useCanvasMouseMove = (

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

@ -1,6 +1,6 @@
import { useAppDispatch } from 'app/storeHooks';
import { useCallback } from 'react';
import { mouseLeftCanvas } from 'features/canvas/store/canvasSlice';
import { useCallback } from 'react';
const useCanvasMouseOut = () => {
const dispatch = useAppDispatch();

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

@ -1,9 +1,5 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import _ from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import {
canvasSelector,
isStagingSelector,
@ -14,6 +10,11 @@ import {
setIsDrawing,
setIsMovingStage,
} from 'features/canvas/store/canvasSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import Konva from 'konva';
import { isEqual } from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import getScaledCursorPosition from '../util/getScaledCursorPosition';
const selector = createSelector(
@ -27,7 +28,7 @@ const selector = createSelector(
isStaging,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
{ memoizeOptions: { resultEqualityCheck: isEqual } }
);
const useCanvasMouseUp = (

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

@ -1,14 +1,15 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import _ from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import {
setStageCoordinates,
setStageScale,
} from 'features/canvas/store/canvasSlice';
import Konva from 'konva';
import { KonvaEventObject } from 'konva/lib/Node';
import { clamp, isEqual } from 'lodash';
import { MutableRefObject, useCallback } from 'react';
import {
CANVAS_SCALE_BY,
MAX_CANVAS_SCALE,
@ -24,7 +25,7 @@ const selector = createSelector(
stageScale,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
{ memoizeOptions: { resultEqualityCheck: isEqual } }
);
const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
@ -55,7 +56,7 @@ const useCanvasWheel = (stageRef: MutableRefObject<Konva.Stage | null>) => {
delta = -delta;
}
const newScale = _.clamp(
const newScale = clamp(
stageScale * CANVAS_SCALE_BY ** delta,
MIN_CANVAS_SCALE,
MAX_CANVAS_SCALE

1
invokeai/frontend/src/features/canvas/hooks/useColorUnderCursor.ts
View File

@ -1,6 +1,5 @@
import { useAppDispatch } from 'app/storeHooks';
import Konva from 'konva';
import _ from 'lodash';
import {
commitColorPickerColor,
setColorPickerColor,

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

@ -1,7 +1,7 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { CanvasImage, CanvasState, isCanvasBaseImage } from './canvasTypes';
export const canvasSelector = (state: RootState): CanvasState => state.canvas;

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

@ -6,7 +6,8 @@ import {
roundToMultiple,
} from 'common/util/roundDownToMultiple';
import { IRect, Vector2d } from 'konva/lib/types';
import _ from 'lodash';
import { clamp, cloneDeep } from 'lodash';
//
import { RgbaColor } from 'react-colorful';
import calculateCoordinates from '../util/calculateCoordinates';
import calculateScale from '../util/calculateScale';
@ -16,10 +17,10 @@ import getScaledBoundingBoxDimensions from '../util/getScaledBoundingBoxDimensio
import roundDimensionsTo64 from '../util/roundDimensionsTo64';
import {
BoundingBoxScale,
CanvasBaseLine,
CanvasImage,
CanvasLayer,
CanvasLayerState,
CanvasBaseLine,
CanvasMaskLine,
CanvasState,
CanvasTool,
@ -120,7 +121,7 @@ export const canvasSlice = createSlice({
state.brushSize = action.payload;
},
clearMask: (state) => {
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
state.layerState.objects = state.layerState.objects.filter(
(obj) => !isCanvasMaskLine(obj)
);
@ -160,8 +161,8 @@ export const canvasSlice = createSlice({
const { stageDimensions } = state;
const newBoundingBoxDimensions = {
width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64),
height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64),
width: roundDownToMultiple(clamp(image.width, 64, 512), 64),
height: roundDownToMultiple(clamp(image.height, 64, 512), 64),
};
const newBoundingBoxCoordinates = {
@ -185,7 +186,7 @@ export const canvasSlice = createSlice({
state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
state.layerState = {
...initialLayerState,
@ -297,7 +298,7 @@ export const canvasSlice = createSlice({
if (!boundingBox || !image) return;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -316,7 +317,7 @@ export const canvasSlice = createSlice({
state.futureLayerStates = [];
},
discardStagedImages: (state) => {
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -334,7 +335,7 @@ export const canvasSlice = createSlice({
const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } =
state;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -353,7 +354,7 @@ export const canvasSlice = createSlice({
addEraseRect: (state) => {
const { boundingBoxCoordinates, boundingBoxDimensions } = state;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -380,7 +381,7 @@ export const canvasSlice = createSlice({
const newColor =
layer === 'base' && tool === 'brush' ? { color: brushColor } : {};
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -418,7 +419,7 @@ export const canvasSlice = createSlice({
if (!targetState) return;
state.futureLayerStates.unshift(_.cloneDeep(state.layerState));
state.futureLayerStates.unshift(cloneDeep(state.layerState));
if (state.futureLayerStates.length > state.maxHistory) {
state.futureLayerStates.pop();
@ -431,7 +432,7 @@ export const canvasSlice = createSlice({
if (!targetState) return;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -455,7 +456,7 @@ export const canvasSlice = createSlice({
state.shouldShowIntermediates = action.payload;
},
resetCanvas: (state) => {
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
state.layerState = initialLayerState;
state.futureLayerStates = [];
@ -681,7 +682,7 @@ export const canvasSlice = createSlice({
commitStagingAreaImage: (state) => {
const { images, selectedImageIndex } = state.layerState.stagingArea;
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
if (state.pastLayerStates.length > state.maxHistory) {
state.pastLayerStates.shift();
@ -718,8 +719,8 @@ export const canvasSlice = createSlice({
scaledStageHeight
) {
const newBoundingBoxDimensions = {
width: roundDownToMultiple(_.clamp(scaledStageWidth, 64, 512), 64),
height: roundDownToMultiple(_.clamp(scaledStageHeight, 64, 512), 64),
width: roundDownToMultiple(clamp(scaledStageWidth, 64, 512), 64),
height: roundDownToMultiple(clamp(scaledStageHeight, 64, 512), 64),
};
const newBoundingBoxCoordinates = {
@ -792,7 +793,7 @@ export const canvasSlice = createSlice({
state.tool = 'brush';
},
setMergedCanvas: (state, action: PayloadAction<CanvasImage>) => {
state.pastLayerStates.push(_.cloneDeep(state.layerState));
state.pastLayerStates.push(cloneDeep(state.layerState));
state.futureLayerStates = [];

4
invokeai/frontend/src/features/canvas/store/canvasTypes.ts
View File

@ -9,7 +9,7 @@ export const LAYER_NAMES_DICT = [
export const LAYER_NAMES = ['base', 'mask'] as const;
export type CanvasLayer = typeof LAYER_NAMES[number];
export type CanvasLayer = (typeof LAYER_NAMES)[number];
export const BOUNDING_BOX_SCALES_DICT = [
{ key: 'Auto', value: 'auto' },
@ -19,7 +19,7 @@ export const BOUNDING_BOX_SCALES_DICT = [
export const BOUNDING_BOX_SCALES = ['none', 'auto', 'manual'] as const;
export type BoundingBoxScale = typeof BOUNDING_BOX_SCALES[number];
export type BoundingBoxScale = (typeof BOUNDING_BOX_SCALES)[number];
export type CanvasDrawingTool = 'brush' | 'eraser';

18
invokeai/frontend/src/features/canvas/store/thunks/mergeAndUploadCanvas.ts
View File

@ -1,11 +1,7 @@
import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import * as InvokeAI from 'app/invokeai';
import { v4 as uuidv4 } from 'uuid';
import layerToDataURL from '../../util/layerToDataURL';
import downloadFile from '../../util/downloadFile';
import copyImage from '../../util/copyImage';
import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
import { RootState } from 'app/store';
import { addImage } from 'features/gallery/store/gallerySlice';
import {
addToast,
setCurrentStatus,
@ -13,10 +9,14 @@ import {
setIsProcessing,
setProcessingIndeterminateTask,
} from 'features/system/store/systemSlice';
import { addImage } from 'features/gallery/store/gallerySlice';
import i18n from 'i18n';
import { v4 as uuidv4 } from 'uuid';
import copyImage from '../../util/copyImage';
import downloadFile from '../../util/downloadFile';
import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
import layerToDataURL from '../../util/layerToDataURL';
import { setMergedCanvas } from '../canvasSlice';
import { CanvasState } from '../canvasTypes';
import i18n from 'i18n';
type MergeAndUploadCanvasConfig = {
cropVisible?: boolean;
@ -96,7 +96,7 @@ export const mergeAndUploadCanvas =
})
);
const response = await fetch(window.location.origin + '/upload', {
const response = await fetch(`${window.location.origin}/upload`, {
method: 'POST',
body: formData,
});

2
invokeai/frontend/src/features/canvas/util/generateMask.ts
View File

@ -1,6 +1,6 @@
import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
import Konva from 'konva';
import { IRect } from 'konva/lib/types';
import { CanvasMaskLine } from 'features/canvas/store/canvasTypes';
/**
* Generating a mask image from InpaintingCanvas.tsx is not as simple

15
invokeai/frontend/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -1,15 +1,16 @@
import { useAppSelector } from 'app/storeHooks';
import CurrentImageButtons from './CurrentImageButtons';
import { MdPhoto } from 'react-icons/md';
import CurrentImagePreview from './CurrentImagePreview';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import _ from 'lodash';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/storeHooks';
import { GalleryState } from 'features/gallery/store/gallerySlice';
import {
activeTabNameSelector,
uiSelector,
} from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { MdPhoto } from 'react-icons/md';
import { gallerySelector } from '../store/gallerySelectors';
import CurrentImageButtons from './CurrentImageButtons';
import CurrentImagePreview from './CurrentImagePreview';
export const currentImageDisplaySelector = createSelector(
[gallerySelector, uiSelector, activeTabNameSelector],
@ -25,7 +26,7 @@ export const currentImageDisplaySelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

13
invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -1,6 +1,5 @@
import { IconButton, Image } from '@chakra-ui/react';
import { useState } from 'react';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import {
GalleryCategory,
@ -8,11 +7,13 @@ import {
selectNextImage,
selectPrevImage,
} from 'features/gallery/store/gallerySlice';
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
import { uiSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { useState } from 'react';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { gallerySelector } from '../store/gallerySelectors';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
export const imagesSelector = createSelector(
[gallerySelector, uiSelector],
@ -45,7 +46,7 @@ export const imagesSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

35
invokeai/frontend/src/features/gallery/components/DeleteImageModal.tsx
View File

@ -1,31 +1,38 @@
import {
Text,
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
useDisclosure,
Button,
Switch,
Flex,
FormControl,
FormLabel,
Flex,
Switch,
Text,
useDisclosure,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { ChangeEvent, ReactElement, SyntheticEvent } from 'react';
import { cloneElement, forwardRef, useRef } from 'react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import * as InvokeAI from 'app/invokeai';
import { deleteImage } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors';
import {
setShouldConfirmOnDelete,
SystemState,
} from 'features/system/store/systemSlice';
import * as InvokeAI from 'app/invokeai';
import { isEqual } from 'lodash';
import {
ChangeEvent,
cloneElement,
forwardRef,
ReactElement,
SyntheticEvent,
useRef,
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import _ from 'lodash';
import { systemSelector } from 'features/system/store/systemSelectors';
const deleteImageModalSelector = createSelector(
systemSelector,
@ -35,7 +42,7 @@ const deleteImageModalSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);
@ -116,7 +123,7 @@ const DeleteImageModal = forwardRef(
</Text>
<FormControl>
<Flex alignItems={'center'}>
<FormLabel mb={0}>Don't ask me again</FormLabel>
<FormLabel mb={0}>Don&apos;t ask me again</FormLabel>
<Switch
checked={!shouldConfirmOnDelete}
onChange={handleChangeShouldConfirmOnDelete}
@ -145,4 +152,6 @@ const DeleteImageModal = forwardRef(
}
);
DeleteImageModal.displayName = 'DeleteImageModal';
export default DeleteImageModal;

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

@ -272,4 +272,6 @@ const HoverableImage = memo((props: HoverableImageProps) => {
);
}, memoEqualityCheck);
HoverableImage.displayName = 'HoverableImage';
export default HoverableImage;

59
invokeai/frontend/src/features/gallery/components/ImageGallery.tsx
View File

@ -1,19 +1,16 @@
import { Button } from '@chakra-ui/button';
import { NumberSize, Resizable } from 're-resizable';
import React, {
ChangeEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { MdPhotoLibrary } from 'react-icons/md';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { ButtonGroup } from '@chakra-ui/react';
import { requestImages } from 'app/socketio/actions';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAICheckbox from 'common/components/IAICheckbox';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import IAISlider from 'common/components/IAISlider';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import { imageGallerySelector } from 'features/gallery/store/gallerySelectors';
import {
selectNextImage,
selectPrevImage,
@ -25,24 +22,28 @@ import {
setShouldAutoSwitchToNewImages,
setShouldHoldGalleryOpen,
setShouldPinGallery,
setShouldShowGallery,
setShouldUseSingleGalleryColumn,
} from 'features/gallery/store/gallerySlice';
import HoverableImage from './HoverableImage';
import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
import { ButtonGroup } from '@chakra-ui/react';
import { CSSTransition } from 'react-transition-group';
import { Direction } from 're-resizable/lib/resizer';
import { imageGallerySelector } from 'features/gallery/store/gallerySelectors';
import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
import IAIPopover from 'common/components/IAIPopover';
import IAISlider from 'common/components/IAISlider';
import { BiReset } from 'react-icons/bi';
import IAICheckbox from 'common/components/IAICheckbox';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import _ from 'lodash';
import IAIButton from 'common/components/IAIButton';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { clamp } from 'lodash';
import { Direction } from 're-resizable/lib/resizer';
import React, {
ChangeEvent,
useCallback,
useEffect,
useRef,
useState,
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { BiReset } from 'react-icons/bi';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
import { FaImage, FaUser, FaWrench } from 'react-icons/fa';
import { MdPhotoLibrary } from 'react-icons/md';
import { CSSTransition } from 'react-transition-group';
import HoverableImage from './HoverableImage';
const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
const GALLERY_IMAGE_WIDTH_OFFSET = 40;
@ -212,7 +213,7 @@ export default function ImageGallery() {
'shift+up',
() => {
if (galleryImageMinimumWidth < 256) {
const newMinWidth = _.clamp(
const newMinWidth = clamp(
galleryImageMinimumWidth + IMAGE_SIZE_STEP,
32,
256
@ -227,7 +228,7 @@ export default function ImageGallery() {
'shift+down',
() => {
if (galleryImageMinimumWidth > 32) {
const newMinWidth = _.clamp(
const newMinWidth = clamp(
galleryImageMinimumWidth - IMAGE_SIZE_STEP,
32,
256
@ -315,7 +316,7 @@ export default function ImageGallery() {
delta: NumberSize
) => {
const newWidth = shouldPinGallery
? _.clamp(
? clamp(
Number(galleryWidth) + delta.width,
galleryMinWidth,
Number(galleryMaxWidth)
@ -342,7 +343,7 @@ export default function ImageGallery() {
elementRef: HTMLElement,
delta: NumberSize
) => {
const newWidth = _.clamp(
const newWidth = clamp(
Number(galleryWidth) + delta.width,
galleryMinWidth,
Number(
@ -553,7 +554,7 @@ export default function ImageGallery() {
{isResizing && (
<div
style={{
width: galleryWidth + 'px',
width: `${galleryWidth}px`,
height: '100%',
}}
/>

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

@ -1,3 +1,4 @@
import { ExternalLinkIcon } from '@chakra-ui/icons';
import {
Center,
Flex,
@ -7,16 +8,17 @@ import {
Text,
Tooltip,
} from '@chakra-ui/react';
import { ExternalLinkIcon } from '@chakra-ui/icons';
import { memo } from 'react';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { useAppDispatch } from 'app/storeHooks';
import * as InvokeAI from 'app/invokeai';
import { useAppDispatch } from 'app/storeHooks';
import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs';
import {
setCfgScale,
setHeight,
setImg2imgStrength,
setInitialImage,
setMaskPath,
setPerlin,
setPrompt,
setSampler,
setSeamless,
@ -24,24 +26,22 @@ import {
setSeedWeights,
setShouldFitToWidthHeight,
setSteps,
setWidth,
setInitialImage,
setThreshold,
setPerlin,
setWidth,
} from 'features/parameters/store/generationSlice';
import {
setFacetoolStrength,
setCodeformerFidelity,
setFacetoolStrength,
setFacetoolType,
setHiresFix,
setUpscalingLevel,
setUpscalingStrength,
} from 'features/parameters/store/postprocessingSlice';
import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
import promptToString from 'common/util/promptToString';
import { seedWeightsToString } from 'common/util/seedWeightPairs';
import { FaCopy } from 'react-icons/fa';
import { memo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5';
type MetadataItemProps = {
isLink?: boolean;
@ -459,4 +459,6 @@ const ImageMetadataViewer = memo(
memoEqualityCheck
);
ImageMetadataViewer.displayName = 'ImageMetadataViewer';
export default ImageMetadataViewer;

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

@ -1,11 +1,12 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { GalleryState } from './gallerySlice';
import _ from 'lodash';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { GalleryState } from './gallerySlice';
export const gallerySelector = (state: RootState) => state.gallery;
@ -59,7 +60,7 @@ export const imageGallerySelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);
@ -78,7 +79,7 @@ export const hoverableImageSelector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

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

@ -1,9 +1,9 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import _, { clamp } from 'lodash';
import { createSlice } from '@reduxjs/toolkit';
import * as InvokeAI from 'app/invokeai';
import { IRect } from 'konva/lib/types';
import { InvokeTabName } from 'features/ui/store/tabMap';
import { IRect } from 'konva/lib/types';
import { clamp } from 'lodash';
export type GalleryCategory = 'user' | 'result';

8
invokeai/frontend/src/features/gallery/store/thunks/uploadImage.ts
View File

@ -1,10 +1,10 @@
import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import * as InvokeAI from 'app/invokeai';
import { v4 as uuidv4 } from 'uuid';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { RootState } from 'app/store';
import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
import { setInitialImage } from 'features/parameters/store/generationSlice';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { v4 as uuidv4 } from 'uuid';
import { addImage } from '../gallerySlice';
type UploadImageConfig = {
@ -32,7 +32,7 @@ export const uploadImage =
})
);
const response = await fetch(window.location.origin + '/upload', {
const response = await fetch(`${window.location.origin}/upload`, {
method: 'POST',
body: formData,
});

6
invokeai/frontend/src/features/lightbox/components/Lightbox.tsx
View File

@ -4,14 +4,14 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import CurrentImageButtons from 'features/gallery/components/CurrentImageButtons';
import { imagesSelector } from 'features/gallery/components/CurrentImagePreview';
import ImageGallery from 'features/gallery/components/ImageGallery';
import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
import {
selectNextImage,
selectPrevImage,
} from 'features/gallery/store/gallerySlice';
import ImageGallery from 'features/gallery/components/ImageGallery';
import ImageMetadataViewer from 'features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import React, { useState } from 'react';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { BiExit } from 'react-icons/bi';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';

2
invokeai/frontend/src/features/lightbox/components/ReactPanZoom.tsx
View File

@ -8,7 +8,7 @@ import {
BiZoomOut,
} from 'react-icons/bi';
import { MdFlip } from 'react-icons/md';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
type ReactPanZoomProps = {
image: string;

4
invokeai/frontend/src/features/lightbox/store/lightboxSelectors.ts
View File

@ -1,13 +1,13 @@
import { createSelector } from '@reduxjs/toolkit';
import { RootState } from 'app/store';
import _ from 'lodash';
import { isEqual } from 'lodash';
export const lightboxSelector = createSelector(
(state: RootState) => state.lightbox,
(lightbox) => lightbox,
{
memoizeOptions: {
equalityCheck: _.isEqual,
equalityCheck: isEqual,
},
}
);

2
invokeai/frontend/src/features/lightbox/store/lightboxSlice.ts
View File

@ -1,5 +1,5 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';
export interface LightboxState {
isLightboxOpen: boolean;

2
invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx
View File

@ -6,9 +6,9 @@ import {
Box,
Flex,
} from '@chakra-ui/react';
import { ReactNode } from 'react';
import { Feature } from 'app/features';
import GuideIcon from 'common/components/GuideIcon';
import { ReactNode } from 'react';
export interface InvokeAccordionItemProps {
header: string;

5
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Canvas/BoundingBox/BoundingBoxSettings.tsx
View File

@ -4,7 +4,8 @@ import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
import _ from 'lodash';
import { isEqual } from 'lodash';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
@ -19,7 +20,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

5
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Canvas/InfillAndScalingSettings.tsx
View File

@ -18,7 +18,8 @@ import {
setTileSize,
} from 'features/parameters/store/generationSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
import _ from 'lodash';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
@ -45,7 +46,7 @@ const selector = createSelector(
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
resultEqualityCheck: isEqual,
},
}
);

5
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamSize.tsx
View File

@ -2,14 +2,15 @@ import type { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { setSeamSize } from 'features/parameters/store/generationSlice';
import React from 'react';
import { useTranslation } from 'react-i18next';
export default function SeamSize() {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const seamSize = useAppSelector((state: RootState) => state.generation.seamSize);
const seamSize = useAppSelector(
(state: RootState) => state.generation.seamSize
);
return (
<IAISlider

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamSteps.tsx
View File

@ -2,7 +2,6 @@ import type { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { setSeamSteps } from 'features/parameters/store/generationSlice';
import React from 'react';
import { useTranslation } from 'react-i18next';
export default function SeamSteps() {

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Canvas/SeamCorrection/SeamStrength.tsx
View File

@ -2,7 +2,6 @@ import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';
import { setSeamStrength } from 'features/parameters/store/generationSlice';
import React from 'react';
import { useTranslation } from 'react-i18next';
export default function SeamStrength() {

8
invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx
View File

@ -11,14 +11,14 @@ import {
} from 'features/parameters/store/postprocessingSlice';
import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash';
import { FACETOOL_TYPES } from 'app/constants';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISelect from 'common/components/IAISelect';
import { FACETOOL_TYPES } from 'app/constants';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { postprocessingSelector } from 'features/parameters/store/postprocessingSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
const optionsSelector = createSelector(
[postprocessingSelector, systemSelector],

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreToggle.tsx
View File

@ -1,8 +1,8 @@
import { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRunFacetool } from 'features/parameters/store/postprocessingSlice';
import { ChangeEvent } from 'react';
export default function FaceRestoreToggle() {
const isGFPGANAvailable = useAppSelector(

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageFit.tsx
View File

@ -1,8 +1,8 @@
import React, { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export default function ImageFit() {

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISlider from 'common/components/IAISlider';

6
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx
View File

@ -1,9 +1,9 @@
import { Flex } from '@chakra-ui/react';
import { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setSeamless } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
/**
@ -12,7 +12,9 @@ import { useTranslation } from 'react-i18next';
const SeamlessSettings = () => {
const dispatch = useAppDispatch();
const seamless = useAppSelector((state: RootState) => state.generation.seamless);
const seamless = useAppSelector(
(state: RootState) => state.generation.seamless
);
const handleChangeSeamless = (e: ChangeEvent<HTMLInputElement>) =>
dispatch(setSeamless(e.target.checked));

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Perlin.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/RandomizeSeed.tsx
View File

@ -1,5 +1,4 @@
import { ChangeEvent } from 'react';
import React from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Seed.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx
View File

@ -1,9 +1,9 @@
import { Flex } from '@chakra-ui/react';
import Perlin from './Perlin';
import RandomizeSeed from './RandomizeSeed';
import Seed from './Seed';
import ShuffleSeed from './ShuffleSeed';
import Threshold from './Threshold';
import Perlin from './Perlin';
/**
* Seed & variation options. Includes iteration, seed, seed randomization, variation options.

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx
View File

@ -1,5 +1,4 @@
import { Button } from '@chakra-ui/react';
import React from 'react';
import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/Threshold.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';

10
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleSettings.tsx
View File

@ -1,20 +1,20 @@
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { UpscalingLevel } from 'features/parameters/store/postprocessingSlice';
import {
setUpscalingLevel,
setUpscalingStrength,
UpscalingLevel,
} from 'features/parameters/store/postprocessingSlice';
import { UPSCALING_LEVELS } from 'app/constants';
import { createSelector } from '@reduxjs/toolkit';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { UPSCALING_LEVELS } from 'app/constants';
import IAINumberInput from 'common/components/IAINumberInput';
import IAISelect from 'common/components/IAISelect';
import { useTranslation } from 'react-i18next';
import { postprocessingSelector } from 'features/parameters/store/postprocessingSelectors';
import { systemSelector } from 'features/system/store/systemSelectors';
import { isEqual } from 'lodash';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
const parametersSelector = createSelector(
[postprocessingSelector, systemSelector],

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Upscale/UpscaleToggle.tsx
View File

@ -1,8 +1,8 @@
import { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldRunESRGAN } from 'features/parameters/store/postprocessingSlice';
import { ChangeEvent } from 'react';
export default function UpscaleToggle() {
const isESRGANAvailable = useAppSelector(

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/GenerateVariations.tsx
View File

@ -1,8 +1,8 @@
import React, { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAISwitch from 'common/components/IAISwitch';
import { setShouldGenerateVariations } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
export default function GenerateVariationsToggle() {
const shouldGenerateVariations = useAppSelector(

2
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/SeedWeights.tsx
View File

@ -1,9 +1,9 @@
import React, { ChangeEvent } from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAIInput from 'common/components/IAIInput';
import { validateSeedWeights } from 'common/util/seedWeightPairs';
import { setSeedWeights } from 'features/parameters/store/generationSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export default function SeedWeights() {

1
invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/VariationAmount.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { RootState } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import IAINumberInput from 'common/components/IAINumberInput';

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