Add more node type

frontend/src/components/Diagram.jsx

@@ -16,9 +16,11 @@ import {
 import CustomNode from './CustomNode';
 import IconSelector from './IconSelector';
 import { toast } from 'react-toastify';
+import RouterNode from './RouterNode';
 
 const nodeTypes = {
   custom: CustomNode,
+  router: RouterNode,
 };
 
 function Diagram() {
@@ -27,6 +29,7 @@ function Diagram() {
   const [selectedNode, setSelectedNode] = 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);
@@ -121,8 +124,10 @@ function Diagram() {
 
     const newNode = {
       id,
-      type: 'custom',
-      data: { label, icon },
+      type: newType,
+      data: newType === 'custom'
+        ? { label, icon }
+        : { label }, // router and other types don't have icons
       position: { x: Math.random() * 400, y: Math.random() * 300 },
     };
 
@@ -131,6 +136,7 @@ function Diagram() {
     setShowForm(false);
     setNewLabel('');
     setSelectedIcon('');
+    setNewType('custom');
   };
 
   const handleDeleteNode = () => {
@@ -272,6 +278,7 @@ function Diagram() {
       {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>
+
           <label style={{ fontWeight: 'bold', marginBottom: 4, display: 'block', color: '#333' }}>Label:</label>
           <input
             type="text"
@@ -280,7 +287,21 @@ function Diagram() {
             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>
+          <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 }}>
             <button className="btn" onClick={handleSubmitNode}>✅ Add</button>
             <button className="btn" style={{ marginLeft: 8, background: '#ccc', color: '#333' }} onClick={() => setShowForm(false)}>❌ Cancel</button>