Disabled components done

space_flow/src/CustomNodes/BooleanNode/index.tsx

@@ -26,7 +26,7 @@ export default function BooleanNode({ data }) {
         </button>
       </div>
       <div className="w-full flex justify-center p-5 h-full">
-        <ToggleComponent enabled={enabled} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
+        <ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
       </div>
       <Handle
         type="target"

space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -24,12 +24,7 @@ export default function ParameterComponent({
   const ref = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
-  function updatePos(){
+  var _ = require('lodash');
-    if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
-      setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
-      updateNodeInternals(data.id);
-    }
-  }
   useEffect(() => {
     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 (
     <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
@@ -67,16 +63,17 @@ export default function ParameterComponent({
         </Tooltip>
         {left === true && type === "str" ? (
           <div className="mt-2 w-full">
-            {/* data.node.template[name].list */false ? 
+            {data.node.template[name].list ? 
             <InputListComponent
+            disabled={disabled}
             value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value}
               onChange={(t) => {
                 data.node.template[name].value = t;
-                updatePos();
               }}
             />
             :
             <InputComponent
+            disabled={disabled}
             value={data.node.template[name].value ?? ""}
               onChange={(t) => {
                 data.node.template[name].value = t;
@@ -88,6 +85,7 @@ export default function ParameterComponent({
         ) : left === true && type === "bool" ? (
           <div className="mt-2">
             <ToggleComponent
+              disabled={disabled}
               enabled={enabled}
               setEnabled={(t) => {
                 data.node.template[name].value = t;

space_flow/src/CustomNodes/InputNode/index.tsx

@@ -44,6 +44,7 @@ export default function InputNode({ data }) {
       </div>
       <div className="w-full p-5 h-full">
         <InputComponent
+        disabled={false}
           value=""
           onChange={(e) => {
             data.text = e;

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 (
-        <>
+        <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
             <input
             type="text"
             value={myValue}
-            className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
             placeholder="Type a text"
             onChange={(e) => {
                 setMyValue(e.target.value);
                 onChange(e.target.value);
             }}
             />
-        </>
+        </div>
     );
 }

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 (
-    <div className="flex flex-col gap-3">
+    <div className={(disabled ? "pointer-events-none cursor-not-allowed" : "") + "flex flex-col gap-3"}>
       {inputList.map((i, idx) => (
         <div key={idx} className="w-full flex gap-3">
           <input
             type="text"
             value={i}
-            className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+            className={"block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + (disabled ? " bg-gray-200" : "")}
             placeholder="Type a text"
             onChange={(e) => {
               setInputList((old) => {

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}){
+export default function ToggleComponent({ enabled, setEnabled, disabled }) {
-    return (<Switch
+  useEffect(()=> {
+    if(disabled){
+        setEnabled(false);
+    }
+}, [disabled, setEnabled])
+  return (
+    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+      <Switch
         checked={enabled}
-        onChange={(x) => {setEnabled(x);}}
+        onChange={(x) => {
+          setEnabled(x);
+        }}
         className={classNames(
-          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          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'
+          "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"
         )}
       >
         <span className="sr-only">Use setting</span>
         <span
           className={classNames(
-            enabled ? 'translate-x-5' : 'translate-x-0',
+            enabled ? "translate-x-5" : "translate-x-0",
-            'pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+            "pointer-events-none relative inline-block h-5 w-5 transform rounded-full  shadow ring-0 transition duration-200 ease-in-out", disabled ? "bg-gray-200" : "bg-white"
           )}
         >
           <span
             className={classNames(
-              enabled ? 'opacity-0 ease-out duration-100' : 'opacity-100 ease-in duration-200',
+              enabled
-              'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+                ? "opacity-0 ease-out duration-100"
+                : "opacity-100 ease-in duration-200",
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"
           >
-            <svg className="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
+            <svg
+              className="h-3 w-3 text-gray-400"
+              fill="none"
+              viewBox="0 0 12 12"
+            >
               <path
                 d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
                 stroke="currentColor"
@@ -37,15 +52,23 @@ export default function ToggleComponent({enabled, setEnabled}){
           </span>
           <span
             className={classNames(
-              enabled ? 'opacity-100 ease-in duration-200' : 'opacity-0 ease-out duration-100',
+              enabled
-              'absolute inset-0 flex h-full w-full items-center justify-center transition-opacity'
+                ? "opacity-100 ease-in duration-200"
+                : "opacity-0 ease-out duration-100",
+              "absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
             )}
             aria-hidden="true"
           >
-            <svg className="h-3 w-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
+            <svg
+              className="h-3 w-3 text-indigo-600"
+              fill="currentColor"
+              viewBox="0 0 12 12"
+            >
               <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
             </svg>
           </span>
         </span>
-      </Switch>)
+      </Switch>
-}
+    </div>
+  );
+}

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}