From 5344481809df219a009c7ce3faed06a7959f32df Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 24 Jan 2023 16:43:29 +1300 Subject: [PATCH 01/11] Fix Slider not being able to take typed input --- frontend/src/common/components/IAISlider.tsx | 41 ++++--- .../BoundingBoxSettings.tsx | 6 +- .../Canvas/InfillAndScalingOptions.tsx | 12 +- .../Canvas/SeamCorrectionOptions.tsx | 113 ------------------ .../Canvas/SeamCorrectionOptions/SeamBlur.tsx | 32 +++++ .../SeamCorrectionOptions.tsx | 18 +++ .../Canvas/SeamCorrectionOptions/SeamSize.tsx | 31 +++++ .../SeamCorrectionOptions/SeamSteps.tsx | 34 ++++++ .../SeamCorrectionOptions/SeamStrength.tsx | 34 ++++++ .../ImageToImage/ImageToImageStrength.tsx | 2 +- .../UnifiedCanvas/UnifiedCanvasPanel.tsx | 2 +- 11 files changed, 187 insertions(+), 138 deletions(-) delete mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx create mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamBlur.tsx create mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamCorrectionOptions.tsx create mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSize.tsx create mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSteps.tsx create mode 100644 frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamStrength.tsx diff --git a/frontend/src/common/components/IAISlider.tsx b/frontend/src/common/components/IAISlider.tsx index e0aa6e2a8a..f512f16545 100644 --- a/frontend/src/common/components/IAISlider.tsx +++ b/frontend/src/common/components/IAISlider.tsx @@ -23,7 +23,7 @@ import { Tooltip, TooltipProps, } from '@chakra-ui/react'; -import React, { FocusEvent, useEffect, useMemo, useState } from 'react'; +import React, { FocusEvent, useMemo, useState, useEffect } from 'react'; import { BiReset } from 'react-icons/bi'; import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton'; import _ from 'lodash'; @@ -81,7 +81,7 @@ export default function IAISlider(props: IAIFullSliderProps) { withInput = false, isInteger = false, inputWidth = '5.5rem', - inputReadOnly = true, + inputReadOnly = false, withReset = false, hideTooltip = false, isCompact = false, @@ -103,32 +103,35 @@ export default function IAISlider(props: IAIFullSliderProps) { ...rest } = props; - const [localInputValue, setLocalInputValue] = useState(String(value)); + const [localInputValue, setLocalInputValue] = useState< + string | number | undefined + >(String(value)); + + useEffect(() => { + setLocalInputValue(value); + }, [value]); const numberInputMax = useMemo( () => (sliderNumberInputProps?.max ? sliderNumberInputProps.max : max), [max, sliderNumberInputProps?.max] ); - useEffect(() => { - if (String(value) !== localInputValue && localInputValue !== '') { - setLocalInputValue(String(value)); - } - }, [value, localInputValue, setLocalInputValue]); + const handleSliderChange = (v: number) => { + onChange(v); + }; const handleInputBlur = (e: FocusEvent) => { + if (e.target.value === '') e.target.value = String(min); const clamped = _.clamp( - isInteger ? Math.floor(Number(e.target.value)) : Number(e.target.value), + isInteger ? Math.floor(Number(e.target.value)) : Number(localInputValue), min, numberInputMax ); - setLocalInputValue(String(clamped)); onChange(clamped); }; const handleInputChange = (v: number | string) => { - setLocalInputValue(String(v)); - onChange(Number(v)); + setLocalInputValue(v); }; const handleResetDisable = () => { @@ -172,7 +175,7 @@ export default function IAISlider(props: IAIFullSliderProps) { min={min} max={max} step={step} - onChange={handleInputChange} + onChange={handleSliderChange} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} focusThumbOnChange={false} @@ -236,13 +239,19 @@ export default function IAISlider(props: IAIFullSliderProps) { - - + onChange(Number(localInputValue))} + className="invokeai__slider-number-stepper" + /> + onChange(Number(localInputValue))} + className="invokeai__slider-number-stepper" + /> )} diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx index 5fac53fdb3..d97c0b1a17 100644 --- a/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/BoundingBoxSettings/BoundingBoxSettings.tsx @@ -75,11 +75,12 @@ const BoundingBoxSettings = () => { step={64} value={boundingBoxDimensions.width} onChange={handleChangeWidth} - handleReset={handleResetWidth} sliderNumberInputProps={{ max: 4096 }} withSliderMarks withInput + inputReadOnly withReset + handleReset={handleResetWidth} /> { step={64} value={boundingBoxDimensions.height} onChange={handleChangeHeight} - handleReset={handleResetHeight} sliderNumberInputProps={{ max: 4096 }} withSliderMarks withInput + inputReadOnly withReset + handleReset={handleResetHeight} /> ); diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx index 619a2b7e2d..95f2c7147d 100644 --- a/frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/InfillAndScalingOptions.tsx @@ -124,11 +124,12 @@ const InfillAndScalingOptions = () => { step={64} value={scaledBoundingBoxDimensions.width} onChange={handleChangeScaledWidth} - handleReset={handleResetScaledWidth} sliderNumberInputProps={{ max: 4096 }} withSliderMarks withInput + inputReadOnly withReset + handleReset={handleResetScaledWidth} /> { step={64} value={scaledBoundingBoxDimensions.height} onChange={handleChangeScaledHeight} - handleReset={handleResetScaledHeight} sliderNumberInputProps={{ max: 4096 }} withSliderMarks withInput + inputReadOnly withReset + handleReset={handleResetScaledHeight} /> { onChange={(v) => { dispatch(setTileSize(v)); }} - handleReset={() => { - dispatch(setTileSize(32)); - }} withInput withSliderMarks withReset + handleReset={() => { + dispatch(setTileSize(32)); + }} /> ); diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx deleted file mode 100644 index 6ede54d3b1..0000000000 --- a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { Flex } from '@chakra-ui/react'; -import { createSelector } from '@reduxjs/toolkit'; -import { useAppDispatch, useAppSelector } from 'app/storeHooks'; -import IAISlider from 'common/components/IAISlider'; -import { optionsSelector } from 'features/options/store/optionsSelectors'; -import { - setSeamBlur, - setSeamSize, - setSeamSteps, - setSeamStrength, -} from 'features/options/store/optionsSlice'; -import _ from 'lodash'; -import { useTranslation } from 'react-i18next'; - -const selector = createSelector( - [optionsSelector], - (options) => { - const { seamSize, seamBlur, seamStrength, seamSteps } = options; - - return { - seamSize, - seamBlur, - seamStrength, - seamSteps, - }; - }, - { - memoizeOptions: { - resultEqualityCheck: _.isEqual, - }, - } -); - -const SeamCorrectionOptions = () => { - const dispatch = useAppDispatch(); - const { seamSize, seamBlur, seamStrength, seamSteps } = - useAppSelector(selector); - - const { t } = useTranslation(); - - return ( - - { - dispatch(setSeamSize(v)); - }} - handleReset={() => dispatch(setSeamSize(96))} - withInput - withSliderMarks - withReset - /> - { - dispatch(setSeamBlur(v)); - }} - handleReset={() => { - dispatch(setSeamBlur(16)); - }} - withInput - withSliderMarks - withReset - /> - { - dispatch(setSeamStrength(v)); - }} - handleReset={() => { - dispatch(setSeamStrength(0.7)); - }} - withInput - withSliderMarks - withReset - /> - { - dispatch(setSeamSteps(v)); - }} - handleReset={() => { - dispatch(setSeamSteps(10)); - }} - withInput - withSliderMarks - withReset - /> - - ); -}; - -export default SeamCorrectionOptions; diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamBlur.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamBlur.tsx new file mode 100644 index 0000000000..3f087ed628 --- /dev/null +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamBlur.tsx @@ -0,0 +1,32 @@ +import type { RootState } from 'app/store'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamBlur } from 'features/options/store/optionsSlice'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +export default function SeamBlur() { + const dispatch = useAppDispatch(); + const seamBlur = useAppSelector((state: RootState) => state.options.seamBlur); + const { t } = useTranslation(); + + return ( + { + dispatch(setSeamBlur(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamBlur(16)); + }} + /> + ); +} diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamCorrectionOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamCorrectionOptions.tsx new file mode 100644 index 0000000000..24b14ee896 --- /dev/null +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamCorrectionOptions.tsx @@ -0,0 +1,18 @@ +import { Flex } from '@chakra-ui/react'; +import SeamBlur from './SeamBlur'; +import SeamSize from './SeamSize'; +import SeamSteps from './SeamSteps'; +import SeamStrength from './SeamStrength'; + +const SeamCorrectionOptions = () => { + return ( + + + + + + + ); +}; + +export default SeamCorrectionOptions; diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSize.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSize.tsx new file mode 100644 index 0000000000..caca9764fb --- /dev/null +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSize.tsx @@ -0,0 +1,31 @@ +import type { RootState } from 'app/store'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamSize } from 'features/options/store/optionsSlice'; +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.options.seamSize); + + return ( + { + dispatch(setSeamSize(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => dispatch(setSeamSize(96))} + /> + ); +} diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSteps.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSteps.tsx new file mode 100644 index 0000000000..32082e1365 --- /dev/null +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamSteps.tsx @@ -0,0 +1,34 @@ +import type { RootState } from 'app/store'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamSteps } from 'features/options/store/optionsSlice'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +export default function SeamSteps() { + const { t } = useTranslation(); + const seamSteps = useAppSelector( + (state: RootState) => state.options.seamSteps + ); + const dispatch = useAppDispatch(); + + return ( + { + dispatch(setSeamSteps(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamSteps(10)); + }} + /> + ); +} diff --git a/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamStrength.tsx b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamStrength.tsx new file mode 100644 index 0000000000..27e76b2449 --- /dev/null +++ b/frontend/src/features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamStrength.tsx @@ -0,0 +1,34 @@ +import { RootState } from 'app/store'; +import { useAppDispatch, useAppSelector } from 'app/storeHooks'; +import IAISlider from 'common/components/IAISlider'; +import { setSeamStrength } from 'features/options/store/optionsSlice'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +export default function SeamStrength() { + const dispatch = useAppDispatch(); + const { t } = useTranslation(); + const seamStrength = useAppSelector( + (state: RootState) => state.options.seamStrength + ); + + return ( + { + dispatch(setSeamStrength(v)); + }} + withInput + withSliderMarks + withReset + handleReset={() => { + dispatch(setSeamStrength(0.7)); + }} + /> + ); +} diff --git a/frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx b/frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx index 88bc7051c0..7cd8e4f9b0 100644 --- a/frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx +++ b/frontend/src/features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength.tsx @@ -36,9 +36,9 @@ export default function ImageToImageStrength(props: ImageToImageStrengthProps) { isInteger={false} styleClass={styleClass} withInput - withReset withSliderMarks inputWidth={'5.5rem'} + withReset handleReset={handleImg2ImgStrengthReset} /> ); diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx index 6e08d5620c..c0f8cef2cb 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx +++ b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasPanel.tsx @@ -1,7 +1,7 @@ // import { Feature } from 'app/features'; import { Feature } from 'app/features'; import ImageToImageStrength from 'features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength'; -import SeamCorrectionOptions from 'features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions'; +import SeamCorrectionOptions from 'features/options/components/AdvancedOptions/Canvas/SeamCorrectionOptions/SeamCorrectionOptions'; import SeedOptions from 'features/options/components/AdvancedOptions/Seed/SeedOptions'; import GenerateVariationsToggle from 'features/options/components/AdvancedOptions/Variations/GenerateVariations'; import VariationsOptions from 'features/options/components/AdvancedOptions/Variations/VariationsOptions'; From 8eaf0d8bfe80495e359ff007432e03ab8984f57a Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 24 Jan 2023 16:44:58 +1300 Subject: [PATCH 02/11] Fix Slider Build --- ...y-6edbec57.js => index-legacy-a65cbb12.js} | 8 +- .../{index.dd470915.js => index.6d38ba64.js} | 86 +++++++++---------- frontend/dist/index.html | 4 +- 3 files changed, 49 insertions(+), 49 deletions(-) rename frontend/dist/assets/{index-legacy-6edbec57.js => index-legacy-a65cbb12.js} (84%) rename frontend/dist/assets/{index.dd470915.js => index.6d38ba64.js} (77%) diff --git a/frontend/dist/assets/index-legacy-6edbec57.js b/frontend/dist/assets/index-legacy-a65cbb12.js similarity index 84% rename from frontend/dist/assets/index-legacy-6edbec57.js rename to frontend/dist/assets/index-legacy-a65cbb12.js index df48761d1e..6f547704b0 100644 --- a/frontend/dist/assets/index-legacy-6edbec57.js +++ b/frontend/dist/assets/index-legacy-a65cbb12.js @@ -18,7 +18,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -var Y=a.exports,Z=G.exports;function X(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n