Misc Testing
This commit is contained in:
parent
1239f57b46
commit
c930f310eb
@ -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 = {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user