Skip to content

Commit 06245bc

Browse files
psychedeliciouspsychedelicious
committed
feat(ui): add support for default values for sliders
1 parent b4c0daf commit 06245bc

File tree

44 files changed

+87
-323
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+87
-323
lines changed

‎invokeai/frontend/web/src/common/components/IAIColorPicker.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
6969
max={255}
7070
step={1}
7171
w={numberInputWidth}
72-
/>
72+
defaultValue={90}
73+
/>
7374
</InvControl>
7475
<InvControl label="Green">
7576
<InvNumberInput
@@ -79,7 +80,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
7980
max={255}
8081
step={1}
8182
w={numberInputWidth}
82-
/>
83+
defaultValue={90}
84+
/>
8385
</InvControl>
8486
<InvControl label="Blue">
8587
<InvNumberInput
@@ -89,7 +91,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
8991
max={255}
9092
step={1}
9193
w={numberInputWidth}
92-
/>
94+
defaultValue={255}
95+
/>
9396
</InvControl>
9497
<InvControl label="Alpha">
9598
<InvNumberInput
@@ -99,6 +102,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
99102
min={0}
100103
max={1}
101104
w={numberInputWidth}
105+
defaultValue={1}
102106
/>
103107
</InvControl>
104108
</Flex>

‎invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
1010
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
1111
import { $shift } from 'common/hooks/useGlobalModifiers';
1212
import { AnimatePresence } from 'framer-motion';
13+
import { isNil } from 'lodash-es';
1314
import { memo, useCallback, useMemo, useState } from 'react';
1415

