github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add support for default values for sliders

Browse Source
This commit is contained in:
psychedelicious
2024-01-03 08:16:44 +11:00
parent b4c0dafdc8
commit 06245bc761
44 changed files with 87 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/common/components/IAIColorPicker.tsx
View File

@@ -69,7 +69,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={90}
/>
</InvControl>
<InvControl label="Green">
<InvNumberInput
@@ -79,7 +80,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={90}
/>
</InvControl>
<InvControl label="Blue">
<InvNumberInput
@@ -89,7 +91,8 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
max={255}
step={1}
w={numberInputWidth}
/>
defaultValue={255}
/>
</InvControl>
<InvControl label="Alpha">
<InvNumberInput
@@ -99,6 +102,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
min={0}
max={1}
w={numberInputWidth}
defaultValue={1}
/>
</InvControl>
</Flex>

15
invokeai/frontend/web/src/common/components/InvSlider/InvSlider.tsx
View File

@@ -10,6 +10,7 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
import { $shift } from 'common/hooks/useGlobalModifiers';
import { AnimatePresence } from 'framer-motion';
import { isNil } from 'lodash-es';
import { memo, useCallback, useMemo, useState } from 'react';
import { InvSliderMark } from './InvSliderMark';
@@ -23,7 +24,8 @@ export const InvSlider = memo((props: InvSliderProps) => {
step: _step = 1,
fineStep: _fineStep,
onChange,
onReset,
onReset: _onReset,
defaultValue,
formatValue = (v: number) => v.toString(),
marks: _marks,
withThumbTooltip: withTooltip = false,
@@ -59,6 +61,16 @@ export const InvSlider = memo((props: InvSliderProps) => {
}
return [];
}, [_marks, formatValue, max, min]);
const onReset = useCallback(() => {
if (!isNil(defaultValue)) {
onChange(defaultValue);
}
if (_onReset) {
_onReset();
}
}, [defaultValue, onChange, _onReset]);
return (
<>
<ChakraSlider
@@ -103,6 +115,7 @@ export const InvSlider = memo((props: InvSliderProps) => {
{withNumberInput && (
<InvNumberInput
value={value}
defaultValue={defaultValue}
min={numberInputMin}
max={numberInputMax}
step={step}