Added Dynamic Sidebar Title Logic
This commit is contained in:
parent
4f4f766b48
commit
059eda8b01
@ -52,6 +52,18 @@ export default function FlowEditor({
|
||||
}) {
|
||||
// Node Configuration Sidebar State
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const [selectedNodeLabel, setSelectedNodeLabel] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
window.BorealisOpenDrawer = (label) => {
|
||||
setSelectedNodeLabel(label);
|
||||
setDrawerOpen(true);
|
||||
};
|
||||
return () => {
|
||||
delete window.BorealisOpenDrawer;
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
const wrapperRef = useRef(null);
|
||||
const { project } = useReactFlow();
|
||||
@ -356,7 +368,11 @@ export default function FlowEditor({
|
||||
ref={wrapperRef}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<NodeConfigurationSidebar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
||||
<NodeConfigurationSidebar
|
||||
drawerOpen={drawerOpen}
|
||||
setDrawerOpen={setDrawerOpen}
|
||||
title={selectedNodeLabel}
|
||||
/>
|
||||
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
|
@ -3,7 +3,7 @@ import React from "react";
|
||||
import { Box, Typography, IconButton } from "@mui/material";
|
||||
import { Settings as SettingsIcon } from "@mui/icons-material";
|
||||
|
||||
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen }) {
|
||||
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
|
||||
return (
|
||||
<>
|
||||
{/* Top-right gear icon */}
|
||||
@ -77,7 +77,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen })
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
|
||||
Node Configuration Panel
|
||||
{title || "Node Configuration Panel"}
|
||||
</Typography>
|
||||
<p style={{ fontSize: "0.85rem", color: "#aaa" }}>
|
||||
This sidebar will be used to configure nodes in the future.
|
||||
|
@ -41,6 +41,8 @@
|
||||
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Handle, Position, useReactFlow, useStore } from "reactflow";
|
||||
import { IconButton } from "@mui/material";
|
||||
import { Settings as SettingsIcon } from "@mui/icons-material";
|
||||
|
||||
// Global Shared Bus for Node Data Propagation
|
||||
if (!window.BorealisValueBus) {
|
||||
@ -141,10 +143,29 @@ const DataNode = ({ id, data }) => {
|
||||
<div className="borealis-node">
|
||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||
|
||||
<div className="borealis-node-header">
|
||||
{data?.label || "Data Node"}
|
||||
<div className="borealis-node-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||
<span>{data?.label || "Data Node"}</span>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() =>
|
||||
window.BorealisOpenDrawer &&
|
||||
window.BorealisOpenDrawer(data?.label || "Unknown Node")
|
||||
}
|
||||
sx={{
|
||||
padding: "0px",
|
||||
marginRight: "-3px",
|
||||
color: "#58a6ff",
|
||||
fontSize: "14px", // affects inner icon when no size prop
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
minWidth: "20px"
|
||||
}}
|
||||
>
|
||||
<SettingsIcon sx={{ fontSize: "16px" }} />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="borealis-node-content">
|
||||
{/* Description visible in node body */}
|
||||
<div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>
|
||||
|
Loading…
x
Reference in New Issue
Block a user