1516
import { InvSliderMark } from './InvSliderMark';
@@ -23,7 +24,8 @@ export const InvSlider = memo((props: InvSliderProps) => {
2324
step: _step = 1,
2425
fineStep: _fineStep,
2526
onChange,
26-
onReset,
27+
onReset: _onReset,
28+
defaultValue,
2729
formatValue = (v: number) => v.toString(),
2830
marks: _marks,
2931
withThumbTooltip: withTooltip = false,
@@ -59,6 +61,16 @@ export const InvSlider = memo((props: InvSliderProps) => {
5961
}
6062
return [];
6163
}, [_marks, formatValue, max, min]);
64+
65+
const onReset = useCallback(() => {
66+
if (!isNil(defaultValue)) {
67+
onChange(defaultValue);
68+
}
69+
if (_onReset) {
70+
_onReset();
71+
}
72+
}, [defaultValue, onChange, _onReset]);
73+
6274
return (
6375
<>
6476
<ChakraSlider
@@ -103,6 +115,7 @@ export const InvSlider = memo((props: InvSliderProps) => {
103115
{withNumberInput && (
104116
<InvNumberInput
105117
value={value}
118+
defaultValue={defaultValue}
106119
min={numberInputMin}
107120
max={numberInputMax}
108121
step={step}

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,13 +266,15 @@ const IAICanvasToolChooserOptions = () => {
266266
step={1}
267267
onChange={handleChangeBrushSize}
268268
marks={marks}
269+
defaultValue={50}
269270
/>
270271
<InvNumberInput
271272
value={brushSize}
272273
min={1}
273274
max={500}
274275
step={1}
275276
onChange={handleChangeBrushSize}
277+
defaultValue={50}
276278
/>
277279
</InvControl>
278280
</Flex>

‎invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterWeight.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,6 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
2727
},
2828
[dispatch, id]
2929
);
30-
const onReset = useCallback(() => {
31-
dispatch(controlAdapterWeightChanged({ id, weight: 1 }));
32-
}, [dispatch, id]);
3330

3431
if (isNil(weight)) {
3532
// should never happen
@@ -46,7 +43,7 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
4643
<InvSlider
4744
value={weight}
4845
onChange={onChange}
49-
onReset={onReset}
46+
defaultValue={1}
5047
min={0}
5148
max={2}
5249
step={0.05}
@@ -57,12 +54,12 @@ const ParamControlAdapterWeight = ({ id }: ParamControlAdapterWeightProps) => {
5754
<InvNumberInput
5855
value={weight}
5956
onChange={onChange}
60-
onReset={onReset}
6157
min={-1}
6258
max={2}
6359
step={0.05}
6460
fineStep={0.01}
6561
maxW={20}
62+
defaultValue={1}
6663
/>
6764
</InvControl>
6865
</InvControlGroup>

‎invokeai/frontend/web/src/features/controlAdapters/components/processors/CannyProcessor.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -30,32 +30,20 @@ const CannyProcessor = (props: CannyProcessorProps) => {
3030
[controlNetId, processorChanged]
3131
);
3232

33-
const handleLowThresholdReset = useCallback(() => {
34-
processorChanged(controlNetId, {
35-
low_threshold: DEFAULTS.low_threshold,
36-
});
37-
}, [controlNetId, processorChanged]);
38-
3933
const handleHighThresholdChanged = useCallback(
4034
(v: number) => {
4135
processorChanged(controlNetId, { high_threshold: v });
4236
},
4337
[controlNetId, processorChanged]
4438
);
4539

46-
const handleHighThresholdReset = useCallback(() => {
47-
processorChanged(controlNetId, {
48-
high_threshold: DEFAULTS.high_threshold,
49-
});
50-
}, [controlNetId, processorChanged]);
51-
5240
return (
5341
<ProcessorWrapper>
5442
<InvControl label={t('controlnet.lowThreshold')} isDisabled={!isEnabled}>
5543
<InvSlider
5644
value={low_threshold}
5745
onChange={handleLowThresholdChanged}
58-
onReset={handleLowThresholdReset}
46+
defaultValue={DEFAULTS.low_threshold}
5947
min={0}
6048
max={255}
6149
withNumberInput
@@ -65,7 +53,7 @@ const CannyProcessor = (props: CannyProcessorProps) => {
6553
<InvSlider
6654
value={high_threshold}
6755
onChange={handleHighThresholdChanged}
68-
onReset={handleHighThresholdReset}
56+
defaultValue={DEFAULTS.high_threshold}
6957
min={0}
7058
max={255}
7159
withNumberInput

‎invokeai/frontend/web/src/features/controlAdapters/components/processors/ColorMapProcessor.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,6 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
3030
[controlNetId, processorChanged]
3131
);
3232

33-
const handleColorMapTileSizeReset = useCallback(() => {
34-
processorChanged(controlNetId, {
35-
color_map_tile_size: DEFAULTS.color_map_tile_size,
36-
});
37-
}, [controlNetId, processorChanged]);
38-
3933
return (
4034
<ProcessorWrapper>
4135
<InvControl
@@ -44,8 +38,8 @@ const ColorMapProcessor = (props: ColorMapProcessorProps) => {
4438
>
4539
<InvSlider
4640
value={color_map_tile_size}
41+
defaultValue={DEFAULTS.color_map_tile_size}
4742
onChange={handleColorMapTileSizeChanged}
48-
onReset={handleColorMapTileSizeReset}
4943
min={1}
5044
max={256}
5145
step={1}

‎invokeai/frontend/web/src/features/controlAdapters/components/processors/ContentShuffleProcessor.tsx‎

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -30,64 +30,34 @@ const ContentShuffleProcessor = (props: Props) => {
3030
[controlNetId, processorChanged]
3131
);
3232

33-
const handleDetectResolutionReset = useCallback(() => {
34-
processorChanged(controlNetId, {
35-
detect_resolution: DEFAULTS.detect_resolution,
36-
});
37-
}, [controlNetId, processorChanged]);
38-
3933
const handleImageResolutionChanged = useCallback(
4034
(v: number) => {
4135
processorChanged(controlNetId, { image_resolution: v });
4236
},
4337
[controlNetId, processorChanged]
4438
);
4539

46-
const handleImageResolutionReset = useCallback(() => {
47-
processorChanged(controlNetId, {
48-
image_resolution: DEFAULTS.image_resolution,
49-
});
50-
}, [controlNetId, processorChanged]);
51-
5240
const handleWChanged = useCallback(
5341
(v: number) => {
5442
processorChanged(controlNetId, { w: v });
5543
},
5644
[controlNetId, processorChanged]
5745
);
5846

59-
const handleWReset = useCallback(() => {
60-
processorChanged(controlNetId, {
61-
w: DEFAULTS.w,
62-
});
63-
}, [controlNetId, processorChanged]);
64-
6547
const handleHChanged = useCallback(
6648
(v: number) => {
6749
processorChanged(controlNetId, { h: v });
6850
},
6951
[controlNetId, processorChanged]
7052
);
7153

72-
const handleHReset = useCallback(() => {
73-
processorChanged(controlNetId, {
74-
h: DEFAULTS.h,
75-
});
76-
}, [controlNetId, processorChanged]);
77-
7854
const handleFChanged = useCallback(
7955
(v: number) => {
8056
processorChanged(controlNetId, { f: v });
8157
},
8258
[controlNetId, processorChanged]
8359
);
8460

85-
const handleFReset = useCallback(() => {
86-
processorChanged(controlNetId, {
87-
f: DEFAULTS.f,
88-
});
89-
}, [controlNetId, processorChanged]);
90-
9161
return (
9262
<ProcessorWrapper>
9363
<InvControl
@@ -96,8 +66,8 @@ const ContentShuffleProcessor = (props: Props) => {
9666
>
9767
<InvSlider
9868
value={detect_resolution}
69+
defaultValue={DEFAULTS.detect_resolution}
9970
onChange={handleDetectResolutionChanged}
100-
onReset={handleDetectResolutionReset}
10171
min={0}
10272
max={4096}
10373
marks
@@ -110,8 +80,8 @@ const ContentShuffleProcessor = (props: Props) => {
11080
>
11181
<InvSlider
11282
value={image_resolution}
83+
defaultValue={DEFAULTS.image_resolution}
11384
onChange={handleImageResolutionChanged}
114-
onReset={handleImageResolutionReset}
11585
min={0}
11686
max={4096}
11787
marks
@@ -121,8 +91,8 @@ const ContentShuffleProcessor = (props: Props) => {
12191
<InvControl label={t('controlnet.w')} isDisabled={!isEnabled}>
12292
<InvSlider
12393
value={w}
94+
defaultValue={DEFAULTS.w}
12495
onChange={handleWChanged}
125-
onReset={handleWReset}
12696
min={0}
12797
max={4096}
12898
marks
@@ -132,8 +102,8 @@ const ContentShuffleProcessor = (props: Props) => {
132102
<InvControl label={t('controlnet.h')} isDisabled={!isEnabled}>
133103
<InvSlider
134104
value={h}
105+
defaultValue={DEFAULTS.h}
135106
onChange={handleHChanged}
136-
onReset={handleHReset}
137107
min={0}
138108
max={4096}
139109
marks
@@ -143,8 +113,8 @@ const ContentShuffleProcessor = (props: Props) => {
143113
<InvControl label={t('controlnet.f')} isDisabled={!isEnabled}>
144114
<InvSlider
145115
value={f}
116+
defaultValue={DEFAULTS.f}
146117
onChange={handleFChanged}
147-
onReset={handleFReset}
148118
min={0}
149119
max={4096}
150120
marks

‎invokeai/frontend/web/src/features/controlAdapters/components/processors/HedProcessor.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,18 +49,6 @@ const HedPreprocessor = (props: HedProcessorProps) => {
4949
[controlNetId, processorChanged]
5050
);
5151

52-
const handleDetectResolutionReset = useCallback(() => {
53-
processorChanged(controlNetId, {
54-
detect_resolution: DEFAULTS.detect_resolution,
55-
});
56-
}, [controlNetId, processorChanged]);
57-
58-
const handleImageResolutionReset = useCallback(() => {
59-
processorChanged(controlNetId, {
60-
image_resolution: DEFAULTS.image_resolution,
61-
});
62-
}, [controlNetId, processorChanged]);
63-
6452
return (
6553
<ProcessorWrapper>
6654
<InvControl
@@ -69,8 +57,8 @@ const HedPreprocessor = (props: HedProcessorProps) => {
6957
>
7058
<InvSlider
7159
value={detect_resolution}
60+
defaultValue={DEFAULTS.detect_resolution}
7261
onChange={handleDetectResolutionChanged}
73-
onReset={handleDetectResolutionReset}
7462
min={0}
7563
max={4096}
7664
marks
@@ -84,7 +72,7 @@ const HedPreprocessor = (props: HedProcessorProps) => {
8472
<InvSlider
8573
value={image_resolution}
8674
onChange={handleImageResolutionChanged}
87-
onReset={handleImageResolutionReset}
75+
defaultValue={DEFAULTS.image_resolution}
8876
min={0}
8977
max={4096}
9078
marks

‎invokeai/frontend/web/src/features/controlAdapters/components/processors/LineartAnimeProcessor.tsx‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,6 @@ const LineartAnimeProcessor = (props: Props) => {
3737
[controlNetId, processorChanged]
3838
);
3939

40-
const handleDetectResolutionReset = useCallback(() => {
41-
processorChanged(controlNetId, {
42-
detect_resolution: DEFAULTS.detect_resolution,
43-
});
44-
}, [controlNetId, processorChanged]);
45-
46-
const handleImageResolutionReset = useCallback(() => {
47-
processorChanged(controlNetId, {
48-
image_resolution: DEFAULTS.image_resolution,
49-
});
50-
}, [controlNetId, processorChanged]);
51-
5240
return (
5341
<ProcessorWrapper>
5442
<InvControl
@@ -57,8 +45,8 @@ const LineartAnimeProcessor = (props: Props) => {
5745
>
5846
<InvSlider
5947
value={detect_resolution}
48+
defaultValue={DEFAULTS.detect_resolution}
6049
onChange={handleDetectResolutionChanged}
61-
onReset={handleDetectResolutionReset}
6250
min={0}
6351
max={4096}
6452
withNumberInput
@@ -72,7 +60,7 @@ const LineartAnimeProcessor = (props: Props) => {
7260
<InvSlider
7361
value={image_resolution}
7462
onChange={handleImageResolutionChanged}
75-
onReset={handleImageResolutionReset}
63+
defaultValue={DEFAULTS.image_resolution}
7664
min={0}
7765
max={4096}
7866
withNumberInput

0 commit comments

Comments
 (0)