Remove ColorNode
This commit is contained in:
parent
552f351949
commit
1b5d7735ce
@ -1,19 +0,0 @@
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"id": "1",
|
||||
"type": "custom",
|
||||
"data": {
|
||||
"label": "Node 1",
|
||||
"icon": "https://s3.dvirlabs.com/lab-icons/dev-tools/argocd.svg"
|
||||
},
|
||||
"position": {
|
||||
"x": 307.58165778037267,
|
||||
"y": 195.1586839847007
|
||||
},
|
||||
"width": 103,
|
||||
"height": 103
|
||||
}
|
||||
],
|
||||
"edges": []
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { Handle, Position } from 'reactflow';
|
||||
|
||||
function ColorNode({ data }) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'white',
|
||||
border: '2px solid #ff0071',
|
||||
borderRadius: 8,
|
||||
padding: 10,
|
||||
width: 120,
|
||||
textAlign: 'center'
|
||||
}}>
|
||||
<Handle type="target" position={Position.Left} />
|
||||
<div style={{ fontSize: 12, marginBottom: 6 }}>🎨 Shape Color</div>
|
||||
<input
|
||||
type="color"
|
||||
value={data.color || '#ff0071'}
|
||||
onChange={(e) => data.onChange?.(e.target.value)}
|
||||
style={{ width: '100%' }}
|
||||
/>
|
||||
<Handle type="source" position={Position.Right} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ColorNode;
|
||||
@ -17,42 +17,34 @@ import CustomNode from './CustomNode';
|
||||
import IconSelector from './IconSelector';
|
||||
import { toast } from 'react-toastify';
|
||||
import RouterNode from './RouterNode';
|
||||
import ColorNode from './ColorNode';
|
||||
|
||||
|
||||
const nodeTypes = {
|
||||
custom: CustomNode,
|
||||
router: RouterNode,
|
||||
color: ColorNode,
|
||||
};
|
||||
|
||||
function Diagram() {
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
const [selectedNode, setSelectedNode] = useState(null);
|
||||
const [selectedEdge, setSelectedEdge] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [newLabel, setNewLabel] = useState('');
|
||||
const [newType, setNewType] = useState('custom');
|
||||
const [selectedIcon, setSelectedIcon] = useState('');
|
||||
const [selectedEdge, setSelectedEdge] = useState(null);
|
||||
const [diagramName, setDiagramName] = useState(null);
|
||||
const [diagramList, setDiagramList] = useState([]);
|
||||
const isIframe = window.self !== window.top;
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const { diagrams } = await listDiagrams();
|
||||
if (isMounted) {
|
||||
setDiagramList(diagrams);
|
||||
|
||||
if (diagrams.length > 0) {
|
||||
setDiagramName((prev) => prev || diagrams[0]);
|
||||
} else {
|
||||
setDiagramName(null);
|
||||
}
|
||||
setDiagramList(diagrams);
|
||||
if (diagrams.length > 0) {
|
||||
setDiagramName((prev) => prev || diagrams[0]);
|
||||
} else {
|
||||
setDiagramName(null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
@ -60,16 +52,10 @@ function Diagram() {
|
||||
setDiagramName(null);
|
||||
}
|
||||
};
|
||||
|
||||
load();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
|
||||
const loadDiagram = async () => {
|
||||
if (!diagramName) {
|
||||
setNodes([]);
|
||||
@ -78,18 +64,13 @@ function Diagram() {
|
||||
}
|
||||
try {
|
||||
const data = await fetchDiagramByName(diagramName);
|
||||
if (isMounted) {
|
||||
setNodes(data.nodes || []);
|
||||
const sanitizedEdges = (data.edges || []).map(({ id, source, target, animated }) => ({
|
||||
id,
|
||||
source,
|
||||
target,
|
||||
animated: !!animated,
|
||||
}));
|
||||
setEdges(sanitizedEdges);
|
||||
setSelectedNode(null);
|
||||
setSelectedEdge(null);
|
||||
}
|
||||
setNodes(data.nodes || []);
|
||||
const sanitizedEdges = (data.edges || []).map(({ id, source, target, animated }) => ({
|
||||
id, source, target, animated: !!animated
|
||||
}));
|
||||
setEdges(sanitizedEdges);
|
||||
setSelectedNode(null);
|
||||
setSelectedEdge(null);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
toast.error(`❌ Failed to load diagram "${diagramName}"`);
|
||||
@ -97,29 +78,18 @@ function Diagram() {
|
||||
setEdges([]);
|
||||
}
|
||||
};
|
||||
|
||||
loadDiagram();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [diagramName, setNodes, setEdges]);
|
||||
}, [diagramName]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!diagramName) return;
|
||||
const cleanedEdges = edges.map(({ id, source, target, animated }) => ({
|
||||
id,
|
||||
source,
|
||||
target,
|
||||
animated: !!animated,
|
||||
id, source, target, animated: !!animated
|
||||
}));
|
||||
await saveDiagramByName(diagramName, { nodes, edges: cleanedEdges });
|
||||
toast.success(`✅ Diagram "${diagramName}" saved!`);
|
||||
};
|
||||
|
||||
const handleAddNode = () => {
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleSubmitNode = () => {
|
||||
const id = (nodes.length + 1).toString();
|
||||
const label = newLabel || `Node ${id}`;
|
||||
@ -128,9 +98,7 @@ function Diagram() {
|
||||
const newNode = {
|
||||
id,
|
||||
type: newType,
|
||||
data: newType === 'custom'
|
||||
? { label, icon }
|
||||
: { label }, // router and other types don't have icons
|
||||
data: newType === 'custom' ? { label, icon } : { label },
|
||||
position: { x: Math.random() * 400, y: Math.random() * 300 },
|
||||
};
|
||||
|
||||
@ -150,6 +118,11 @@ function Diagram() {
|
||||
setSelectedNode(null);
|
||||
};
|
||||
|
||||
const onConnect = useCallback(
|
||||
(params) => setEdges((eds) => addEdge({ ...params, animated: true }, eds)),
|
||||
[setEdges]
|
||||
);
|
||||
|
||||
const onEdgeClick = (_, edge) => {
|
||||
setSelectedEdge(edge);
|
||||
setSelectedNode(null);
|
||||
@ -162,12 +135,9 @@ function Diagram() {
|
||||
setSelectedEdge(null);
|
||||
};
|
||||
|
||||
const onConnect = useCallback(
|
||||
(params) => setEdges((eds) => addEdge({ ...params, animated: true }, eds)),
|
||||
[setEdges]
|
||||
);
|
||||
const onNodeClick = (_, node) => setSelectedNode(node);
|
||||
|
||||
const handleNodeDoubleClick = (event, node) => {
|
||||
const handleNodeDoubleClick = (_, node) => {
|
||||
const newLabel = prompt('Enter new name:', node.data.label);
|
||||
if (newLabel !== null) {
|
||||
setNodes((nds) =>
|
||||
@ -179,19 +149,12 @@ function Diagram() {
|
||||
}
|
||||
};
|
||||
|
||||
const onNodeClick = (_, node) => {
|
||||
setSelectedNode(node);
|
||||
};
|
||||
|
||||
const handleDeleteDiagram = async () => {
|
||||
if (!diagramName || diagramName === 'default') {
|
||||
toast.warn("❌ Cannot delete 'default' diagram or nothing selected.");
|
||||
return;
|
||||
}
|
||||
|
||||
const confirmDelete = confirm(`Are you sure you want to delete diagram "${diagramName}"?`);
|
||||
if (!confirmDelete) return;
|
||||
|
||||
if (!confirm(`Delete "${diagramName}"?`)) return;
|
||||
try {
|
||||
await deleteDiagramByName(diagramName);
|
||||
const updatedList = diagramList.filter(name => name !== diagramName);
|
||||
@ -208,8 +171,8 @@ function Diagram() {
|
||||
|
||||
return (
|
||||
<div style={{ width: '100vw', height: '100vh' }}>
|
||||
<div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: '10px', height: '48px' }}>
|
||||
<div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ position: 'absolute', zIndex: 10, right: 10, top: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<select
|
||||
value={diagramName || ''}
|
||||
onChange={(e) => setDiagramName(e.target.value)}
|
||||
@ -229,22 +192,12 @@ function Diagram() {
|
||||
}}
|
||||
>
|
||||
{diagramList.map((name) => (
|
||||
<option key={name} value={name} style={{ color: 'white', font: 'bold 16px Arial' }}>
|
||||
<option key={name} value={name}>
|
||||
📌 {name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 12,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
pointerEvents: 'none',
|
||||
fontSize: 16,
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<div style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none', color: 'white' }}>
|
||||
⏷
|
||||
</div>
|
||||
</div>
|
||||
@ -255,43 +208,36 @@ function Diagram() {
|
||||
const newName = prompt("Enter new diagram name:");
|
||||
if (newName) {
|
||||
if (!diagramList.includes(newName)) {
|
||||
const updatedList = [...diagramList, newName];
|
||||
setDiagramList(updatedList);
|
||||
setDiagramList((prev) => [...prev, newName]);
|
||||
}
|
||||
setDiagramName(newName);
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
setSelectedNode(null);
|
||||
setSelectedEdge(null);
|
||||
}
|
||||
}}>🆕 New Diagram</button>
|
||||
|
||||
<button className="btn" onClick={handleSave} style={{ background: 'green' }}>💾 Save</button>
|
||||
<button className="btn" onClick={handleAddNode} style={{ background: 'blue' }}>➕ Add Node</button>
|
||||
|
||||
<button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc', color: selectedNode ? 'white' : '#666', cursor: selectedNode ? 'pointer' : 'not-allowed' }} disabled={!selectedNode}>🗑️ Delete Node</button>
|
||||
|
||||
<button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc', color: selectedEdge ? 'white' : '#666', cursor: selectedEdge ? 'pointer' : 'not-allowed' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
|
||||
|
||||
<button className="btn" onClick={() => setShowForm(true)} style={{ background: 'blue' }}>➕ Add Node</button>
|
||||
<button className="btn" onClick={handleDeleteNode} style={{ background: selectedNode ? '#b81a1a' : '#ccc' }} disabled={!selectedNode}>🗑️ Delete Node</button>
|
||||
<button className="btn" onClick={handleDeleteEdge} style={{ background: selectedEdge ? '#b81a1a' : '#ccc' }} disabled={!selectedEdge}>🗑️ Delete Edge</button>
|
||||
<button className="btn" onClick={handleDeleteDiagram} style={{ background: 'red' }}>🗑️ Delete Diagram</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#e6f0fa', padding: '16px', borderRadius: '12px', boxShadow: '0 4px 8px rgba(0,0,0,0.15)', width: 280 }}>
|
||||
<h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>🧩 Add New Node</h4>
|
||||
<div style={{ position: 'absolute', zIndex: 20, right: 10, top: 80, background: '#13141a', padding: '16px', borderRadius: '12px', boxShadow: '0 4px 8px rgba(0,0,0,0.15)', width: 280 }}>
|
||||
<h4 style={{ color: 'white', marginBottom: 12 }}>🧩 Add New Node</h4>
|
||||
|
||||
<label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label>
|
||||
<label style={{ fontWeight: 'bold', color: 'white' }}>Label:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter label"
|
||||
value={newLabel}
|
||||
onChange={(e) => setNewLabel(e.target.value)}
|
||||
style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
|
||||
/>
|
||||
|
||||
<label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Type:</label>
|
||||
<label style={{ fontWeight: 'bold', color: 'white' }}>Type:</label>
|
||||
<select
|
||||
value={newType}
|
||||
onChange={(e) => setNewType(e.target.value)}
|
||||
@ -299,12 +245,9 @@ function Diagram() {
|
||||
>
|
||||
<option value="custom">🧱 Custom</option>
|
||||
<option value="router">📡 Router</option>
|
||||
<option value="color">🎨 Color Node</option>
|
||||
</select>
|
||||
|
||||
{newType === 'custom' && (
|
||||
<IconSelector onSelect={setSelectedIcon} />
|
||||
)}
|
||||
{newType === 'custom' && <IconSelector onSelect={setSelectedIcon} />}
|
||||
|
||||
<div style={{ marginTop: 12 }}>
|
||||
<button className="btn" onClick={handleSubmitNode}>✅ Add</button>
|
||||
|
||||
@ -25,7 +25,7 @@ function IconSelector({ onSelect }) {
|
||||
return (
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<div style={{ marginBottom: '0.5rem' }}>
|
||||
<label style={{ fontWeight: 'bold', color: '#333' }}>Category: </label>
|
||||
<label style={{ fontWeight: 'bold', color: 'white' }}>Category: </label>
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={handleCategoryChange}
|
||||
@ -47,7 +47,7 @@ function IconSelector({ onSelect }) {
|
||||
|
||||
{selectedCategory && (
|
||||
<div>
|
||||
<label style={{ fontWeight: 'bold', color: 'black' }}>Choose an icon:</label>
|
||||
<label style={{ fontWeight: 'bold', color: 'white' }}>Choose an icon:</label>
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
@ -81,7 +81,7 @@ function IconSelector({ onSelect }) {
|
||||
))}
|
||||
</div>
|
||||
{selectedIcon && (
|
||||
<p style={{ marginTop: 8, fontSize: 13, color: 'black' }}>
|
||||
<p style={{ marginTop: 8, fontSize: 13, color: 'white' }}>
|
||||
Selected: <code>{selectedIcon.split('/').pop()}</code>
|
||||
</p>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user