Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): allow decimals in number inputs

Browse Source 
still some jank but eh
This commit is contained in:
psychedelicious 2023-07-15 01:04:33 +10:00
parent 30e45eaf47
commit f6752965b7
2 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/common/components/IAINumberInput.tsx
View File

@ -28,7 +28,7 @@ import {
useState, useState,
} from 'react'; } from 'react';
const numberStringRegex = /^-?(0\.)?\.?$/; export const numberStringRegex = /^-?(0\.)?\.?$/;
interface Props extends Omit<NumberInputProps, 'onChange'> { interface Props extends Omit<NumberInputProps, 'onChange'> {
label?: string; label?: string;

36
invokeai/frontend/web/src/features/nodes/components/fields/NumberInputFieldComponent.tsx
View File

@ -6,6 +6,7 @@ import {
NumberInputStepper, NumberInputStepper,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { numberStringRegex } from 'common/components/IAINumberInput';
import { fieldValueChanged } from 'features/nodes/store/nodesSlice'; import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
import { import {
FloatInputFieldTemplate, FloatInputFieldTemplate,
@ -13,7 +14,7 @@ import {
IntegerInputFieldTemplate, IntegerInputFieldTemplate,
IntegerInputFieldValue, IntegerInputFieldValue,
} from 'features/nodes/types/types'; } from 'features/nodes/types/types';
import { memo } from 'react'; import { memo, useEffect, useState } from 'react';
import { FieldComponentProps } from './types'; import { FieldComponentProps } from './types';
const NumberInputFieldComponent = ( const NumberInputFieldComponent = (
@ -23,17 +24,42 @@ const NumberInputFieldComponent = (
> >
) => { ) => {
const { nodeId, field } = props; const { nodeId, field } = props;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [valueAsString, setValueAsString] = useState<string>(
String(field.value)
);
const handleValueChanged = (_: string, value: number) => { const handleValueChanged = (v: string) => {
dispatch(fieldValueChanged({ nodeId, fieldName: field.name, value })); 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(
fieldValueChanged({
nodeId,
fieldName: field.name,
value:
props.template.type === 'integer'
? Math.floor(Number(v))
: Number(v),
})
);
}
}; };
useEffect(() => {
if (
!valueAsString.match(numberStringRegex) &&
field.value !== Number(valueAsString)
) {
setValueAsString(String(field.value));
}
}, [field.value, valueAsString]);
return ( return (
<NumberInput <NumberInput
onChange={handleValueChanged} onChange={handleValueChanged}
value={field.value} value={valueAsString}
step={props.template.type === 'integer' ? 1 : 0.1} step={props.template.type === 'integer' ? 1 : 0.1}
precision={props.template.type === 'integer' ? 0 : 3} precision={props.template.type === 'integer' ? 0 : 3}
> >