Misc Testing

This commit is contained in:
Nicole Rappe 2025-03-30 05:50:18 -06:00
parent 1239f57b46
commit c930f310eb
7 changed files with 49 additions and 29 deletions

View File

@ -21,6 +21,8 @@ import {
Divider
} from "@mui/material";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import Tooltip from "@mui/material/Tooltip";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@ -52,8 +54,7 @@ nodeContext.keys().forEach((path) => {
if (!categorizedNodes[category]) {
categorizedNodes[category] = [];
}
categorizedNodes[category].push({ type, label });
categorizedNodes[category].push(mod.default); // includes type, label, component, defaultContent
nodeTypes[type] = component;
});
@ -85,7 +86,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) {
position,
data: {
label: nodeMeta?.label || type,
content: nodeMeta?.label || "Node"
content: nodeMeta?.defaultContent
}
};
@ -286,7 +287,7 @@ export default function App() {
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}>
<Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography>
</AccordionSummary>
<AccordionDetails sx={{ p: 0 }}>
<AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>SAVE WORKFLOW</Button>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>OPEN WORKFLOW</Button>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>CLOSE WORKFLOW</Button>
@ -299,16 +300,17 @@ export default function App() {
</AccordionSummary>
<AccordionDetails sx={{ p: 0 }}>
{Object.entries(categorizedNodes).map(([category, items]) => (
<Box key={category} sx={{ mb: 2 }}>
<Box key={category} sx={{ mb: 0, bgcolor: "#232323" }}>
<Divider
sx={{
bgcolor: "#2c2c2c",
mb: 1,
px: 1,
py: 0.5,
bgcolor: "transparent",
px: 2,
py: 0.75,
display: "flex",
justifyContent: "center"
justifyContent: "center",
borderColor: "#333"
}}
variant="fullWidth"
>
<Typography
variant="caption"
@ -321,18 +323,20 @@ export default function App() {
</Typography>
</Divider>
{items.map(({ type, label }) => (
<Button
key={`${category}-${type}`}
fullWidth
sx={sidebarBtnStyle}
draggable
onDragStart={(event) => {
event.dataTransfer.setData("application/reactflow", type);
event.dataTransfer.effectAllowed = "move";
}}
>
{label}
</Button>
<Tooltip key={`${category}-${type}`} title="Drag & Drop into Editor" placement="right">
<Button
fullWidth
sx={sidebarBtnStyle}
draggable
onDragStart={(event) => {
event.dataTransfer.setData("application/reactflow", type);
event.dataTransfer.effectAllowed = "move";
}}
startIcon={<DragIndicatorIcon sx={{ color: "#666" }} />}
>
{label}
</Button>
</Tooltip>
))}
</Box>
))}
@ -400,7 +404,11 @@ const sidebarBtnStyle = {
backgroundColor: "#232323",
justifyContent: "flex-start",
pl: 2,
fontSize: "0.9rem"
fontSize: "0.9rem",
textTransform: "none",
"&:hover": {
backgroundColor: "#2a2a2a"
}
};
const accordionHeaderStyle = {

View File

@ -20,4 +20,11 @@
rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
);
z-index: -1; /* Ensures it stays behind the React Flow elements */
}
}
/* Emphasize Drag & Drop Node Functionality */
.sidebar-button:hover {
background-color: #2a2a2a !important;
box-shadow: 0 0 5px rgba(88, 166, 255, 0.3);
cursor: grab;
}

View File

@ -52,7 +52,7 @@ const experimentalNode = ({ data }) => {
{data.label || "Experimental Node"}
</div>
<div style={{ padding: "10px" }}>
{data.content || "Experimental Node"}
{data.content || "Placeholder Experimental Content"}
</div>
</div>
);
@ -61,5 +61,6 @@ const experimentalNode = ({ data }) => {
export default {
type: "experimentalNode", // Must match the type used in nodeTypes
label: "Experimental Node",
defaultContent: "Placeholder Node",
component: experimentalNode
};

View File

@ -52,7 +52,7 @@ const flyffNode = ({ data }) => {
{data.label || "Flyff Node"}
</div>
<div style={{ padding: "10px" }}>
{data.content || "Flyff Node"}
{data.content || "Placeholder Flyff Content"}
</div>
</div>
);
@ -61,5 +61,6 @@ const flyffNode = ({ data }) => {
export default {
type: "flyffNode", // Must match the type used in nodeTypes
label: "Flyff Node",
defaultContent: "Placeholder Node",
component: flyffNode
};

View File

@ -52,7 +52,7 @@ const dataNode = ({ data }) => {
{data.label || "Data Node"}
</div>
<div style={{ padding: "10px" }}>
{data.content || "Data Node"}
{data.content || "Placeholder Data Content"}
</div>
</div>
);
@ -61,5 +61,6 @@ const dataNode = ({ data }) => {
export default {
type: "dataNode", // Must match the type used in nodeTypes
label: "Data Node",
defaultContent: "Placeholder Node",
component: dataNode
};

View File

@ -52,7 +52,7 @@ const nodeGroupBox = ({ data }) => {
{data.label || "Node Group Box"}
</div>
<div style={{ padding: "10px" }}>
{data.content || "Node Group Box"}
{data.content || "Placeholder Group Box Content"}
</div>
</div>
);
@ -61,5 +61,6 @@ const nodeGroupBox = ({ data }) => {
export default {
type: "nodeGroupBox", // Must match the type used in nodeTypes
label: "Node Group Box",
defaultContent: "Placeholder Node",
component: nodeGroupBox
};

View File

@ -52,7 +52,7 @@ const ExportToCSVNode = ({ data }) => {
{data.label || "Export to CSV"}
</div>
<div style={{ padding: "10px" }}>
{data.content || "Export to CSV"}
{data.content || "Placeholder CSV Content"}
</div>
</div>
);
@ -61,5 +61,6 @@ const ExportToCSVNode = ({ data }) => {
export default {
type: "ExportToCSVNode", // Must match the type used in nodeTypes
label: "Export to CSV",
defaultContent: "Placeholder Node",
component: ExportToCSVNode
};