dvirlabs/labmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add more node type

Browse Source
This commit is contained in:
dvirlabs 2025-07-11 19:29:12 +03:00
parent f48a5210b8
commit a599e19ccc
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Diagram.jsx
View File

@ -16,9 +16,11 @@ import {
import CustomNode from './CustomNode'; import CustomNode from './CustomNode';
import IconSelector from './IconSelector'; import IconSelector from './IconSelector';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import RouterNode from './RouterNode';
const nodeTypes = { const nodeTypes = {
custom: CustomNode, custom: CustomNode,
router: RouterNode,
}; };
function Diagram() { function Diagram() {
@ -27,6 +29,7 @@ function Diagram() {
const [selectedNode, setSelectedNode] = useState(null); const [selectedNode, setSelectedNode] = useState(null);
const [showForm, setShowForm] = useState(false); const [showForm, setShowForm] = useState(false);
const [newLabel, setNewLabel] = useState(''); const [newLabel, setNewLabel] = useState('');
const [newType, setNewType] = useState('custom');
const [selectedIcon, setSelectedIcon] = useState(''); const [selectedIcon, setSelectedIcon] = useState('');
const [selectedEdge, setSelectedEdge] = useState(null); const [selectedEdge, setSelectedEdge] = useState(null);
const [diagramName, setDiagramName] = useState(null); const [diagramName, setDiagramName] = useState(null);
@ -121,8 +124,10 @@ function Diagram() {
const newNode = { const newNode = {
id, id,
type: 'custom', type: newType,
data: { label, icon }, data: newType === 'custom'
? { label, icon }
: { label }, // router and other types don't have icons
position: { x: Math.random() * 400, y: Math.random() * 300 }, position: { x: Math.random() * 400, y: Math.random() * 300 },
}; };
@ -131,6 +136,7 @@ function Diagram() {
setShowForm(false); setShowForm(false);
setNewLabel(''); setNewLabel('');
setSelectedIcon(''); setSelectedIcon('');
setNewType('custom');
}; };
const handleDeleteNode = () => { const handleDeleteNode = () => {
@ -272,6 +278,7 @@ function Diagram() {
{showForm && ( {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 }}> <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> <h4 style={{ color: '#125ea8', marginBottom: 12, fontSize: 18, display: 'flex', alignItems: 'center', gap: 8 }}>🧩 Add New Node</h4>
<label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label> <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label>
<input <input
type="text" type="text"
@ -280,7 +287,21 @@ function Diagram() {
onChange={(e) => setNewLabel(e.target.value)} onChange={(e) => setNewLabel(e.target.value)}
style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }} style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
/> />
<IconSelector onSelect={setSelectedIcon} />
<label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Type:</label>
<select
value={newType}
onChange={(e) => setNewType(e.target.value)}
style={{ padding: '6px', width: '100%', borderRadius: 6, border: '1px solid #ccc', marginBottom: 12 }}
>
<option value="custom">🧱 Custom</option>
<option value="router">📡 Router</option>
</select>
{newType === 'custom' && (
<IconSelector onSelect={setSelectedIcon} />
)}
<div style={{ marginTop: 12 }}> <div style={{ marginTop: 12 }}>
<button className="btn" onClick={handleSubmitNode}>✅ Add</button> <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
<button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button> <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>
@ -311,4 +332,4 @@ function Diagram() {
); );
} }
export default Diagram; export default Diagram;