Colors fixed

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

@@ -6,6 +6,8 @@ import {
   snakeToNormalCase,
 } from "../../../../utils";
 import { useEffect, useRef, useState } from "react";
+import Input from "../../../../components/inputComponent";
+import ToggleComponent from "../../../../components/toggleComponent";
 
 export default function ParameterComponent({
   left,
@@ -14,41 +16,69 @@ export default function ParameterComponent({
   tooltipTitle,
   title,
   color,
+  type,
+  name = "",
 }) {
   const ref = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
-      setPosition(ref.current.offsetTop + (ref.current.clientHeight / 2));
+      setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
       updateNodeInternals(data.id);
     }
   }, [data.id, ref, updateNodeInternals]);
 
   useEffect(() => {
     updateNodeInternals(data.id);
-  }, [data.id, position, updateNodeInternals])
+  }, [data.id, position, updateNodeInternals]);
+
+  const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false);
 
   return (
-    <div ref={ref} className="w-full bg-gray-50 mt-1 px-5 py-2">
-        <>
-          <div className="text-sm truncate">{title}</div>
-          <Tooltip title={tooltipTitle}>
-            <Handle
-              type={left ? "source" : "target"}
-              position={left ? Position.Left : Position.Right}
-              id={id}
-              isValidConnection={(connection) =>
-                isValidConnection(data, connection)
-              }
-              className={(left ? "-ml-0.5 " : "-mr-0.5 ") +"w-3 h-3 rounded-full border-2 bg-white"}
-              style={{
-                borderColor: color,
-                top: position,
+    <div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
+      <>
+        <div className="text-sm truncate">{title}</div>
+        <Tooltip title={tooltipTitle}>
+          <Handle
+            type={left ? "source" : "target"}
+            position={left ? Position.Left : Position.Right}
+            id={id}
+            isValidConnection={(connection) =>
+              isValidConnection(data, connection)
+            }
+            className={
+              (left ? "-ml-0.5 " : "-mr-0.5 ") +
+              "w-3 h-3 rounded-full border-2 bg-white"
+            }
+            style={{
+              borderColor: color,
+              top: position,
+            }}
+          ></Handle>
+        </Tooltip>
+        {left === true && type === "str" ? (
+          <div className="mt-2 w-full">
+            <Input
+              onChange={(t) => {
+                data.node.template[name].value = t;
               }}
-            ></Handle>
-          </Tooltip>
-        </>
+            />
+          </div>
+        ) : left === true && type === "bool" ? (
+          <div className="mt-2">
+            <ToggleComponent
+              enabled={enabled}
+              setEnabled={(t) => {
+                data.node.template[name].value = t;
+                setEnabled(t);
+              }}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+      </>
     </div>
   );
 }

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -1,19 +1,11 @@
 import {
-  ArrowUpRightIcon,
   TrashIcon,
-  PlayIcon,
 } from "@heroicons/react/24/outline";
-import { Handle, Position } from "reactflow";
-import Dropdown from "../../components/dropdownComponent";
-import Input from "../../components/inputComponent";
 import {
-  isValidConnection,
   nodeColors,
   nodeIcons,
   snakeToNormalCase,
 } from "../../utils";
-import Tooltip from "../../components/TooltipComponent";
-import { useEffect, useRef, useState } from "react";
 import ParameterComponent from "./components/parameterComponent";
 
 export default function GenericNode({ data }) {
@@ -24,8 +16,8 @@ export default function GenericNode({ data }) {
       <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
         <div className="w-full flex items-center truncate gap-4 text-lg">
           <Icon
-            className="w-10 h-10 p-1 text-white rounded"
-            style={{ background: nodeColors[data.type] }}
+            className="w-10 h-10 p-1 rounded"
+            style={{ color: nodeColors[data.type] }}
           />
           <div className="truncate">{data.name}</div>
         </div>
@@ -34,7 +26,7 @@ export default function GenericNode({ data }) {
         </button>
       </div>
 
-      <div className="w-full h-full py-5 pointer-events-none">
+      <div className="w-full h-full py-5">
         <div className="w-full text-gray-500 px-5 text-sm">
           {data.node.description}
         </div>
@@ -61,6 +53,7 @@ export default function GenericNode({ data }) {
                       snakeToNormalCase(t) +
                       (data.node.template[t].required ? " (required)" : "")
                     }
+                    name={t}
                     tooltipTitle={
                       "Type: " +
                       data.node.template[t].type +
@@ -69,6 +62,7 @@ export default function GenericNode({ data }) {
                     }
                     id={data.node.template[t].type + "|" + t + "|" + data.id}
                     left={true}
+                    type={data.node.template[t].type}
                   />
                 ) : (
                   <></>
@@ -82,6 +76,7 @@ export default function GenericNode({ data }) {
             title={data.name + " | " + data.node.base_class}
             tooltipTitle={"Type: str"}
             id={data.name + "|" + data.node.base_class + "|" + data.id}
+            type={'str'}
             left={false}
           />
         </>