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
|
// Node Configuration Sidebar State
|
||||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
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 wrapperRef = useRef(null);
|
||||||
const { project } = useReactFlow();
|
const { project } = useReactFlow();
|
||||||
@ -356,7 +368,11 @@ export default function FlowEditor({
|
|||||||
ref={wrapperRef}
|
ref={wrapperRef}
|
||||||
style={{ position: "relative" }}
|
style={{ position: "relative" }}
|
||||||
>
|
>
|
||||||
<NodeConfigurationSidebar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
|
<NodeConfigurationSidebar
|
||||||
|
drawerOpen={drawerOpen}
|
||||||
|
setDrawerOpen={setDrawerOpen}
|
||||||
|
title={selectedNodeLabel}
|
||||||
|
/>
|
||||||
|
|
||||||
<ReactFlow
|
<ReactFlow
|
||||||
nodes={nodes}
|
nodes={nodes}
|
||||||
|
@ -3,7 +3,7 @@ import React from "react";
|
|||||||
import { Box, Typography, IconButton } from "@mui/material";
|
import { Box, Typography, IconButton } from "@mui/material";
|
||||||
import { Settings as SettingsIcon } from "@mui/icons-material";
|
import { Settings as SettingsIcon } from "@mui/icons-material";
|
||||||
|
|
||||||
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen }) {
|
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Top-right gear icon */}
|
{/* Top-right gear icon */}
|
||||||
@ -77,7 +77,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen })
|
|||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
|
<Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
|
||||||
Node Configuration Panel
|
{title || "Node Configuration Panel"}
|
||||||
</Typography>
|
</Typography>
|
||||||
<p style={{ fontSize: "0.85rem", color: "#aaa" }}>
|
<p style={{ fontSize: "0.85rem", color: "#aaa" }}>
|
||||||
This sidebar will be used to configure nodes in the future.
|
This sidebar will be used to configure nodes in the future.
|
||||||
|
@ -41,6 +41,8 @@
|
|||||||
|
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import { Handle, Position, useReactFlow, useStore } from "reactflow";
|
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
|
// Global Shared Bus for Node Data Propagation
|
||||||
if (!window.BorealisValueBus) {
|
if (!window.BorealisValueBus) {
|
||||||
@ -141,10 +143,29 @@ const DataNode = ({ id, data }) => {
|
|||||||
<div className="borealis-node">
|
<div className="borealis-node">
|
||||||
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
<Handle type="target" position={Position.Left} className="borealis-handle" />
|
||||||
|
|
||||||
<div className="borealis-node-header">
|
<div className="borealis-node-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
||||||
{data?.label || "Data Node"}
|
<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>
|
||||||
|
|
||||||
|
|
||||||
<div className="borealis-node-content">
|
<div className="borealis-node-content">
|
||||||
{/* Description visible in node body */}
|
{/* Description visible in node body */}
|
||||||
<div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>
|
<div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user