diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx index 21a0225..b37f479 100644 --- a/Data/Server/WebUI/src/Flow_Editor.jsx +++ b/Data/Server/WebUI/src/Flow_Editor.jsx @@ -352,23 +352,31 @@ export default function FlowEditor({ if (nodeCountEl) nodeCountEl.innerText = nodes.length; }, [nodes]); - const selectedNode = nodes.find((n) => n.data?.label === selectedNodeLabel); - const nodeTypeMeta = selectedNode - ? Object.values(categorizedNodes).flat().find((def) => def.type === selectedNode.type) - : null; + const selectedNode = nodes.find((n) => n.data?.label === selectedNodeLabel); + const nodeDef = selectedNode + ? Object.values(categorizedNodes).flat().find((def) => def.type === selectedNode.type) + : null; - return ( -
+ return ( +
diff --git a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx index f23a7cd..34e55e7 100644 --- a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx +++ b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx @@ -1,13 +1,17 @@ ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: /Data/WebUI/src/Node_Configuration_Sidebar.jsx import { Box, Typography, Tabs, Tab, TextField } from "@mui/material"; import React, { useState } from "react"; +import { useReactFlow } from "reactflow"; export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title, nodeData }) { const [activeTab, setActiveTab] = useState(0); + const { setNodes } = useReactFlow(); const handleTabChange = (_, newValue) => setActiveTab(newValue); const renderConfigFields = () => { const config = nodeData?.config || []; + const nodeId = nodeData?.nodeId; + return config.map((field, index) => ( @@ -18,6 +22,18 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti size="small" fullWidth value={nodeData?.[field.key] || ""} + onChange={(e) => { + const newValue = e.target.value; + if (!nodeId) return; + setNodes((nds) => + nds.map((n) => + n.id === nodeId + ? { ...n, data: { ...n.data, [field.key]: newValue } } + : n + ) + ); + window.BorealisValueBus[nodeId] = newValue; + }} InputProps={{ sx: { backgroundColor: "#1e1e1e", @@ -90,7 +106,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti {activeTab === 0 && renderConfigFields()} {activeTab === 1 && ( - {nodeData?.usage_documentation || "No documentation provided for this node."} + {nodeData?.usage_documentation || "No usage documentation provided for this node."} )} diff --git a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx index 77156b3..2c94ed0 100644 --- a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx +++ b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx @@ -1,6 +1,5 @@ ////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: /Data/WebUI/src/nodes/General Purpose/Node_Data.jsx - -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef } from "react"; import { Handle, Position, useReactFlow, useStore } from "reactflow"; import { IconButton } from "@mui/material"; import { Settings as SettingsIcon } from "@mui/icons-material"; @@ -11,20 +10,12 @@ if (!window.BorealisUpdateRate) window.BorealisUpdateRate = 100; const DataNode = ({ id, data }) => { const { setNodes } = useReactFlow(); const edges = useStore((state) => state.edges); - const [renderValue, setRenderValue] = useState(data?.value || ""); - const valueRef = useRef(renderValue); + const valueRef = useRef(data?.value || ""); - const handleManualInput = (e) => { - const newValue = e.target.value; - valueRef.current = newValue; - setRenderValue(newValue); - window.BorealisValueBus[id] = newValue; - setNodes((nds) => - nds.map((n) => - n.id === id ? { ...n, data: { ...n.data, value: newValue } } : n - ) - ); - }; + useEffect(() => { + valueRef.current = data?.value || ""; + window.BorealisValueBus[id] = valueRef.current; + }, [data?.value, id]); useEffect(() => { let currentRate = window.BorealisUpdateRate || 100; @@ -38,7 +29,6 @@ const DataNode = ({ id, data }) => { const upstreamValue = window.BorealisValueBus[inputEdge.source] ?? ""; if (upstreamValue !== valueRef.current) { valueRef.current = upstreamValue; - setRenderValue(upstreamValue); window.BorealisValueBus[id] = upstreamValue; setNodes((nds) => nds.map((n) => @@ -67,9 +57,6 @@ const DataNode = ({ id, data }) => { }; }, [id, setNodes, edges]); - const inputEdge = edges.find((e) => e?.target === id); - const hasInput = Boolean(inputEdge); - return (
@@ -79,32 +66,13 @@ const DataNode = ({ id, data }) => { size="small" onClick={() => window.BorealisOpenDrawer && - window.BorealisOpenDrawer(data?.label || "Unknown Node", data) + window.BorealisOpenDrawer(data?.label || "Unknown Node", { ...data, nodeId: id }) } sx={{ padding: 0, marginRight: "-3px", color: "#58a6ff", width: "20px", height: "20px" }} >
-
-
{data?.content}
- - -
); @@ -117,7 +85,7 @@ export default { content: "Store a String or Number", component: DataNode, config: [ - { key: "value", label: "Initial Value", type: "text" } + { key: "value", label: "Value", type: "text" } ], usage_documentation: ` ### DataNode Usage