Add rangeSpec to FloatComponent
This commit is contained in:
parent
6da73895be
commit
154205b0cd
6 changed files with 37 additions and 6 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 =
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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 ?? ""
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue