From 590b9bdc09510d6e926f216c8c6b080a30147ac0 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 16 Feb 2023 13:00:06 -0300 Subject: [PATCH] implemented boolean node and wrote if it is a list --- .../src/CustomNodes/BooleanNode/index.tsx | 45 +++++++++++++++++ .../src/CustomNodes/GenericNode/index.tsx | 17 +++---- .../src/CustomNodes/InputNode/index.tsx | 17 ++++--- .../src/components/toggleComponent/index.tsx | 50 +++++++++++++++++++ .../contexts/connectionQuantityContext.tsx | 0 .../src/controllers/NodesServices/index.ts | 1 + .../extraSidebarComponent/index.tsx | 20 +++++++- space_flow/src/pages/FlowPage/index.tsx | 6 ++- 8 files changed, 135 insertions(+), 21 deletions(-) create mode 100644 space_flow/src/CustomNodes/BooleanNode/index.tsx create mode 100644 space_flow/src/components/toggleComponent/index.tsx create mode 100644 space_flow/src/contexts/connectionQuantityContext.tsx diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx new file mode 100644 index 000000000..24126e5fe --- /dev/null +++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx @@ -0,0 +1,45 @@ +import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline"; +import { Input } from "@mui/material"; +import { Handle, Position } from "reactflow"; +import { nodeColors } from "../../utils"; +import ToggleComponent from "../../components/toggleComponent"; +import { useEffect, useState } from "react"; + +export default function BooleanNode({ data }) { + const [enabled, setEnabled] = useState(false); + return ( +
+
+
+ + Boolean +
+ +
+
+ {setEnabled(x); data.enabled = x}} /> +
+ + targetHandle === sourceHandle || + data.types[targetHandle] === sourceHandle || + sourceHandle === "str" + } + className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none" + style={{ borderLeftColor: nodeColors[data.type] }} + > +
+ ); +} diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index 3df3fe8b2..281e0b4e2 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/index.tsx @@ -13,7 +13,7 @@ export default function GenericNode({ data }) { const Icon = nodeIcons[data.type]; return (
-
+
{data.name}
+
-
+
{data.node.description}
{Object.keys(data.node.template).map((t, idx) => (
- + @@ -50,12 +53,6 @@ export default function GenericNode({ data }) { ))}
- -
- -
-
+
String
+
- -
- - -
+ Use setting + + + + + ) +} \ No newline at end of file diff --git a/space_flow/src/contexts/connectionQuantityContext.tsx b/space_flow/src/contexts/connectionQuantityContext.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/space_flow/src/controllers/NodesServices/index.ts b/space_flow/src/controllers/NodesServices/index.ts index 468734935..f1b0c3a10 100644 --- a/space_flow/src/controllers/NodesServices/index.ts +++ b/space_flow/src/controllers/NodesServices/index.ts @@ -5,5 +5,6 @@ export async function getAll() { } export async function sendAll(data) { + console.log(data); return await axios.post("http://localhost:5003/send", JSON.stringify(data)); } diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index c7af36190..ac810b546 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -12,7 +12,7 @@ export default function ExtraSidebar() { acc[c] = curr; }); return acc; - }, {}); + }, {str: 'elements', bool: 'elements'}); useEffect(() => { getAll().then((d) => { @@ -117,6 +117,24 @@ export default function ExtraSidebar() {
+
+
+ onDragStart(event, { + type: 'elements', + name: 'bool', + }) + } + > +
+ Boolean + +
+
+
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 93fe2b29b..95b44dffd 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -16,11 +16,13 @@ import { getConnectedNodes } from "../../utils"; import ChatInputNode from "../../CustomNodes/ChatInputNode"; import ChatOutputNode from "../../CustomNodes/ChatOutputNode"; import InputNode from "../../CustomNodes/InputNode"; +import BooleanNode from "../../CustomNodes/BooleanNode"; const nodeTypes = { genericNode:GenericNode, inputNode: InputNode, chatInputNode:ChatInputNode, chatOutputNode:ChatOutputNode, + booleanNode: BooleanNode, }; export default function FlowPage() { @@ -70,9 +72,9 @@ export default function FlowPage() { let newId = getId(); const newNode = { id: newId, - type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : 'genericNode')), + type: data.name === 'str' ? 'inputNode' : (data.name === 'chatInput' ? 'chatInputNode' : (data.name === 'chatOutput' ? 'chatOutputNode' : (data.name === 'bool' ? 'booleanNode' : 'genericNode'))), position, - data: { ...data, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} }, + data: { ...data, input: '', enabled: false, instance: reactFlowInstance, onDelete: () => {setNodes(reactFlowInstance.getNodes().filter((n)=>n.id !== newId))} }, }; setNodes((nds) => nds.concat(newNode)); },