mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-07-27 18:18:27 -06:00
416 lines
14 KiB
JavaScript
416 lines
14 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Box, Typography, Tabs, Tab, TextField, MenuItem, Button, Slider, IconButton, Tooltip } from "@mui/material";
|
|
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
|
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
|
|
import RestoreIcon from "@mui/icons-material/Restore";
|
|
import { SketchPicker } from "react-color";
|
|
|
|
const SIDEBAR_WIDTH = 400;
|
|
|
|
const DEFAULT_EDGE_STYLE = {
|
|
type: "bezier",
|
|
animated: true,
|
|
style: { strokeDasharray: "6 3", stroke: "#58a6ff", strokeWidth: 1 },
|
|
label: "",
|
|
labelStyle: { fill: "#fff", fontWeight: "bold" },
|
|
labelBgStyle: { fill: "#2c2c2c", fillOpacity: 0.85, rx: 16, ry: 16 },
|
|
labelBgPadding: [8, 4],
|
|
};
|
|
|
|
let globalEdgeClipboard = null;
|
|
|
|
function clone(obj) {
|
|
return JSON.parse(JSON.stringify(obj));
|
|
}
|
|
|
|
export default function Context_Menu_Sidebar({
|
|
open,
|
|
onClose,
|
|
edge,
|
|
updateEdge,
|
|
}) {
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const [editState, setEditState] = useState(() => (edge ? clone(edge) : {}));
|
|
const [colorPicker, setColorPicker] = useState({ field: null, anchor: null });
|
|
|
|
useEffect(() => {
|
|
if (edge && edge.id !== editState.id) setEditState(clone(edge));
|
|
// eslint-disable-next-line
|
|
}, [edge]);
|
|
|
|
const handleChange = (field, value) => {
|
|
setEditState((prev) => {
|
|
const updated = { ...prev };
|
|
if (field === "label") updated.label = value;
|
|
else if (field === "labelStyle.fill") updated.labelStyle = { ...updated.labelStyle, fill: value };
|
|
else if (field === "labelBgStyle.fill") updated.labelBgStyle = { ...updated.labelBgStyle, fill: value };
|
|
else if (field === "labelBgStyle.rx") updated.labelBgStyle = { ...updated.labelBgStyle, rx: value, ry: value };
|
|
else if (field === "labelBgPadding") updated.labelBgPadding = value;
|
|
else if (field === "labelBgStyle.fillOpacity") updated.labelBgStyle = { ...updated.labelBgStyle, fillOpacity: value };
|
|
else if (field === "type") updated.type = value;
|
|
else if (field === "animated") updated.animated = value;
|
|
else if (field === "style.stroke") updated.style = { ...updated.style, stroke: value };
|
|
else if (field === "style.strokeDasharray") updated.style = { ...updated.style, strokeDasharray: value };
|
|
else if (field === "style.strokeWidth") updated.style = { ...updated.style, strokeWidth: value };
|
|
else if (field === "labelStyle.fontWeight") updated.labelStyle = { ...updated.labelStyle, fontWeight: value };
|
|
else updated[field] = value;
|
|
|
|
if (field === "style.strokeDasharray") {
|
|
if (value === "") {
|
|
updated.animated = false;
|
|
updated.style = { ...updated.style, strokeDasharray: "" };
|
|
} else {
|
|
updated.animated = true;
|
|
updated.style = { ...updated.style, strokeDasharray: value };
|
|
}
|
|
}
|
|
updateEdge({ ...updated, id: prev.id });
|
|
return updated;
|
|
});
|
|
};
|
|
|
|
// Color Picker with right alignment
|
|
const openColorPicker = (field, event) => {
|
|
setColorPicker({ field, anchor: event.currentTarget });
|
|
};
|
|
|
|
const closeColorPicker = () => {
|
|
setColorPicker({ field: null, anchor: null });
|
|
};
|
|
|
|
const handleColorChange = (color) => {
|
|
handleChange(colorPicker.field, color.hex);
|
|
closeColorPicker();
|
|
};
|
|
|
|
// Reset, Copy, Paste logic
|
|
const handleReset = () => {
|
|
setEditState(clone({ ...DEFAULT_EDGE_STYLE, id: edge.id }));
|
|
updateEdge({ ...DEFAULT_EDGE_STYLE, id: edge.id });
|
|
};
|
|
const handleCopy = () => { globalEdgeClipboard = clone(editState); };
|
|
const handlePaste = () => {
|
|
if (globalEdgeClipboard) {
|
|
setEditState(clone({ ...globalEdgeClipboard, id: edge.id }));
|
|
updateEdge({ ...globalEdgeClipboard, id: edge.id });
|
|
}
|
|
};
|
|
|
|
const renderColorButton = (label, field, value) => (
|
|
<span style={{ display: "inline-block", verticalAlign: "middle", position: "relative" }}>
|
|
<Button
|
|
variant="outlined"
|
|
size="small"
|
|
onClick={(e) => openColorPicker(field, e)}
|
|
sx={{
|
|
ml: 1,
|
|
borderColor: "#444",
|
|
color: "#ccc",
|
|
minWidth: 0,
|
|
width: 32,
|
|
height: 24,
|
|
p: 0,
|
|
bgcolor: "#232323",
|
|
}}
|
|
>
|
|
<span style={{
|
|
display: "inline-block",
|
|
width: 20,
|
|
height: 16,
|
|
background: value,
|
|
borderRadius: 3,
|
|
border: "1px solid #888",
|
|
}} />
|
|
</Button>
|
|
{colorPicker.field === field && (
|
|
<Box sx={{
|
|
position: "absolute",
|
|
top: "32px",
|
|
right: 0,
|
|
zIndex: 1302,
|
|
boxShadow: "0 2px 16px rgba(0,0,0,0.24)"
|
|
}}>
|
|
<SketchPicker
|
|
color={value}
|
|
onChange={handleColorChange}
|
|
disableAlpha
|
|
presetColors={[
|
|
"#fff", "#000", "#58a6ff", "#ff4f4f", "#2c2c2c", "#00d18c",
|
|
"#e3e3e3", "#0475c2", "#ff8c00", "#6b21a8", "#0e7490"
|
|
]}
|
|
/>
|
|
</Box>
|
|
)}
|
|
</span>
|
|
);
|
|
|
|
// Label tab
|
|
const renderLabelTab = () => (
|
|
<Box sx={{ px: 2, pt: 1, pb: 2 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Label</Typography>
|
|
</Box>
|
|
<TextField
|
|
fullWidth
|
|
size="small"
|
|
variant="outlined"
|
|
value={editState.label || ""}
|
|
onChange={e => handleChange("label", e.target.value)}
|
|
sx={{
|
|
mb: 2,
|
|
input: { color: "#fff", bgcolor: "#1e1e1e", fontSize: "0.95rem" },
|
|
"& fieldset": { borderColor: "#444" },
|
|
}}
|
|
/>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Text Color</Typography>
|
|
{renderColorButton("Label Text Color", "labelStyle.fill", editState.labelStyle?.fill || "#fff")}
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Background</Typography>
|
|
{renderColorButton("Label Background Color", "labelBgStyle.fill", editState.labelBgStyle?.fill || "#2c2c2c")}
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Padding</Typography>
|
|
<TextField
|
|
size="small"
|
|
type="text"
|
|
value={editState.labelBgPadding ? editState.labelBgPadding.join(",") : "8,4"}
|
|
onChange={e => {
|
|
const val = e.target.value.split(",").map(x => parseInt(x.trim())).filter(x => !isNaN(x));
|
|
if (val.length === 2) handleChange("labelBgPadding", val);
|
|
}}
|
|
sx={{ width: 80, input: { color: "#fff", bgcolor: "#1e1e1e", fontSize: "0.95rem" } }}
|
|
/>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Background Style</Typography>
|
|
<TextField
|
|
select
|
|
size="small"
|
|
value={(editState.labelBgStyle?.rx ?? 11) >= 11 ? "rounded" : "square"}
|
|
onChange={e => {
|
|
handleChange("labelBgStyle.rx", e.target.value === "rounded" ? 11 : 0);
|
|
}}
|
|
sx={{
|
|
width: 150,
|
|
bgcolor: "#1e1e1e",
|
|
"& .MuiSelect-select": { color: "#fff" }
|
|
}}
|
|
>
|
|
<MenuItem value="rounded">Rounded</MenuItem>
|
|
<MenuItem value="square">Square</MenuItem>
|
|
</TextField>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Background Opacity</Typography>
|
|
<Slider
|
|
value={editState.labelBgStyle?.fillOpacity ?? 0.85}
|
|
min={0}
|
|
max={1}
|
|
step={0.05}
|
|
onChange={(_, v) => handleChange("labelBgStyle.fillOpacity", v)}
|
|
sx={{ width: 100, ml: 2 }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
type="number"
|
|
value={editState.labelBgStyle?.fillOpacity ?? 0.85}
|
|
onChange={e => handleChange("labelBgStyle.fillOpacity", parseFloat(e.target.value) || 0)}
|
|
sx={{ width: 60, ml: 2, input: { color: "#fff", bgcolor: "#1e1e1e", fontSize: "0.95rem" } }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
const renderStyleTab = () => (
|
|
<Box sx={{ px: 2, pt: 1, pb: 2 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Edge Style</Typography>
|
|
<TextField
|
|
select
|
|
size="small"
|
|
value={editState.type || "bezier"}
|
|
onChange={e => handleChange("type", e.target.value)}
|
|
sx={{
|
|
width: 200,
|
|
bgcolor: "#1e1e1e",
|
|
"& .MuiSelect-select": { color: "#fff" }
|
|
}}
|
|
>
|
|
<MenuItem value="step">Step</MenuItem>
|
|
<MenuItem value="bezier">Curved (Bezier)</MenuItem>
|
|
<MenuItem value="straight">Straight</MenuItem>
|
|
<MenuItem value="smoothstep">Smoothstep</MenuItem>
|
|
</TextField>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Edge Animation</Typography>
|
|
<TextField
|
|
select
|
|
size="small"
|
|
value={
|
|
editState.style?.strokeDasharray === "6 3" ? "dashes"
|
|
: editState.style?.strokeDasharray === "2 4" ? "dots"
|
|
: "solid"
|
|
}
|
|
onChange={e => {
|
|
const val = e.target.value;
|
|
handleChange("style.strokeDasharray",
|
|
val === "dashes" ? "6 3" :
|
|
val === "dots" ? "2 4" : ""
|
|
);
|
|
}}
|
|
sx={{
|
|
width: 200,
|
|
bgcolor: "#1e1e1e",
|
|
"& .MuiSelect-select": { color: "#fff" }
|
|
}}
|
|
>
|
|
<MenuItem value="dashes">Dashes</MenuItem>
|
|
<MenuItem value="dots">Dots</MenuItem>
|
|
<MenuItem value="solid">Solid</MenuItem>
|
|
</TextField>
|
|
</Box>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Color</Typography>
|
|
{renderColorButton("Edge Color", "style.stroke", editState.style?.stroke || "#58a6ff")}
|
|
</Box>
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
|
|
<Typography variant="body2" sx={{ color: "#ccc", flex: 1 }}>Edge Width</Typography>
|
|
<Slider
|
|
value={editState.style?.strokeWidth ?? 2}
|
|
min={1}
|
|
max={10}
|
|
step={1}
|
|
onChange={(_, v) => handleChange("style.strokeWidth", v)}
|
|
sx={{ width: 100, ml: 2 }}
|
|
/>
|
|
<TextField
|
|
size="small"
|
|
type="number"
|
|
value={editState.style?.strokeWidth ?? 2}
|
|
onChange={e => handleChange("style.strokeWidth", parseInt(e.target.value) || 1)}
|
|
sx={{ width: 60, ml: 2, input: { color: "#fff", bgcolor: "#1e1e1e", fontSize: "0.95rem" } }}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
|
|
// Always render the sidebar for animation!
|
|
if (!edge) return null;
|
|
|
|
return (
|
|
<>
|
|
{/* Overlay */}
|
|
<Box
|
|
onClick={onClose}
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: "rgba(0, 0, 0, 0.3)",
|
|
opacity: open ? 1 : 0,
|
|
pointerEvents: open ? "auto" : "none",
|
|
transition: "opacity 0.6s ease",
|
|
zIndex: 10
|
|
}}
|
|
/>
|
|
|
|
{/* Sidebar */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
width: SIDEBAR_WIDTH,
|
|
bgcolor: "#2C2C2C",
|
|
color: "#ccc",
|
|
borderLeft: "1px solid #333",
|
|
padding: 0,
|
|
zIndex: 11,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100%",
|
|
transform: open ? "translateX(0)" : `translateX(${SIDEBAR_WIDTH}px)`,
|
|
transition: "transform 0.3s cubic-bezier(.77,0,.18,1)"
|
|
}}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<Box sx={{ backgroundColor: "#232323", borderBottom: "1px solid #333" }}>
|
|
<Box sx={{ padding: "12px 16px", display: "flex", alignItems: "center" }}>
|
|
<Typography variant="h7" sx={{ color: "#0475c2", fontWeight: "bold", flex: 1 }}>
|
|
Edit Edge Properties
|
|
</Typography>
|
|
</Box>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={(_, v) => setActiveTab(v)}
|
|
variant="fullWidth"
|
|
textColor="inherit"
|
|
TabIndicatorProps={{ style: { backgroundColor: "#ccc" } }}
|
|
sx={{
|
|
borderTop: "1px solid #333",
|
|
borderBottom: "1px solid #333",
|
|
minHeight: "36px",
|
|
height: "36px"
|
|
}}
|
|
>
|
|
<Tab label="Label" sx={{
|
|
color: "#ccc",
|
|
"&.Mui-selected": { color: "#ccc" },
|
|
minHeight: "36px",
|
|
height: "36px",
|
|
textTransform: "none"
|
|
}} />
|
|
<Tab label="Style" sx={{
|
|
color: "#ccc",
|
|
"&.Mui-selected": { color: "#ccc" },
|
|
minHeight: "36px",
|
|
height: "36px",
|
|
textTransform: "none"
|
|
}} />
|
|
</Tabs>
|
|
</Box>
|
|
|
|
{/* Main fields scrollable */}
|
|
<Box sx={{ flex: 1, overflowY: "auto" }}>
|
|
{activeTab === 0 && renderLabelTab()}
|
|
{activeTab === 1 && renderStyleTab()}
|
|
</Box>
|
|
|
|
{/* Sticky footer bar */}
|
|
<Box sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
px: 2, py: 1,
|
|
borderTop: "1px solid #333",
|
|
backgroundColor: "#232323",
|
|
flexShrink: 0
|
|
}}>
|
|
<Box>
|
|
<Tooltip title="Copy Style"><IconButton onClick={handleCopy}><ContentCopyIcon /></IconButton></Tooltip>
|
|
<Tooltip title="Paste Style"><IconButton onClick={handlePaste}><ContentPasteIcon /></IconButton></Tooltip>
|
|
</Box>
|
|
<Box>
|
|
<Tooltip title="Reset to Default"><Button variant="outlined" size="small" startIcon={<RestoreIcon />} onClick={handleReset} sx={{
|
|
color: "#58a6ff", borderColor: "#58a6ff", textTransform: "none"
|
|
}}>Reset to Default</Button></Tooltip>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|