diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx index 3f8653988..d068f1199 100644 --- a/space_flow/src/CustomNodes/BooleanNode/index.tsx +++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx @@ -26,7 +26,7 @@ export default function BooleanNode({ data }) {
- {setEnabled(x); data.enabled = x}} /> + {setEnabled(x); data.enabled = x}} />
{ if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { setPosition(ref.current.offsetTop + ref.current.clientHeight / 2); @@ -42,6 +37,7 @@ export default function ParameterComponent({ }, [data.id, position, updateNodeInternals]); const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false); + let disabled = data.reactFlowInstance.getEdges().some((e) => (e.sourceHandle === id)); return (
@@ -67,16 +63,17 @@ export default function ParameterComponent({ {left === true && type === "str" ? (
- {/* data.node.template[name].list */false ? + {data.node.template[name].list ? { data.node.template[name].value = t; - updatePos(); }} /> : { data.node.template[name].value = t; @@ -88,6 +85,7 @@ export default function ParameterComponent({ ) : left === true && type === "bool" ? (
{ data.node.template[name].value = t; diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx index 379e89717..4afee1cac 100644 --- a/space_flow/src/CustomNodes/InputNode/index.tsx +++ b/space_flow/src/CustomNodes/InputNode/index.tsx @@ -44,6 +44,7 @@ export default function InputNode({ data }) {
{ data.text = e; diff --git a/space_flow/src/components/inputComponent/index.tsx b/space_flow/src/components/inputComponent/index.tsx index eb39e792a..38bb559a0 100644 --- a/space_flow/src/components/inputComponent/index.tsx +++ b/space_flow/src/components/inputComponent/index.tsx @@ -1,19 +1,25 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; -export default function InputComponent({value, onChange}){ +export default function InputComponent({value, onChange, disabled}){ const [myValue, setMyValue] = useState(value ?? ""); + useEffect(()=> { + if(disabled){ + setMyValue(""); + onChange(""); + } + }, [disabled, onChange]) return ( - <> +
{ setMyValue(e.target.value); onChange(e.target.value); }} /> - +
); } \ No newline at end of file diff --git a/space_flow/src/components/inputListComponent/index.tsx b/space_flow/src/components/inputListComponent/index.tsx index 05dfdd232..3f8a3553a 100644 --- a/space_flow/src/components/inputListComponent/index.tsx +++ b/space_flow/src/components/inputListComponent/index.tsx @@ -1,19 +1,24 @@ import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline"; -import { useState } from "react"; +import { useEffect, useState } from "react"; var _ = require("lodash"); -export default function InputListComponent({ value, onChange }) { +export default function InputListComponent({ value, onChange, disabled}) { const [inputList, setInputList] = useState(value ?? [""]); - + useEffect(()=> { + if(disabled){ + setInputList([""]); + onChange([""]); + } +}, [disabled, onChange]) return ( -
+
{inputList.map((i, idx) => (
{ setInputList((old) => { diff --git a/space_flow/src/components/toggleComponent/index.tsx b/space_flow/src/components/toggleComponent/index.tsx index 0fbc703b2..60def65e1 100644 --- a/space_flow/src/components/toggleComponent/index.tsx +++ b/space_flow/src/components/toggleComponent/index.tsx @@ -1,31 +1,46 @@ import { Switch } from "@headlessui/react"; import { classNames } from "../../utils"; -import { useState } from "react"; +import { useEffect, useState } from "react"; -export default function ToggleComponent({enabled, setEnabled}){ - return ( { + if(disabled){ + setEnabled(false); + } +}, [disabled, setEnabled]) + return ( +
+ {setEnabled(x);}} + onChange={(x) => { + setEnabled(x); + }} className={classNames( - enabled ? 'bg-indigo-600' : 'bg-gray-200', - 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2' + enabled ? "bg-indigo-600" : "bg-gray-200", + "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" )} > Use setting - ) -} \ No newline at end of file + +
+ ); +} diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 0459e8de0..1cb7cd012 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -45,13 +45,25 @@ export default function FlowPage() { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const onEdgesChangeMod = useCallback((s) => { + onEdgesChange(s); + setNodes((x) => { + let newX = _.cloneDeep(x); + return newX; + }) + }, [_, onEdgesChange, setNodes]) const [reactFlowInstance, setReactFlowInstance] = useState(null); + var _ = require('lodash'); const onConnect = useCallback( (params) => { /* console.log(params) console.log(reactFlowInstance.getNodes()) console.log(getConnectedNodes(params,reactFlowInstance.getNodes())) */ setEdges((eds) => addEdge({...params,className:"animate-pulse"}, eds)) + setNodes((x) => { + let newX = _.cloneDeep(x); + return newX; + }) }, [reactFlowInstance] ); @@ -93,7 +105,7 @@ export default function FlowPage() { nodes={nodes} edges={edges} onNodesChange={onNodesChange} - onEdgesChange={onEdgesChange} + onEdgesChange={onEdgesChangeMod} onConnect={onConnect} onInit={setReactFlowInstance} nodeTypes={nodeTypes}