From 3a0ec635c9d52e10c757a103e2a271b70b872f71 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 13 Nov 2023 10:01:14 +1100 Subject: [PATCH] feat(ui): add eslint rule `react/jsx-no-bind` This rule enforces no arrow functions in component props. In practice, it means all functions passed as component props must be wrapped in `useCallback()`. This is a performance optimization to prevent unnecessary rerenders. The rule is added and all violations have been fixed, whew! --- invokeai/frontend/web/.eslintrc.js | 1 + .../src/common/components/IAIAlertDialog.tsx | 17 ++- .../src/common/components/IAIMantineInput.tsx | 52 +++++---- .../src/common/components/IAINumberInput.tsx | 40 ++++--- .../web/src/common/components/IAISelect.tsx | 15 +-- .../web/src/common/components/IAISlider.tsx | 19 ++-- .../src/common/components/ImageUploader.tsx | 17 ++- .../ClearCanvasHistoryButtonModal.tsx | 9 +- .../IAICanvasToolbar/IAICanvasMaskOptions.tsx | 41 ++++--- .../IAICanvasToolbar/IAICanvasRedoButton.tsx | 5 +- .../IAICanvasSettingsButtonPopover.tsx | 76 +++++++++---- .../IAICanvasToolChooserOptions.tsx | 39 +++++-- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 43 ++++---- .../IAICanvasToolbar/IAICanvasUndoButton.tsx | 5 +- .../components/ChangeBoardModal.tsx | 7 +- .../components/ParamEmbeddingPopover.tsx | 16 +-- .../components/Boards/BoardAutoAddSelect.tsx | 12 ++- .../components/Boards/BoardContextMenu.tsx | 77 ++++++++------ .../components/GallerySettingsPopover.tsx | 10 +- .../ImageContextMenu/ImageContextMenu.tsx | 56 +++++----- .../components/ImageGrid/GalleryImageGrid.tsx | 12 ++- .../ImageMetadataActions.tsx | 8 +- .../ImageMetadataViewer/ImageMetadataItem.tsx | 9 +- .../lora/components/ParamLoraSelect.tsx | 12 ++- .../nodes/CurrentImage/CurrentImageNode.tsx | 10 +- .../Invocation/fields/FieldContextMenu.tsx | 34 +++--- .../fields/inputs/LoRAModelInputField.tsx | 12 ++- .../fields/inputs/NumberInputField.tsx | 33 +++--- .../BoundingBox/ParamBoundingBoxHeight.tsx | 33 +++--- .../BoundingBox/ParamBoundingBoxWidth.tsx | 33 +++--- .../ParamCanvasCoherenceMode.tsx | 17 +-- .../ParamCanvasCoherenceSteps.tsx | 21 ++-- .../ParamCanvasCoherenceStrength.tsx | 20 ++-- .../MaskAdjustment/ParamMaskBlur.tsx | 19 ++-- .../MaskAdjustment/ParamMaskBlurMethod.tsx | 16 +-- .../ParamScaleBeforeProcessing.tsx | 11 +- .../InfillAndScaling/ParamScaledHeight.tsx | 35 +++--- .../InfillAndScaling/ParamScaledWidth.tsx | 35 +++--- .../Parameters/Core/ParamAspectRatio.tsx | 14 ++- .../ImageToImage/ImageToImageFit.tsx | 10 +- .../components/Parameters/Seed/ParamSeed.tsx | 6 +- .../Parameters/Seed/ParamSeedRandomize.tsx | 9 +- .../Parameters/Seed/ParamSeedShuffle.tsx | 7 +- .../Symmetry/ParamSymmetryHorizontal.tsx | 15 ++- .../Symmetry/ParamSymmetryToggle.tsx | 9 +- .../Symmetry/ParamSymmetryVertical.tsx | 15 ++- .../Upscale/ParamRealESRGANModel.tsx | 7 +- .../sdxl/components/ParamSDXLConcatButton.tsx | 5 +- .../SDXLRefiner/ParamUseSDXLRefiner.tsx | 11 +- .../SettingsModal/SettingsModal.tsx | 95 +++++++++++------ .../ui/components/FloatingGalleryButton.tsx | 6 +- .../FloatingParametersPanelButtons.tsx | 6 +- .../subpanels/AddModelsPanel/AddModels.tsx | 11 +- .../AddModelsPanel/AdvancedAddCheckpoint.tsx | 37 ++++--- .../AddModelsPanel/AdvancedAddDiffusers.tsx | 29 +++-- .../AddModelsPanel/AdvancedAddModels.tsx | 15 +-- .../AddModelsPanel/FoundModelsList.tsx | 7 +- .../AddModelsPanel/ScanAdvancedAddModels.tsx | 33 +++--- .../AddModelsPanel/SearchFolderForm.tsx | 14 +-- .../subpanels/ImportModelsPanel.tsx | 9 +- .../subpanels/MergeModelsPanel.tsx | 100 +++++++++++++----- .../ModelManagerPanel/CheckpointModelEdit.tsx | 7 +- .../ModelManagerPanel/ModelConvert.tsx | 37 ++++--- .../subpanels/ModelManagerPanel/ModelList.tsx | 12 +-- .../SyncModelsButton.tsx | 5 +- 65 files changed, 932 insertions(+), 526 deletions(-) diff --git a/invokeai/frontend/web/.eslintrc.js b/invokeai/frontend/web/.eslintrc.js index c2b1433a9a..976aea9739 100644 --- a/invokeai/frontend/web/.eslintrc.js +++ b/invokeai/frontend/web/.eslintrc.js @@ -24,6 +24,7 @@ module.exports = { root: true, rules: { curly: 'error', + 'react/jsx-no-bind': ['error', { allowBind: true }], 'react/jsx-curly-brace-presence': [ 'error', { props: 'never', children: 'never' }, diff --git a/invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx b/invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx index bd919c162a..a82095daa3 100644 --- a/invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx +++ b/invokeai/frontend/web/src/common/components/IAIAlertDialog.tsx @@ -8,7 +8,14 @@ import { forwardRef, useDisclosure, } from '@chakra-ui/react'; -import { cloneElement, memo, ReactElement, ReactNode, useRef } from 'react'; +import { + cloneElement, + memo, + ReactElement, + ReactNode, + useCallback, + useRef, +} from 'react'; import { useTranslation } from 'react-i18next'; import IAIButton from './IAIButton'; @@ -38,15 +45,15 @@ const IAIAlertDialog = forwardRef((props: Props, ref) => { const { isOpen, onOpen, onClose } = useDisclosure(); const cancelRef = useRef(null); - const handleAccept = () => { + const handleAccept = useCallback(() => { acceptCallback(); onClose(); - }; + }, [acceptCallback, onClose]); - const handleCancel = () => { + const handleCancel = useCallback(() => { cancelCallback && cancelCallback(); onClose(); - }; + }, [cancelCallback, onClose]); return ( <> diff --git a/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx b/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx index afe8b9442b..a324f80770 100644 --- a/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx +++ b/invokeai/frontend/web/src/common/components/IAIMantineInput.tsx @@ -1,6 +1,7 @@ import { useColorMode } from '@chakra-ui/react'; import { TextInput, TextInputProps } from '@mantine/core'; import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens'; +import { useCallback } from 'react'; import { mode } from 'theme/util/mode'; type IAIMantineTextInputProps = TextInputProps; @@ -20,26 +21,37 @@ export default function IAIMantineTextInput(props: IAIMantineTextInputProps) { } = useChakraThemeTokens(); const { colorMode } = useColorMode(); - return ( - ({ - input: { - color: mode(base900, base100)(colorMode), - backgroundColor: mode(base50, base900)(colorMode), - borderColor: mode(base200, base800)(colorMode), - borderWidth: 2, - outline: 'none', - ':focus': { - borderColor: mode(accent300, accent500)(colorMode), - }, + const stylesFunc = useCallback( + () => ({ + input: { + color: mode(base900, base100)(colorMode), + backgroundColor: mode(base50, base900)(colorMode), + borderColor: mode(base200, base800)(colorMode), + borderWidth: 2, + outline: 'none', + ':focus': { + borderColor: mode(accent300, accent500)(colorMode), }, - label: { - color: mode(base700, base300)(colorMode), - fontWeight: 'normal', - marginBottom: 4, - }, - })} - {...rest} - /> + }, + label: { + color: mode(base700, base300)(colorMode), + fontWeight: 'normal' as const, + marginBottom: 4, + }, + }), + [ + accent300, + accent500, + base100, + base200, + base300, + base50, + base700, + base800, + base900, + colorMode, + ] ); + + return ; } diff --git a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx index 243dac9d63..36098ec097 100644 --- a/invokeai/frontend/web/src/common/components/IAINumberInput.tsx +++ b/invokeai/frontend/web/src/common/components/IAINumberInput.tsx @@ -98,28 +98,34 @@ const IAINumberInput = forwardRef((props: Props, ref) => { } }, [value, valueAsString]); - const handleOnChange = (v: string) => { - setValueAsString(v); - // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc. - if (!v.match(numberStringRegex)) { - // Cast the value to number. Floor it if it should be an integer. - onChange(isInteger ? Math.floor(Number(v)) : Number(v)); - } - }; + const handleOnChange = useCallback( + (v: string) => { + setValueAsString(v); + // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc. + if (!v.match(numberStringRegex)) { + // Cast the value to number. Floor it if it should be an integer. + onChange(isInteger ? Math.floor(Number(v)) : Number(v)); + } + }, + [isInteger, onChange] + ); /** * Clicking the steppers allows the value to go outside bounds; we need to * clamp it on blur and floor it if needed. */ - const handleBlur = (e: FocusEvent) => { - const clamped = clamp( - isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value), - min, - max - ); - setValueAsString(String(clamped)); - onChange(clamped); - }; + const handleBlur = useCallback( + (e: FocusEvent) => { + const clamped = clamp( + isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value), + min, + max + ); + setValueAsString(String(clamped)); + onChange(clamped); + }, + [isInteger, max, min, onChange] + ); const handleKeyDown = useCallback( (e: KeyboardEvent) => { diff --git a/invokeai/frontend/web/src/common/components/IAISelect.tsx b/invokeai/frontend/web/src/common/components/IAISelect.tsx index 7bc8952d94..faa5732017 100644 --- a/invokeai/frontend/web/src/common/components/IAISelect.tsx +++ b/invokeai/frontend/web/src/common/components/IAISelect.tsx @@ -6,7 +6,7 @@ import { Tooltip, TooltipProps, } from '@chakra-ui/react'; -import { memo, MouseEvent } from 'react'; +import { memo, MouseEvent, useCallback } from 'react'; import IAIOption from './IAIOption'; type IAISelectProps = SelectProps & { @@ -33,15 +33,16 @@ const IAISelect = (props: IAISelectProps) => { spaceEvenly, ...rest } = props; + const handleClick = useCallback((e: MouseEvent) => { + e.stopPropagation(); + e.nativeEvent.stopImmediatePropagation(); + e.nativeEvent.stopPropagation(); + e.nativeEvent.cancelBubble = true; + }, []); return ( ) => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - e.nativeEvent.stopPropagation(); - e.nativeEvent.cancelBubble = true; - }} + onClick={handleClick} sx={ horizontal ? { diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx index e879c00977..3ed3ee1920 100644 --- a/invokeai/frontend/web/src/common/components/IAISlider.tsx +++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx @@ -186,6 +186,13 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => { [dispatch] ); + const handleMouseEnter = useCallback(() => setShowTooltip(true), []); + const handleMouseLeave = useCallback(() => setShowTooltip(false), []); + const handleStepperClick = useCallback( + () => onChange(Number(localInputValue)), + [localInputValue, onChange] + ); + return ( { max={max} step={step} onChange={handleSliderChange} - onMouseEnter={() => setShowTooltip(true)} - onMouseLeave={() => setShowTooltip(false)} + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} focusThumbOnChange={false} isDisabled={isDisabled} {...rest} @@ -332,12 +339,8 @@ const IAISlider = forwardRef((props: IAIFullSliderProps, ref) => { {...sliderNumberInputFieldProps} /> - onChange(Number(localInputValue))} - /> - onChange(Number(localInputValue))} - /> + + )} diff --git a/invokeai/frontend/web/src/common/components/ImageUploader.tsx b/invokeai/frontend/web/src/common/components/ImageUploader.tsx index 59349e615d..913d3b4414 100644 --- a/invokeai/frontend/web/src/common/components/ImageUploader.tsx +++ b/invokeai/frontend/web/src/common/components/ImageUploader.tsx @@ -146,16 +146,15 @@ const ImageUploader = (props: ImageUploaderProps) => { }; }, [inputRef]); + const handleKeyDown = useCallback((e: KeyboardEvent) => { + // Bail out if user hits spacebar - do not open the uploader + if (e.key === ' ') { + return; + } + }, []); + return ( - { - // Bail out if user hits spacebar - do not open the uploader - if (e.key === ' ') { - return; - } - }} - > + {children} diff --git a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx index a86497aade..3f5264fe92 100644 --- a/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx @@ -5,17 +5,22 @@ import { clearCanvasHistory } from 'features/canvas/store/canvasSlice'; import { useTranslation } from 'react-i18next'; import { FaTrash } from 'react-icons/fa'; import { isStagingSelector } from '../store/canvasSelectors'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; const ClearCanvasHistoryButtonModal = () => { const isStaging = useAppSelector(isStagingSelector); const dispatch = useAppDispatch(); const { t } = useTranslation(); + const acceptCallback = useCallback( + () => dispatch(clearCanvasHistory()), + [dispatch] + ); + return ( dispatch(clearCanvasHistory())} + acceptCallback={acceptCallback} acceptButtonText={t('unifiedCanvas.clearHistory')} triggerComponent={ } isDisabled={isStaging}> diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx index 43e8febd66..e1b2105bbc 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx @@ -20,7 +20,8 @@ import { } from 'features/canvas/store/canvasSlice'; import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { isEqual } from 'lodash-es'; -import { memo } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; +import { RgbaColor } from 'react-colorful'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -95,18 +96,35 @@ const IAICanvasMaskOptions = () => { [isMaskEnabled] ); - const handleToggleMaskLayer = () => { + const handleToggleMaskLayer = useCallback(() => { dispatch(setLayer(layer === 'mask' ? 'base' : 'mask')); - }; + }, [dispatch, layer]); - const handleClearMask = () => dispatch(clearMask()); + const handleClearMask = useCallback(() => { + dispatch(clearMask()); + }, [dispatch]); - const handleToggleEnableMask = () => + const handleToggleEnableMask = useCallback(() => { dispatch(setIsMaskEnabled(!isMaskEnabled)); + }, [dispatch, isMaskEnabled]); - const handleSaveMask = async () => { + const handleSaveMask = useCallback(async () => { dispatch(canvasMaskSavedToGallery()); - }; + }, [dispatch]); + + const handleChangePreserveMaskedArea = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldPreserveMaskedArea(e.target.checked)); + }, + [dispatch] + ); + + const handleChangeMaskColor = useCallback( + (newColor: RgbaColor) => { + dispatch(setMaskColor(newColor)); + }, + [dispatch] + ); return ( { - dispatch(setShouldPreserveMaskedArea(e.target.checked)) - } + onChange={handleChangePreserveMaskedArea} /> - dispatch(setMaskColor(newColor))} - /> + } onClick={handleSaveMask}> Save Mask diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx index 18ded1c9c7..e20980f318 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasRedoButton.tsx @@ -10,6 +10,7 @@ import { redo } from 'features/canvas/store/canvasSlice'; import { stateSelector } from 'app/store/store'; import { isEqual } from 'lodash-es'; import { useTranslation } from 'react-i18next'; +import { useCallback } from 'react'; const canvasRedoSelector = createSelector( [stateSelector, activeTabNameSelector], @@ -34,9 +35,9 @@ export default function IAICanvasRedoButton() { const { t } = useTranslation(); - const handleRedo = () => { + const handleRedo = useCallback(() => { dispatch(redo()); - }; + }, [dispatch]); useHotkeys( ['meta+shift+z', 'ctrl+shift+z', 'control+y', 'meta+y'], diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx index aae2da5632..c653c4ccd2 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx @@ -18,7 +18,7 @@ import { } from 'features/canvas/store/canvasSlice'; import { isEqual } from 'lodash-es'; -import { ChangeEvent, memo } from 'react'; +import { ChangeEvent, memo, useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { FaWrench } from 'react-icons/fa'; @@ -86,8 +86,52 @@ const IAICanvasSettingsButtonPopover = () => { [shouldSnapToGrid] ); - const handleChangeShouldSnapToGrid = (e: ChangeEvent) => - dispatch(setShouldSnapToGrid(e.target.checked)); + const handleChangeShouldSnapToGrid = useCallback( + (e: ChangeEvent) => + dispatch(setShouldSnapToGrid(e.target.checked)), + [dispatch] + ); + + const handleChangeShouldShowIntermediates = useCallback( + (e: ChangeEvent) => + dispatch(setShouldShowIntermediates(e.target.checked)), + [dispatch] + ); + const handleChangeShouldShowGrid = useCallback( + (e: ChangeEvent) => + dispatch(setShouldShowGrid(e.target.checked)), + [dispatch] + ); + const handleChangeShouldDarkenOutsideBoundingBox = useCallback( + (e: ChangeEvent) => + dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)), + [dispatch] + ); + const handleChangeShouldAutoSave = useCallback( + (e: ChangeEvent) => + dispatch(setShouldAutoSave(e.target.checked)), + [dispatch] + ); + const handleChangeShouldCropToBoundingBoxOnSave = useCallback( + (e: ChangeEvent) => + dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)), + [dispatch] + ); + const handleChangeShouldRestrictStrokesToBox = useCallback( + (e: ChangeEvent) => + dispatch(setShouldRestrictStrokesToBox(e.target.checked)), + [dispatch] + ); + const handleChangeShouldShowCanvasDebugInfo = useCallback( + (e: ChangeEvent) => + dispatch(setShouldShowCanvasDebugInfo(e.target.checked)), + [dispatch] + ); + const handleChangeShouldAntialias = useCallback( + (e: ChangeEvent) => + dispatch(setShouldAntialias(e.target.checked)), + [dispatch] + ); return ( { - dispatch(setShouldShowIntermediates(e.target.checked)) - } + onChange={handleChangeShouldShowIntermediates} /> dispatch(setShouldShowGrid(e.target.checked))} + onChange={handleChangeShouldShowGrid} /> { - dispatch(setShouldDarkenOutsideBoundingBox(e.target.checked)) - } + onChange={handleChangeShouldDarkenOutsideBoundingBox} /> dispatch(setShouldAutoSave(e.target.checked))} + onChange={handleChangeShouldAutoSave} /> - dispatch(setShouldCropToBoundingBoxOnSave(e.target.checked)) - } + onChange={handleChangeShouldCropToBoundingBoxOnSave} /> - dispatch(setShouldRestrictStrokesToBox(e.target.checked)) - } + onChange={handleChangeShouldRestrictStrokesToBox} /> - dispatch(setShouldShowCanvasDebugInfo(e.target.checked)) - } + onChange={handleChangeShouldShowCanvasDebugInfo} /> dispatch(setShouldAntialias(e.target.checked))} + onChange={handleChangeShouldAntialias} /> diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx index 0030f1f06e..40b3186fb1 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx @@ -15,7 +15,8 @@ import { setTool, } from 'features/canvas/store/canvasSlice'; import { clamp, isEqual } from 'lodash-es'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; +import { RgbaColor } from 'react-colorful'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; @@ -172,11 +173,33 @@ const IAICanvasToolChooserOptions = () => { [brushColor] ); - const handleSelectBrushTool = () => dispatch(setTool('brush')); - const handleSelectEraserTool = () => dispatch(setTool('eraser')); - const handleSelectColorPickerTool = () => dispatch(setTool('colorPicker')); - const handleFillRect = () => dispatch(addFillRect()); - const handleEraseBoundingBox = () => dispatch(addEraseRect()); + const handleSelectBrushTool = useCallback(() => { + dispatch(setTool('brush')); + }, [dispatch]); + const handleSelectEraserTool = useCallback(() => { + dispatch(setTool('eraser')); + }, [dispatch]); + const handleSelectColorPickerTool = useCallback(() => { + dispatch(setTool('colorPicker')); + }, [dispatch]); + const handleFillRect = useCallback(() => { + dispatch(addFillRect()); + }, [dispatch]); + const handleEraseBoundingBox = useCallback(() => { + dispatch(addEraseRect()); + }, [dispatch]); + const handleChangeBrushSize = useCallback( + (newSize: number) => { + dispatch(setBrushSize(newSize)); + }, + [dispatch] + ); + const handleChangeBrushColor = useCallback( + (newColor: RgbaColor) => { + dispatch(setBrushColor(newColor)); + }, + [dispatch] + ); return ( @@ -233,7 +256,7 @@ const IAICanvasToolChooserOptions = () => { label={t('unifiedCanvas.brushSize')} value={brushSize} withInput - onChange={(newSize) => dispatch(setBrushSize(newSize))} + onChange={handleChangeBrushSize} sliderNumberInputProps={{ max: 500 }} /> @@ -247,7 +270,7 @@ const IAICanvasToolChooserOptions = () => { dispatch(setBrushColor(newColor))} + onChange={handleChangeBrushColor} /> diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 617fedf0f0..7c04208349 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -27,7 +27,7 @@ import { import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider'; import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard'; import { isEqual } from 'lodash-es'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import { @@ -151,7 +151,9 @@ const IAICanvasToolbar = () => { [canvasBaseLayer] ); - const handleSelectMoveTool = () => dispatch(setTool('move')); + const handleSelectMoveTool = useCallback(() => { + dispatch(setTool('move')); + }, [dispatch]); const handleClickResetCanvasView = useSingleAndDoubleClick( () => handleResetCanvasView(false), @@ -174,36 +176,39 @@ const IAICanvasToolbar = () => { ); }; - const handleResetCanvas = () => { + const handleResetCanvas = useCallback(() => { dispatch(resetCanvas()); - }; + }, [dispatch]); - const handleMergeVisible = () => { + const handleMergeVisible = useCallback(() => { dispatch(canvasMerged()); - }; + }, [dispatch]); - const handleSaveToGallery = () => { + const handleSaveToGallery = useCallback(() => { dispatch(canvasSavedToGallery()); - }; + }, [dispatch]); - const handleCopyImageToClipboard = () => { + const handleCopyImageToClipboard = useCallback(() => { if (!isClipboardAPIAvailable) { return; } dispatch(canvasCopiedToClipboard()); - }; + }, [dispatch, isClipboardAPIAvailable]); - const handleDownloadAsImage = () => { + const handleDownloadAsImage = useCallback(() => { dispatch(canvasDownloadedAsImage()); - }; + }, [dispatch]); - const handleChangeLayer = (v: string) => { - const newLayer = v as CanvasLayer; - dispatch(setLayer(newLayer)); - if (newLayer === 'mask' && !isMaskEnabled) { - dispatch(setIsMaskEnabled(true)); - } - }; + const handleChangeLayer = useCallback( + (v: string) => { + const newLayer = v as CanvasLayer; + dispatch(setLayer(newLayer)); + if (newLayer === 'mask' && !isMaskEnabled) { + dispatch(setIsMaskEnabled(true)); + } + }, + [dispatch, isMaskEnabled] + ); return ( { + const handleUndo = useCallback(() => { dispatch(undo()); - }; + }, [dispatch]); useHotkeys( ['meta+z', 'ctrl+z'], diff --git a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx index 6bdf434d52..122b2b7d38 100644 --- a/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx +++ b/invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx @@ -87,6 +87,11 @@ const ChangeBoardModal = () => { selectedBoard, ]); + const handleSetSelectedBoard = useCallback( + (v: string | null) => setSelectedBoard(v), + [] + ); + const cancelRef = useRef(null); return ( @@ -113,7 +118,7 @@ const ChangeBoardModal = () => { isFetching ? t('boards.loading') : t('boards.selectBoard') } disabled={isFetching} - onChange={(v) => setSelectedBoard(v)} + onChange={handleSetSelectedBoard} value={selectedBoard} data={data} /> diff --git a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx index 164fd01a1f..32334a9f88 100644 --- a/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx +++ b/invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx @@ -14,9 +14,9 @@ import IAIMantineSelectItemWithTooltip from 'common/components/IAIMantineSelectI import { MODEL_TYPE_MAP } from 'features/parameters/types/constants'; import { forEach } from 'lodash-es'; import { PropsWithChildren, memo, useCallback, useMemo, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useGetTextualInversionModelsQuery } from 'services/api/endpoints/models'; import { PARAMETERS_PANEL_WIDTH } from 'theme/util/constants'; -import { useTranslation } from 'react-i18next'; type Props = PropsWithChildren & { onSelect: (v: string) => void; @@ -78,6 +78,13 @@ const ParamEmbeddingPopover = (props: Props) => { [onSelect] ); + const filterFunc = useCallback( + (value: string, item: SelectItem) => + item.label?.toLowerCase().includes(value.toLowerCase().trim()) || + item.value.toLowerCase().includes(value.toLowerCase().trim()), + [] + ); + return ( { itemComponent={IAIMantineSelectItemWithTooltip} disabled={data.length === 0} onDropdownClose={onClose} - filter={(value, item: SelectItem) => - item.label - ?.toLowerCase() - .includes(value.toLowerCase().trim()) || - item.value.toLowerCase().includes(value.toLowerCase().trim()) - } + filter={filterFunc} onChange={handleChange} /> )} diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx index 29211a7558..9c77500ef3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardAutoAddSelect.tsx @@ -60,6 +60,13 @@ const BoardAutoAddSelect = () => { [dispatch] ); + const filterFunc = useCallback( + (value: string, item: SelectItem) => + item.label?.toLowerCase().includes(value.toLowerCase().trim()) || + item.value.toLowerCase().includes(value.toLowerCase().trim()), + [] + ); + return ( { nothingFound={t('boards.noMatching')} itemComponent={IAIMantineSelectItemWithTooltip} disabled={!hasBoards || autoAssignBoardOnClick} - filter={(value, item: SelectItem) => - item.label?.toLowerCase().includes(value.toLowerCase().trim()) || - item.value.toLowerCase().includes(value.toLowerCase().trim()) - } + filter={filterFunc} onChange={handleChange} /> ); diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx index 5dd6b94753..97e49b493c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx @@ -90,6 +90,50 @@ const BoardContextMenu = ({ e.preventDefault(); }, []); + const renderMenuFunc = useCallback( + () => ( + + + } + isDisabled={isAutoAdd || autoAssignBoardOnClick} + onClick={handleSetAutoAdd} + > + {t('boards.menuItemAutoAdd')} + + {isBulkDownloadEnabled && ( + } onClickCapture={handleBulkDownload}> + {t('boards.downloadBoard')} + + )} + {!board && } + {board && ( + + )} + + + ), + [ + autoAssignBoardOnClick, + board, + boardName, + handleBulkDownload, + handleSetAutoAdd, + isAutoAdd, + isBulkDownloadEnabled, + setBoardToDelete, + skipEvent, + t, + ] + ); + return ( menuProps={{ size: 'sm', isLazy: true }} @@ -97,38 +141,7 @@ const BoardContextMenu = ({ bg: 'transparent', _hover: { bg: 'transparent' }, }} - renderMenu={() => ( - - - } - isDisabled={isAutoAdd || autoAssignBoardOnClick} - onClick={handleSetAutoAdd} - > - {t('boards.menuItemAutoAdd')} - - {isBulkDownloadEnabled && ( - } - onClickCapture={handleBulkDownload} - > - {t('boards.downloadBoard')} - - )} - {!board && } - {board && ( - - )} - - - )} + renderMenu={renderMenuFunc} > {children} diff --git a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx index 2eab78d118..015a206fa2 100644 --- a/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx @@ -61,6 +61,12 @@ const GallerySettingsPopover = () => { [dispatch] ); + const handleChangeAutoAssignBoardOnClick = useCallback( + (e: ChangeEvent) => + dispatch(autoAssignBoardOnClickChanged(e.target.checked)), + [dispatch] + ); + return ( { ) => - dispatch(autoAssignBoardOnClickChanged(e.target.checked)) - } + onChange={handleChangeAutoAssignBoardOnClick} /> diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx index 0c13b37f0c..6fc5765785 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageContextMenu.tsx @@ -35,6 +35,34 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => { e.preventDefault(); }, []); + const renderMenuFunc = useCallback(() => { + if (!imageDTO) { + return null; + } + + if (selectionCount > 1) { + return ( + + + + ); + } + + return ( + + + + ); + }, [imageDTO, selectionCount, skipEvent]); + return ( menuProps={{ size: 'sm', isLazy: true }} @@ -42,33 +70,7 @@ const ImageContextMenu = ({ imageDTO, children }: Props) => { bg: 'transparent', _hover: { bg: 'transparent' }, }} - renderMenu={() => { - if (!imageDTO) { - return null; - } - - if (selectionCount > 1) { - return ( - - - - ); - } - - return ( - - - - ); - }} + renderMenu={renderMenuFunc} > {children} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx index dc41a2ef2a..4b7997f2ef 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx @@ -20,6 +20,7 @@ import { useBoardTotal } from 'services/api/hooks/useBoardTotal'; import GalleryImage from './GalleryImage'; import ImageGridItemContainer from './ImageGridItemContainer'; import ImageGridListContainer from './ImageGridListContainer'; +import { EntityId } from '@reduxjs/toolkit'; const overlayScrollbarsConfig: UseOverlayScrollbarsParams = { defer: true, @@ -71,6 +72,13 @@ const GalleryImageGrid = () => { }); }, [areMoreAvailable, listImages, queryArgs, currentData?.ids.length]); + const itemContentFunc = useCallback( + (index: number, imageName: EntityId) => ( + + ), + [] + ); + useEffect(() => { // Initialize the gallery's custom scrollbar const { current: root } = rootRef; @@ -131,9 +139,7 @@ const GalleryImageGrid = () => { List: ImageGridListContainer, }} scrollerRef={setScroller} - itemContent={(index, imageName) => ( - - )} + itemContent={itemContentFunc} /> { key={index} label="LoRA" value={`${lora.lora.model_name} - ${lora.weight}`} - onClick={() => handleRecallLoRA(lora)} + onClick={handleRecallLoRA.bind(null, lora)} /> ); } @@ -289,7 +289,7 @@ const ImageMetadataActions = (props: Props) => { key={index} label="ControlNet" value={`${controlnet.control_model?.model_name} - ${controlnet.control_weight}`} - onClick={() => handleRecallControlNet(controlnet)} + onClick={handleRecallControlNet.bind(null, controlnet)} /> ))} {validIPAdapters.map((ipAdapter, index) => ( @@ -297,7 +297,7 @@ const ImageMetadataActions = (props: Props) => { key={index} label="IP Adapter" value={`${ipAdapter.ip_adapter_model?.model_name} - ${ipAdapter.weight}`} - onClick={() => handleRecallIPAdapter(ipAdapter)} + onClick={handleRecallIPAdapter.bind(null, ipAdapter)} /> ))} {validT2IAdapters.map((t2iAdapter, index) => ( @@ -305,7 +305,7 @@ const ImageMetadataActions = (props: Props) => { key={index} label="T2I Adapter" value={`${t2iAdapter.t2i_adapter_model?.model_name} - ${t2iAdapter.weight}`} - onClick={() => handleRecallT2IAdapter(t2iAdapter)} + onClick={handleRecallT2IAdapter.bind(null, t2iAdapter)} /> ))} diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx index c03fd26ba1..135159562b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataItem.tsx @@ -1,6 +1,6 @@ import { ExternalLinkIcon } from '@chakra-ui/icons'; import { Flex, IconButton, Link, Text, Tooltip } from '@chakra-ui/react'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { FaCopy } from 'react-icons/fa'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; @@ -27,6 +27,11 @@ const ImageMetadataItem = ({ }: MetadataItemProps) => { const { t } = useTranslation(); + const handleCopy = useCallback( + () => navigator.clipboard.writeText(value.toString()), + [value] + ); + if (!value) { return null; } @@ -53,7 +58,7 @@ const ImageMetadataItem = ({ size="xs" variant="ghost" fontSize={14} - onClick={() => navigator.clipboard.writeText(value.toString())} + onClick={handleCopy} /> )} diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx index 6048e4a159..e2fc841f15 100644 --- a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx +++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx @@ -76,6 +76,13 @@ const ParamLoRASelect = () => { [dispatch, loraModels?.entities] ); + const filterFunc = useCallback( + (value: string, item: SelectItem) => + item.label?.toLowerCase().includes(value.toLowerCase().trim()) || + item.value.toLowerCase().includes(value.toLowerCase().trim()), + [] + ); + if (loraModels?.ids.length === 0) { return ( @@ -94,10 +101,7 @@ const ParamLoRASelect = () => { nothingFound="No matching LoRAs" itemComponent={IAIMantineSelectItemWithTooltip} disabled={data.length === 0} - filter={(value, item: SelectItem) => - item.label?.toLowerCase().includes(value.toLowerCase().trim()) || - item.value.toLowerCase().includes(value.toLowerCase().trim()) - } + filter={filterFunc} onChange={handleChange} data-testid="add-lora" /> diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx index 96ef7c56a3..57cdc6a8db 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx @@ -1,4 +1,4 @@ -import { useState, PropsWithChildren, memo } from 'react'; +import { useState, PropsWithChildren, memo, useCallback } from 'react'; import { useSelector } from 'react-redux'; import { createSelector } from '@reduxjs/toolkit'; import { Flex, Image, Text } from '@chakra-ui/react'; @@ -59,13 +59,13 @@ export default memo(CurrentImageNode); const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => { const [isHovering, setIsHovering] = useState(false); - const handleMouseEnter = () => { + const handleMouseEnter = useCallback(() => { setIsHovering(true); - }; + }, []); - const handleMouseLeave = () => { + const handleMouseLeave = useCallback(() => { setIsHovering(false); - }; + }, []); return ( { nodeId, ]); + const renderMenuFunc = useCallback( + () => + !menuItems.length ? null : ( + + + {menuItems} + + + ), + [fieldTemplateTitle, label, menuItems, skipEvent, t] + ); + return ( menuProps={{ @@ -114,21 +132,7 @@ const FieldContextMenu = ({ nodeId, fieldName, kind, children }: Props) => { bg: 'transparent', _hover: { bg: 'transparent' }, }} - renderMenu={() => - !menuItems.length ? null : ( - - - {menuItems} - - - ) - } + renderMenu={renderMenuFunc} > {children} diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx index 3ca87b3e85..712b1ff5a0 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/LoRAModelInputField.tsx @@ -80,6 +80,13 @@ const LoRAModelInputFieldComponent = ( [dispatch, field.name, nodeId] ); + const filterFunc = useCallback( + (value: string, item: SelectItem) => + item.label?.toLowerCase().includes(value.toLowerCase().trim()) || + item.value.toLowerCase().includes(value.toLowerCase().trim()), + [] + ); + if (loraModels?.ids.length === 0) { return ( @@ -101,10 +108,7 @@ const LoRAModelInputFieldComponent = ( nothingFound={t('models.noMatchingLoRAs')} itemComponent={IAIMantineSelectItemWithTooltip} disabled={data.length === 0} - filter={(value, item: SelectItem) => - item.label?.toLowerCase().includes(value.toLowerCase().trim()) || - item.value.toLowerCase().includes(value.toLowerCase().trim()) - } + filter={filterFunc} error={!selectedLoRAModel} onChange={handleChange} sx={{ diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx index 2afbec1df8..2b2763ca3e 100644 --- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberInputField.tsx @@ -19,7 +19,7 @@ import { IntegerPolymorphicInputFieldTemplate, IntegerPolymorphicInputFieldValue, } from 'features/nodes/types/types'; -import { memo, useEffect, useMemo, useState } from 'react'; +import { memo, useCallback, useEffect, useMemo, useState } from 'react'; const NumberInputFieldComponent = ( props: FieldComponentProps< @@ -43,20 +43,23 @@ const NumberInputFieldComponent = ( [fieldTemplate.type] ); - const handleValueChanged = (v: string) => { - setValueAsString(v); - // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc. - if (!v.match(numberStringRegex)) { - // Cast the value to number. Floor it if it should be an integer. - dispatch( - fieldNumberValueChanged({ - nodeId, - fieldName: field.name, - value: isIntegerField ? Math.floor(Number(v)) : Number(v), - }) - ); - } - }; + const handleValueChanged = useCallback( + (v: string) => { + setValueAsString(v); + // This allows negatives and decimals e.g. '-123', `.5`, `-0.2`, etc. + if (!v.match(numberStringRegex)) { + // Cast the value to number. Floor it if it should be an integer. + dispatch( + fieldNumberValueChanged({ + nodeId, + fieldName: field.name, + value: isIntegerField ? Math.floor(Number(v)) : Number(v), + }) + ); + } + }, + [dispatch, field.name, isIntegerField, nodeId] + ); useEffect(() => { if ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx index 1711c9344a..18a5b52e99 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxHeight.tsx @@ -6,7 +6,7 @@ import IAISlider from 'common/components/IAISlider'; import { roundToMultiple } from 'common/util/roundDownToMultiple'; import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -36,25 +36,28 @@ const ParamBoundingBoxWidth = () => { ? 1024 : 512; - const handleChangeHeight = (v: number) => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - height: Math.floor(v), - }) - ); - if (aspectRatio) { - const newWidth = roundToMultiple(v * aspectRatio, 64); + const handleChangeHeight = useCallback( + (v: number) => { dispatch( setBoundingBoxDimensions({ - width: newWidth, + ...boundingBoxDimensions, height: Math.floor(v), }) ); - } - }; + if (aspectRatio) { + const newWidth = roundToMultiple(v * aspectRatio, 64); + dispatch( + setBoundingBoxDimensions({ + width: newWidth, + height: Math.floor(v), + }) + ); + } + }, + [aspectRatio, boundingBoxDimensions, dispatch] + ); - const handleResetHeight = () => { + const handleResetHeight = useCallback(() => { dispatch( setBoundingBoxDimensions({ ...boundingBoxDimensions, @@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => { }) ); } - }; + }, [aspectRatio, boundingBoxDimensions, dispatch, initial]); return ( { const { t } = useTranslation(); - const handleChangeWidth = (v: number) => { - dispatch( - setBoundingBoxDimensions({ - ...boundingBoxDimensions, - width: Math.floor(v), - }) - ); - if (aspectRatio) { - const newHeight = roundToMultiple(v / aspectRatio, 64); + const handleChangeWidth = useCallback( + (v: number) => { dispatch( setBoundingBoxDimensions({ + ...boundingBoxDimensions, width: Math.floor(v), - height: newHeight, }) ); - } - }; + if (aspectRatio) { + const newHeight = roundToMultiple(v / aspectRatio, 64); + dispatch( + setBoundingBoxDimensions({ + width: Math.floor(v), + height: newHeight, + }) + ); + } + }, + [aspectRatio, boundingBoxDimensions, dispatch] + ); - const handleResetWidth = () => { + const handleResetWidth = useCallback(() => { dispatch( setBoundingBoxDimensions({ ...boundingBoxDimensions, @@ -70,7 +73,7 @@ const ParamBoundingBoxWidth = () => { }) ); } - }; + }, [aspectRatio, boundingBoxDimensions, dispatch, initial]); return ( { ); const { t } = useTranslation(); - const handleCoherenceModeChange = (v: string | null) => { - if (!v) { - return; - } + const handleCoherenceModeChange = useCallback( + (v: string | null) => { + if (!v) { + return; + } - dispatch(setCanvasCoherenceMode(v as CanvasCoherenceModeParam)); - }; + dispatch(setCanvasCoherenceMode(v as CanvasCoherenceModeParam)); + }, + [dispatch] + ); return ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx index 463d596a5c..3c3bc59c20 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceSteps.tsx @@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; import IAISlider from 'common/components/IAISlider'; import { setCanvasCoherenceSteps } from 'features/parameters/store/generationSlice'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; const ParamCanvasCoherenceSteps = () => { @@ -13,6 +13,17 @@ const ParamCanvasCoherenceSteps = () => { ); const { t } = useTranslation(); + const handleChange = useCallback( + (v: number) => { + dispatch(setCanvasCoherenceSteps(v)); + }, + [dispatch] + ); + + const handleReset = useCallback(() => { + dispatch(setCanvasCoherenceSteps(20)); + }, [dispatch]); + return ( { step={1} sliderNumberInputProps={{ max: 999 }} value={canvasCoherenceSteps} - onChange={(v) => { - dispatch(setCanvasCoherenceSteps(v)); - }} + onChange={handleChange} withInput withSliderMarks withReset - handleReset={() => { - dispatch(setCanvasCoherenceSteps(20)); - }} + handleReset={handleReset} /> ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx index e5311db3a6..7fc3096062 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/CoherencePass/ParamCanvasCoherenceStrength.tsx @@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; import IAISlider from 'common/components/IAISlider'; import { setCanvasCoherenceStrength } from 'features/parameters/store/generationSlice'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; const ParamCanvasCoherenceStrength = () => { @@ -13,6 +13,16 @@ const ParamCanvasCoherenceStrength = () => { ); const { t } = useTranslation(); + const handleChange = useCallback( + (v: number) => { + dispatch(setCanvasCoherenceStrength(v)); + }, + [dispatch] + ); + const handleReset = useCallback(() => { + dispatch(setCanvasCoherenceStrength(0.3)); + }, [dispatch]); + return ( { step={0.01} sliderNumberInputProps={{ max: 999 }} value={canvasCoherenceStrength} - onChange={(v) => { - dispatch(setCanvasCoherenceStrength(v)); - }} + onChange={handleChange} withInput withSliderMarks withReset - handleReset={() => { - dispatch(setCanvasCoherenceStrength(0.3)); - }} + handleReset={handleReset} /> ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx index bbadbbabf0..013d4ad4a3 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlur.tsx @@ -3,6 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; import IAISlider from 'common/components/IAISlider'; import { setMaskBlur } from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; export default function ParamMaskBlur() { @@ -12,6 +13,16 @@ export default function ParamMaskBlur() { ); const { t } = useTranslation(); + const handleChange = useCallback( + (v: number) => { + dispatch(setMaskBlur(v)); + }, + [dispatch] + ); + const handleReset = useCallback(() => { + dispatch(setMaskBlur(16)); + }, [dispatch]); + return ( { - dispatch(setMaskBlur(v)); - }} + onChange={handleChange} withInput withSliderMarks withReset - handleReset={() => { - dispatch(setMaskBlur(16)); - }} + handleReset={handleReset} /> ); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx index df0b2ebc90..b7490461b5 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/Compositing/MaskAdjustment/ParamMaskBlurMethod.tsx @@ -5,6 +5,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIInformationalPopover from 'common/components/IAIInformationalPopover/IAIInformationalPopover'; import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { setMaskBlurMethod } from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; type MaskBlurMethods = 'box' | 'gaussian'; @@ -21,12 +22,15 @@ export default function ParamMaskBlurMethod() { const dispatch = useAppDispatch(); const { t } = useTranslation(); - const handleMaskBlurMethodChange = (v: string | null) => { - if (!v) { - return; - } - dispatch(setMaskBlurMethod(v as MaskBlurMethods)); - }; + const handleMaskBlurMethodChange = useCallback( + (v: string | null) => { + if (!v) { + return; + } + dispatch(setMaskBlurMethod(v as MaskBlurMethods)); + }, + [dispatch] + ); return ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx index 1a0e497739..06594b7b1b 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx @@ -10,7 +10,7 @@ import { BoundingBoxScale, } from 'features/canvas/store/canvasTypes'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; const selector = createSelector( @@ -31,9 +31,12 @@ const ParamScaleBeforeProcessing = () => { const { t } = useTranslation(); - const handleChangeBoundingBoxScaleMethod = (v: string) => { - dispatch(setBoundingBoxScaleMethod(v as BoundingBoxScale)); - }; + const handleChangeBoundingBoxScaleMethod = useCallback( + (v: string) => { + dispatch(setBoundingBoxScaleMethod(v as BoundingBoxScale)); + }, + [dispatch] + ); return ( diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx index 6d0ac52b2f..62b7c899f2 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaledHeight.tsx @@ -6,7 +6,7 @@ import { roundToMultiple } from 'common/util/roundDownToMultiple'; import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { setScaledBoundingBoxDimensions } from 'features/canvas/store/canvasSlice'; import { generationSelector } from 'features/parameters/store/generationSelectors'; -import { memo } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; const selector = createSelector( @@ -36,23 +36,26 @@ const ParamScaledHeight = () => { const { t } = useTranslation(); - const handleChangeScaledHeight = (v: number) => { - let newWidth = scaledBoundingBoxDimensions.width; - const newHeight = Math.floor(v); + const handleChangeScaledHeight = useCallback( + (v: number) => { + let newWidth = scaledBoundingBoxDimensions.width; + const newHeight = Math.floor(v); - if (aspectRatio) { - newWidth = roundToMultiple(newHeight * aspectRatio, 64); - } + if (aspectRatio) { + newWidth = roundToMultiple(newHeight * aspectRatio, 64); + } - dispatch( - setScaledBoundingBoxDimensions({ - width: newWidth, - height: newHeight, - }) - ); - }; + dispatch( + setScaledBoundingBoxDimensions({ + width: newWidth, + height: newHeight, + }) + ); + }, + [aspectRatio, dispatch, scaledBoundingBoxDimensions.width] + ); - const handleResetScaledHeight = () => { + const handleResetScaledHeight = useCallback(() => { let resetWidth = scaledBoundingBoxDimensions.width; const resetHeight = Math.floor(initial); @@ -66,7 +69,7 @@ const ParamScaledHeight = () => { height: resetHeight, }) ); - }; + }, [aspectRatio, dispatch, initial, scaledBoundingBoxDimensions.width]); return ( { const { t } = useTranslation(); - const handleChangeScaledWidth = (v: number) => { - const newWidth = Math.floor(v); - let newHeight = scaledBoundingBoxDimensions.height; + const handleChangeScaledWidth = useCallback( + (v: number) => { + const newWidth = Math.floor(v); + let newHeight = scaledBoundingBoxDimensions.height; - if (aspectRatio) { - newHeight = roundToMultiple(newWidth / aspectRatio, 64); - } + if (aspectRatio) { + newHeight = roundToMultiple(newWidth / aspectRatio, 64); + } - dispatch( - setScaledBoundingBoxDimensions({ - width: newWidth, - height: newHeight, - }) - ); - }; + dispatch( + setScaledBoundingBoxDimensions({ + width: newWidth, + height: newHeight, + }) + ); + }, + [aspectRatio, dispatch, scaledBoundingBoxDimensions.height] + ); - const handleResetScaledWidth = () => { + const handleResetScaledWidth = useCallback(() => { const resetWidth = Math.floor(initial); let resetHeight = scaledBoundingBoxDimensions.height; @@ -66,7 +69,7 @@ const ParamScaledWidth = () => { height: resetHeight, }) ); - }; + }, [aspectRatio, dispatch, initial, scaledBoundingBoxDimensions.height]); return ( { + dispatch(setAspectRatio(ratio.value)); + dispatch(setShouldLockAspectRatio(false)); + }, + [dispatch] + ); + return ( {aspectRatios.map((ratio) => ( @@ -39,10 +48,7 @@ export default function ParamAspectRatio() { isDisabled={ activeTabName === 'img2img' ? !shouldFitToWidthHeight : false } - onClick={() => { - dispatch(setAspectRatio(ratio.value)); - dispatch(setShouldLockAspectRatio(false)); - }} + onClick={handleClick.bind(null, ratio)} > {ratio.name} diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx index 03f502846c..0305424ef0 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageFit.tsx @@ -2,7 +2,7 @@ import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAISwitch from 'common/components/IAISwitch'; import { setShouldFitToWidthHeight } from 'features/parameters/store/generationSlice'; -import { ChangeEvent } from 'react'; +import { ChangeEvent, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; export default function ImageToImageFit() { @@ -12,8 +12,12 @@ export default function ImageToImageFit() { (state: RootState) => state.generation.shouldFitToWidthHeight ); - const handleChangeFit = (e: ChangeEvent) => - dispatch(setShouldFitToWidthHeight(e.target.checked)); + const handleChangeFit = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldFitToWidthHeight(e.target.checked)); + }, + [dispatch] + ); const { t } = useTranslation(); diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx index 481fe27964..4dc86fb8ee 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx @@ -3,6 +3,7 @@ import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAINumberInput from 'common/components/IAINumberInput'; import { setSeed } from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; export default function ParamSeed() { @@ -18,7 +19,10 @@ export default function ParamSeed() { const dispatch = useAppDispatch(); - const handleChangeSeed = (v: number) => dispatch(setSeed(v)); + const handleChangeSeed = useCallback( + (v: number) => dispatch(setSeed(v)), + [dispatch] + ); return ( { (state: RootState) => state.generation.shouldRandomizeSeed ); - const handleChangeShouldRandomizeSeed = (e: ChangeEvent) => - dispatch(setShouldRandomizeSeed(e.target.checked)); + const handleChangeShouldRandomizeSeed = useCallback( + (e: ChangeEvent) => + dispatch(setShouldRandomizeSeed(e.target.checked)), + [dispatch] + ); return ( - dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX))); + const handleClickRandomizeSeed = useCallback( + () => dispatch(setSeed(randomInt(NUMPY_RAND_MIN, NUMPY_RAND_MAX))), + [dispatch] + ); return ( { + dispatch(setHorizontalSymmetrySteps(v)); + }, + [dispatch] + ); + const handleReset = useCallback(() => { + dispatch(setHorizontalSymmetrySteps(0)); + }, [dispatch]); + return ( dispatch(setHorizontalSymmetrySteps(v))} + onChange={handleChange} min={0} max={steps} step={1} withInput withSliderMarks withReset - handleReset={() => dispatch(setHorizontalSymmetrySteps(0))} + handleReset={handleReset} /> ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle.tsx index 59386ff526..5de62fd9b2 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryToggle.tsx @@ -2,6 +2,7 @@ import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAISwitch from 'common/components/IAISwitch'; import { setShouldUseSymmetry } from 'features/parameters/store/generationSlice'; +import { ChangeEvent, useCallback } from 'react'; export default function ParamSymmetryToggle() { const shouldUseSymmetry = useAppSelector( @@ -9,12 +10,18 @@ export default function ParamSymmetryToggle() { ); const dispatch = useAppDispatch(); + const handleChange = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldUseSymmetry(e.target.checked)); + }, + [dispatch] + ); return ( dispatch(setShouldUseSymmetry(e.target.checked))} + onChange={handleChange} /> ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryVertical.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryVertical.tsx index c8ddb46a3a..90656272ec 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryVertical.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Symmetry/ParamSymmetryVertical.tsx @@ -2,6 +2,7 @@ import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAISlider from 'common/components/IAISlider'; import { setVerticalSymmetrySteps } from 'features/parameters/store/generationSlice'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; export default function ParamSymmetryVertical() { @@ -15,18 +16,28 @@ export default function ParamSymmetryVertical() { const { t } = useTranslation(); + const handleChange = useCallback( + (v: number) => { + dispatch(setVerticalSymmetrySteps(v)); + }, + [dispatch] + ); + const handleReset = useCallback(() => { + dispatch(setVerticalSymmetrySteps(0)); + }, [dispatch]); + return ( dispatch(setVerticalSymmetrySteps(v))} + onChange={handleChange} min={0} max={steps} step={1} withInput withSliderMarks withReset - handleReset={() => dispatch(setVerticalSymmetrySteps(0))} + handleReset={handleReset} /> ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/ParamRealESRGANModel.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/ParamRealESRGANModel.tsx index 5c1bc09717..8a5ac94fac 100644 --- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/ParamRealESRGANModel.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/ParamRealESRGANModel.tsx @@ -7,6 +7,7 @@ import { ESRGANModelName, esrganModelNameChanged, } from 'features/parameters/store/postprocessingSlice'; +import { useCallback } from 'react'; export const ESRGAN_MODEL_NAMES: SelectItem[] = [ { @@ -42,8 +43,10 @@ export default function ParamESRGANModel() { const dispatch = useAppDispatch(); - const handleChange = (v: string) => - dispatch(esrganModelNameChanged(v as ESRGANModelName)); + const handleChange = useCallback( + (v: string) => dispatch(esrganModelNameChanged(v as ESRGANModelName)), + [dispatch] + ); return ( { + const handleShouldConcatPromptChange = useCallback(() => { dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt)); - }; + }, [dispatch, shouldConcatSDXLStylePrompt]); return ( ) => { - dispatch(setShouldUseSDXLRefiner(e.target.checked)); - }; + const handleUseSDXLRefinerChange = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldUseSDXLRefiner(e.target.checked)); + }, + [dispatch] + ); return ( { useFeatureStatus('localization').isFeatureEnabled; const language = useAppSelector(languageSelector); + const handleChangeShouldConfirmOnDelete = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldConfirmOnDelete(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldUseNSFWChecker = useCallback( + (e: ChangeEvent) => { + dispatch(shouldUseNSFWCheckerChanged(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldUseWatermarker = useCallback( + (e: ChangeEvent) => { + dispatch(shouldUseWatermarkerChanged(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldUseSliders = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldUseSliders(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldShowProgressInViewer = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldShowProgressInViewer(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldAntialiasProgressImage = useCallback( + (e: ChangeEvent) => { + dispatch(shouldAntialiasProgressImageChanged(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldAutoChangeDimensions = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldAutoChangeDimensions(e.target.checked)); + }, + [dispatch] + ); + const handleChangeShouldEnableInformationalPopovers = useCallback( + (e: ChangeEvent) => { + dispatch(setShouldEnableInformationalPopovers(e.target.checked)); + }, + [dispatch] + ); + const handleChangeEnableImageDebugging = useCallback( + (e: ChangeEvent) => { + dispatch(setEnableImageDebugging(e.target.checked)); + }, + [dispatch] + ); + return ( <> {cloneElement(children, { @@ -235,9 +290,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { ) => - dispatch(setShouldConfirmOnDelete(e.target.checked)) - } + onChange={handleChangeShouldConfirmOnDelete} /> @@ -248,17 +301,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { label="Enable NSFW Checker" isDisabled={!isNSFWCheckerAvailable} isChecked={shouldUseNSFWChecker} - onChange={(e: ChangeEvent) => - dispatch(shouldUseNSFWCheckerChanged(e.target.checked)) - } + onChange={handleChangeShouldUseNSFWChecker} /> ) => - dispatch(shouldUseWatermarkerChanged(e.target.checked)) - } + onChange={handleChangeShouldUseWatermarker} /> @@ -272,32 +321,22 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { ) => - dispatch(setShouldUseSliders(e.target.checked)) - } + onChange={handleChangeShouldUseSliders} /> ) => - dispatch(setShouldShowProgressInViewer(e.target.checked)) - } + onChange={handleChangeShouldShowProgressInViewer} /> ) => - dispatch( - shouldAntialiasProgressImageChanged(e.target.checked) - ) - } + onChange={handleChangeShouldAntialiasProgressImage} /> ) => - dispatch(setShouldAutoChangeDimensions(e.target.checked)) - } + onChange={handleChangeShouldAutoChangeDimensions} /> {shouldShowLocalizationToggle && ( { ) => - dispatch( - setShouldEnableInformationalPopovers(e.target.checked) - ) - } + onChange={handleChangeShouldEnableInformationalPopovers} /> @@ -340,9 +375,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => { ) => - dispatch(setEnableImageDebugging(e.target.checked)) - } + onChange={handleChangeEnableImageDebugging} /> )} diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx index b18a069cfa..c999214841 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx @@ -1,7 +1,7 @@ import { Flex } from '@chakra-ui/layout'; import { Portal } from '@chakra-ui/portal'; import IAIIconButton from 'common/components/IAIIconButton'; -import { RefObject, memo } from 'react'; +import { RefObject, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { MdPhotoLibrary } from 'react-icons/md'; import { ImperativePanelHandle } from 'react-resizable-panels'; @@ -17,9 +17,9 @@ const FloatingGalleryButton = ({ }: Props) => { const { t } = useTranslation(); - const handleShowGallery = () => { + const handleShowGallery = useCallback(() => { galleryPanelRef.current?.expand(); - }; + }, [galleryPanelRef]); if (!isGalleryCollapsed) { return null; diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx index da4d409943..49a6e120ab 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingParametersPanelButtons.tsx @@ -3,7 +3,7 @@ import IAIIconButton from 'common/components/IAIIconButton'; import CancelCurrentQueueItemButton from 'features/queue/components/CancelCurrentQueueItemButton'; import ClearQueueButton from 'features/queue/components/ClearQueueButton'; import QueueBackButton from 'features/queue/components/QueueBackButton'; -import { RefObject, memo } from 'react'; +import { RefObject, memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { FaSlidersH } from 'react-icons/fa'; @@ -25,9 +25,9 @@ const FloatingSidePanelButtons = ({ }: Props) => { const { t } = useTranslation(); - const handleShowSidePanel = () => { + const handleShowSidePanel = useCallback(() => { sidePanelRef.current?.expand(); - }; + }, [sidePanelRef]); if (!isSidePanelCollapsed) { return null; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx index 0fa46ec57f..98ab96dea9 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AddModels.tsx @@ -1,6 +1,6 @@ import { ButtonGroup, Flex } from '@chakra-ui/react'; import IAIButton from 'common/components/IAIButton'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import AdvancedAddModels from './AdvancedAddModels'; import SimpleAddModels from './SimpleAddModels'; @@ -8,6 +8,11 @@ export default function AddModels() { const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>( 'simple' ); + const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []); + const handleAddModelAdvanced = useCallback( + () => setAddModelMode('advanced'), + [] + ); return ( setAddModelMode('simple')} + onClick={handleAddModelSimple} > Simple setAddModelMode('advanced')} + onClick={handleAddModelAdvanced} > Advanced diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx index 94a65a9122..f2d5efb565 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddCheckpoint.tsx @@ -6,7 +6,7 @@ import IAIMantineTextInput from 'common/components/IAIMantineInput'; import IAISimpleCheckbox from 'common/components/IAISimpleCheckbox'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; -import { useState } from 'react'; +import { FocusEventHandler, useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useAddMainModelsMutation } from 'services/api/endpoints/models'; import { CheckpointModelConfig } from 'services/api/types'; @@ -83,6 +83,27 @@ export default function AdvancedAddCheckpoint( }); }; + const handleBlurModelLocation: FocusEventHandler = + useCallback( + (e) => { + if (advancedAddCheckpointForm.values['model_name'] === '') { + const modelName = getModelName(e.currentTarget.value); + if (modelName) { + advancedAddCheckpointForm.setFieldValue( + 'model_name', + modelName as string + ); + } + } + }, + [advancedAddCheckpointForm] + ); + + const handleChangeUseCustomConfig = useCallback( + () => setUseCustomConfig((prev) => !prev), + [] + ); + return (
@@ -104,17 +125,7 @@ export default function AdvancedAddCheckpoint( label={t('modelManager.modelLocation')} required {...advancedAddCheckpointForm.getInputProps('path')} - onBlur={(e) => { - if (advancedAddCheckpointForm.values['model_name'] === '') { - const modelName = getModelName(e.currentTarget.value); - if (modelName) { - advancedAddCheckpointForm.setFieldValue( - 'model_name', - modelName as string - ); - } - } - }} + onBlur={handleBlurModelLocation} /> setUseCustomConfig(!useCustomConfig)} + onChange={handleChangeUseCustomConfig} label={t('modelManager.useCustomConfig')} /> diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx index 7c22b4b2ac..2a087681c2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/AdvancedAddDiffusers.tsx @@ -12,6 +12,7 @@ import { setAdvancedAddScanModel } from '../../store/modelManagerSlice'; import BaseModelSelect from '../shared/BaseModelSelect'; import ModelVariantSelect from '../shared/ModelVariantSelect'; import { getModelName } from './util'; +import { FocusEventHandler, useCallback } from 'react'; type AdvancedAddDiffusersProps = { model_path?: string; @@ -74,6 +75,22 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) { }); }; + const handleBlurModelLocation: FocusEventHandler = + useCallback( + (e) => { + if (advancedAddDiffusersForm.values['model_name'] === '') { + const modelName = getModelName(e.currentTarget.value, false); + if (modelName) { + advancedAddDiffusersForm.setFieldValue( + 'model_name', + modelName as string + ); + } + } + }, + [advancedAddDiffusersForm] + ); + return ( @@ -96,17 +113,7 @@ export default function AdvancedAddDiffusers(props: AdvancedAddDiffusersProps) { label={t('modelManager.modelLocation')} placeholder={t('modelManager.modelLocationValidationMsg')} {...advancedAddDiffusersForm.getInputProps('path')} - onBlur={(e) => { - if (advancedAddDiffusersForm.values['model_name'] === '') { - const modelName = getModelName(e.currentTarget.value, false); - if (modelName) { - advancedAddDiffusersForm.setFieldValue( - 'model_name', - modelName as string - ); - } - } - }} + onBlur={handleBlurModelLocation} /> ('diffusers'); const { t } = useTranslation(); + const handleChange = useCallback((v: string | null) => { + if (!v) { + return; + } + setAdvancedAddMode(v as ManualAddMode); + }, []); return ( @@ -25,12 +31,7 @@ export default function AdvancedAddModels() { label={t('modelManager.modelType')} value={advancedAddMode} data={advancedAddModeData} - onChange={(v) => { - if (!v) { - return; - } - setAdvancedAddMode(v as ManualAddMode); - }} + onChange={handleChange} /> dispatch(setAdvancedAddScanModel(model)), + [dispatch] + ); + const renderModels = ({ models, showActions = true, @@ -140,7 +145,7 @@ export default function FoundModelsList() { {t('modelManager.quickAdd')} dispatch(setAdvancedAddScanModel(model))} + onClick={handleClickSetAdvanced.bind(null, model)} isLoading={isLoading} > {t('modelManager.advanced')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx index 615c76b71e..17f4467af5 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/AddModelsPanel/ScanAdvancedAddModels.tsx @@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAIIconButton from 'common/components/IAIIconButton'; import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { motion } from 'framer-motion'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FaTimes } from 'react-icons/fa'; import { setAdvancedAddScanModel } from '../../store/modelManagerSlice'; import AdvancedAddCheckpoint from './AdvancedAddCheckpoint'; @@ -35,6 +35,23 @@ export default function ScanAdvancedAddModels() { const dispatch = useAppDispatch(); + const handleClickSetAdvanced = useCallback( + () => dispatch(setAdvancedAddScanModel(null)), + [dispatch] + ); + + const handleChangeAddMode = useCallback((v: string | null) => { + if (!v) { + return; + } + setAdvancedAddMode(v as ManualAddMode); + if (v === 'checkpoint') { + setIsCheckpoint(true); + } else { + setIsCheckpoint(false); + } + }, []); + if (!advancedAddScanModel) { return null; } @@ -68,7 +85,7 @@ export default function ScanAdvancedAddModels() { } aria-label={t('modelManager.closeAdvanced')} - onClick={() => dispatch(setAdvancedAddScanModel(null))} + onClick={handleClickSetAdvanced} size="sm" /> @@ -76,17 +93,7 @@ export default function ScanAdvancedAddModels() { label={t('modelManager.modelType')} value={advancedAddMode} data={advancedAddModeData} - onChange={(v) => { - if (!v) { - return; - } - setAdvancedAddMode(v as ManualAddMode); - if (v === 'checkpoint') { - setIsCheckpoint(true); - } else { - setIsCheckpoint(false); - } - }} + onChange={handleChangeAddMode} /> {isCheckpoint ? ( { + const scanAgainHandler = useCallback(() => { refetchFoundModels(); - }; + }, [refetchFoundModels]); + + const handleClickClearCheckpointFolder = useCallback(() => { + dispatch(setSearchFolder(null)); + dispatch(setAdvancedAddScanModel(null)); + }, [dispatch]); return ( } size="sm" - onClick={() => { - dispatch(setSearchFolder(null)); - dispatch(setAdvancedAddScanModel(null)); - }} + onClick={handleClickClearCheckpointFolder} isDisabled={!searchFolder} colorScheme="red" /> diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx index b0a8c124eb..acf6b705db 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ImportModelsPanel.tsx @@ -1,6 +1,6 @@ import { ButtonGroup, Flex } from '@chakra-ui/react'; import IAIButton from 'common/components/IAIButton'; -import { useState } from 'react'; +import { useCallback, useState } from 'react'; import { useTranslation } from 'react-i18next'; import AddModels from './AddModelsPanel/AddModels'; import ScanModels from './AddModelsPanel/ScanModels'; @@ -11,11 +11,14 @@ export default function ImportModelsPanel() { const [addModelTab, setAddModelTab] = useState('add'); const { t } = useTranslation(); + const handleClickAddTab = useCallback(() => setAddModelTab('add'), []); + const handleClickScanTab = useCallback(() => setAddModelTab('scan'), []); + return ( setAddModelTab('add')} + onClick={handleClickAddTab} isChecked={addModelTab == 'add'} size="sm" width="100%" @@ -23,7 +26,7 @@ export default function ImportModelsPanel() { {t('modelManager.addModel')} setAddModelTab('scan')} + onClick={handleClickScanTab} isChecked={addModelTab == 'scan'} size="sm" width="100%" diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx index e5c68ba6cf..f9132517c2 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/MergeModelsPanel.tsx @@ -9,7 +9,7 @@ import IAISlider from 'common/components/IAISlider'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { pickBy } from 'lodash-es'; -import { useMemo, useState } from 'react'; +import { ChangeEvent, useCallback, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ALL_BASE_MODELS } from 'services/api/constants'; import { @@ -94,13 +94,58 @@ export default function MergeModelsPanel() { modelsMap[baseModel as keyof typeof modelsMap] ).filter((model) => model !== modelOne && model !== modelTwo); - const handleBaseModelChange = (v: string) => { + const handleBaseModelChange = useCallback((v: string) => { setBaseModel(v as BaseModelType); setModelOne(null); setModelTwo(null); - }; + }, []); - const mergeModelsHandler = () => { + const handleChangeModelOne = useCallback((v: string) => { + setModelOne(v); + }, []); + const handleChangeModelTwo = useCallback((v: string) => { + setModelTwo(v); + }, []); + const handleChangeModelThree = useCallback((v: string) => { + if (!v) { + setModelThree(null); + setModelMergeInterp('add_difference'); + } else { + setModelThree(v); + setModelMergeInterp('weighted_sum'); + } + }, []); + const handleChangeMergedModelName = useCallback( + (e: ChangeEvent) => setMergedModelName(e.target.value), + [] + ); + const handleChangeModelMergeAlpha = useCallback( + (v: number) => setModelMergeAlpha(v), + [] + ); + const handleResetModelMergeAlpha = useCallback( + () => setModelMergeAlpha(0.5), + [] + ); + const handleChangeMergeInterp = useCallback( + (v: MergeInterpolationMethods) => setModelMergeInterp(v), + [] + ); + const handleChangeMergeSaveLocType = useCallback( + (v: 'root' | 'custom') => setModelMergeSaveLocType(v), + [] + ); + const handleChangeMergeCustomSaveLoc = useCallback( + (e: ChangeEvent) => + setModelMergeCustomSaveLoc(e.target.value), + [] + ); + const handleChangeModelMergeForce = useCallback( + (e: ChangeEvent) => setModelMergeForce(e.target.checked), + [] + ); + + const mergeModelsHandler = useCallback(() => { const models_names: string[] = []; let modelsToMerge: (string | null)[] = [modelOne, modelTwo, modelThree]; @@ -150,7 +195,21 @@ export default function MergeModelsPanel() { ); } }); - }; + }, [ + baseModel, + dispatch, + mergeModels, + mergedModelName, + modelMergeAlpha, + modelMergeCustomSaveLoc, + modelMergeForce, + modelMergeInterp, + modelMergeSaveLocType, + modelOne, + modelThree, + modelTwo, + t, + ]); return ( @@ -180,7 +239,7 @@ export default function MergeModelsPanel() { value={modelOne} placeholder={t('modelManager.selectModel')} data={modelOneList} - onChange={(v) => setModelOne(v)} + onChange={handleChangeModelOne} /> setModelTwo(v)} + onChange={handleChangeModelTwo} /> { - if (!v) { - setModelThree(null); - setModelMergeInterp('add_difference'); - } else { - setModelThree(v); - setModelMergeInterp('weighted_sum'); - } - }} + onChange={handleChangeModelThree} /> setMergedModelName(e.target.value)} + onChange={handleChangeMergedModelName} /> setModelMergeAlpha(v)} + onChange={handleChangeModelMergeAlpha} withInput withReset - handleReset={() => setModelMergeAlpha(0.5)} + handleReset={handleResetModelMergeAlpha} withSliderMarks /> @@ -257,10 +308,7 @@ export default function MergeModelsPanel() { {t('modelManager.interpolationType')} - setModelMergeInterp(v)} - > + {modelThree === null ? ( <> @@ -305,7 +353,7 @@ export default function MergeModelsPanel() { setModelMergeSaveLocType(v)} + onChange={handleChangeMergeSaveLocType} > @@ -323,7 +371,7 @@ export default function MergeModelsPanel() { setModelMergeCustomSaveLoc(e.target.value)} + onChange={handleChangeMergeCustomSaveLoc} /> )} @@ -331,7 +379,7 @@ export default function MergeModelsPanel() { setModelMergeForce(e.target.checked)} + onChange={handleChangeModelMergeForce} fontWeight="500" /> diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx index f4943d3ce1..e6a8abbaaf 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/CheckpointModelEdit.tsx @@ -59,6 +59,11 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) { }, }); + const handleChangeUseCustomConfig = useCallback( + () => setUseCustomConfig((prev) => !prev), + [] + ); + const editModelFormSubmitHandler = useCallback( (values: CheckpointModelConfig) => { const responseBody = { @@ -181,7 +186,7 @@ export default function CheckpointModelEdit(props: CheckpointModelEditProps) { )} setUseCustomConfig(!useCustomConfig)} + onChange={handleChangeUseCustomConfig} label="Use Custom Config" /> diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx index 56dcdfd52f..1b92981bda 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelConvert.tsx @@ -14,7 +14,7 @@ import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIButton from 'common/components/IAIButton'; import IAIInput from 'common/components/IAIInput'; import { addToast } from 'features/system/store/systemSlice'; -import { useEffect, useState } from 'react'; +import { ChangeEvent, useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useConvertMainModelsMutation } from 'services/api/endpoints/models'; @@ -42,11 +42,21 @@ export default function ModelConvert(props: ModelConvertProps) { setSaveLocation('InvokeAIRoot'); }, [model]); - const modelConvertCancelHandler = () => { + const modelConvertCancelHandler = useCallback(() => { setSaveLocation('InvokeAIRoot'); - }; + }, []); - const modelConvertHandler = () => { + const handleChangeSaveLocation = useCallback((v: string) => { + setSaveLocation(v as SaveLocation); + }, []); + const handleChangeCustomSaveLocation = useCallback( + (e: ChangeEvent) => { + setCustomSaveLocation(e.target.value); + }, + [] + ); + + const modelConvertHandler = useCallback(() => { const queryArg = { base_model: model.base_model, model_name: model.model_name, @@ -101,7 +111,15 @@ export default function ModelConvert(props: ModelConvertProps) { ) ); }); - }; + }, [ + convertModel, + customSaveLocation, + dispatch, + model.base_model, + model.model_name, + saveLocation, + t, + ]); return ( {t('modelManager.convertToDiffusersSaveLocation')} - setSaveLocation(v as SaveLocation)} - > + @@ -162,9 +177,7 @@ export default function ModelConvert(props: ModelConvertProps) { { - setCustomSaveLocation(e.target.value); - }} + onChange={handleChangeCustomSaveLocation} width="full" /> diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx index a77d58d07f..879aea0f6c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx @@ -100,7 +100,7 @@ const ModelList = (props: ModelListProps) => { setModelFormatFilter('all')} + onClick={setModelFormatFilter.bind(null, 'all')} isChecked={modelFormatFilter === 'all'} size="sm" > @@ -108,35 +108,35 @@ const ModelList = (props: ModelListProps) => { setModelFormatFilter('diffusers')} + onClick={setModelFormatFilter.bind(null, 'diffusers')} isChecked={modelFormatFilter === 'diffusers'} > {t('modelManager.diffusersModels')} setModelFormatFilter('checkpoint')} + onClick={setModelFormatFilter.bind(null, 'checkpoint')} isChecked={modelFormatFilter === 'checkpoint'} > {t('modelManager.checkpointModels')} setModelFormatFilter('onnx')} + onClick={setModelFormatFilter.bind(null, 'onnx')} isChecked={modelFormatFilter === 'onnx'} > {t('modelManager.onnxModels')} setModelFormatFilter('olive')} + onClick={setModelFormatFilter.bind(null, 'olive')} isChecked={modelFormatFilter === 'olive'} > {t('modelManager.oliveModels')} setModelFormatFilter('lora')} + onClick={setModelFormatFilter.bind(null, 'lora')} isChecked={modelFormatFilter === 'lora'} > {t('modelManager.loraModels')} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx index 33ee345ef7..c58abaaae5 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerSettingsPanel/SyncModelsButton.tsx @@ -4,6 +4,7 @@ import IAIButton from 'common/components/IAIButton'; import IAIIconButton from 'common/components/IAIIconButton'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; +import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { FaSync } from 'react-icons/fa'; import { useSyncModelsMutation } from 'services/api/endpoints/models'; @@ -19,7 +20,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) { const [syncModels, { isLoading }] = useSyncModelsMutation(); - const syncModelsHandler = () => { + const syncModelsHandler = useCallback(() => { syncModels() .unwrap() .then((_) => { @@ -44,7 +45,7 @@ export default function SyncModelsButton(props: SyncModelsButtonProps) { ); } }); - }; + }, [dispatch, syncModels, t]); return !iconMode ? (