Add rangeSpec to FloatComponent

This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-12-10 11:18:25 -03:00
commit 154205b0cd
6 changed files with 37 additions and 6 deletions

View file

@ -457,6 +457,7 @@ export default function ParameterComponent({
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
value={data.node?.template[name].value ?? ""} value={data.node?.template[name].value ?? ""}
rangeSpec={data.node?.template[name].range_spec}
onChange={handleOnNewValue} onChange={handleOnNewValue}
/> />
</div> </div>

View file

@ -472,6 +472,11 @@ export default function CodeTabsComponent({
templateField templateField
].value ].value
} }
rangeSpec={
node.data.node.template[
templateField
].rangeSpec
}
onChange={(target) => { onChange={(target) => {
setData((old) => { setData((old) => {
let newInputList = let newInputList =

View file

@ -7,11 +7,14 @@ export default function FloatComponent({
value, value,
onChange, onChange,
disabled, disabled,
rangeSpec,
editNode = false, editNode = false,
}: FloatComponentType): JSX.Element { }: FloatComponentType): JSX.Element {
const step = 0.1; const step = rangeSpec?.step ?? 0.1;
const min = -2; const min = rangeSpec?.min ?? -2;
const max = 2; const max = rangeSpec?.max ?? 2;
console.log("FloatComponent", value, disabled, rangeSpec, editNode);
console.log("FloatComponent", step, min, max);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
@ -40,7 +43,9 @@ export default function FloatComponent({
disabled={disabled} disabled={disabled}
className={editNode ? "input-edit-node" : ""} className={editNode ? "input-edit-node" : ""}
placeholder={ placeholder={
editNode ? "Number -2 to 2" : "Type a number from minus two to two" editNode
? `Enter a value between ${min} and ${max}`
: `Enter a value between ${min} and ${max}`
} }
onChange={(event) => { onChange={(event) => {
onChange(event.target.value); onChange(event.target.value);

View file

@ -1,5 +1,5 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { FloatComponentType } from "../../types/components"; import { IntComponentType } from "../../types/components";
import { handleKeyDown } from "../../utils/reactflowUtils"; import { handleKeyDown } from "../../utils/reactflowUtils";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
@ -9,7 +9,7 @@ export default function IntComponent({
disabled, disabled,
editNode = false, editNode = false,
id = "", id = "",
}: FloatComponentType): JSX.Element { }: IntComponentType): JSX.Element {
const min = 0; const min = 0;
// Clear component state // Clear component state

View file

@ -360,6 +360,10 @@ const EditNodeModal = forwardRef(
<FloatComponent <FloatComponent
disabled={disabled} disabled={disabled}
editNode={true} editNode={true}
rangeSpec={
myData.node!.template[templateParam]
.range_spec
}
value={ value={
myData.node.template[templateParam] myData.node.template[templateParam]
.value ?? "" .value ?? ""

View file

@ -138,10 +138,26 @@ export type DisclosureComponentType = {
}[]; }[];
}; };
}; };
export type RangeSpecType = {
min: number;
max: number;
step: number;
};
export type IntComponentType = {
value: string;
disabled?: boolean;
onChange: (value: string) => void;
editNode?: boolean;
id?: string;
};
export type FloatComponentType = { export type FloatComponentType = {
value: string; value: string;
disabled?: boolean; disabled?: boolean;
onChange: (value: string) => void; onChange: (value: string) => void;
rangeSpec: RangeSpecType;
editNode?: boolean; editNode?: boolean;
id?: string; id?: string;
}; };