fix networkmap

frontend/assets/js/app.js

@@ -377,14 +377,14 @@ function getNodeColorVal(type) {
 
 // ==================== CANVAS RENDERING ====================
 const NODE_FA_ICONS = {
-    host:      { path: 'M-7,-7h14v10h-14z M-5,3h3v4h-3z M2,3h3v4h-3z M0,-10v-3', color: '#3b82f6' },
+    host:      { icon: '\uf108', color: '#3b82f6' },
-    server:    { path: 'M-8,-8h16v4h-16z M-8,-2h16v4h-16z M-8,4h16v4h-16z M-8,10h16v4h-16z', color: '#8b5cf6' },
+    server:    { icon: '\uf233', color: '#8b5cf6' },
-    router:    { path: 'M-10,0l10,-8v5h6v6h-6v5z', color: '#f59e0b' },
+    router:    { icon: '\uf4d8', color: '#f59e0b' },
-    firewall:  { path: 'M-9,-4l3,-4h12l3,4v8l-3,4h-12l-3,-4z M-4,-2h8v4h-8z', color: '#ef4444' },
+    firewall:  { icon: '\uf6ed', color: '#ef4444' },
-    switch:    { path: 'M-10,-4h20v2h-20z M-10,0h20v2h-20z M-10,4h20v2h-20z', color: '#06b6d4' },
+    switch:    { icon: '\uf2d1', color: '#06b6d4' },
-    cloud:     { path: 'M-2,-9c-5,0-8,3-7,7c-2,2-3,5-1,8h5c2,3,7,3,10,2h5c3-2,3-7,1-9c1-4-2-8-5-8c-1,0-3,1-4,2c-1-1-2-2-4-2z', color: '#22c55e' },
+    cloud:     { icon: '\uf0c2', color: '#22c55e' },
-    endpoint:  { path: 'M-9,-7c0-2,2-4,4-4h10c2,0,4,2,4,4v14c0,2-2,4-4,4h-10c-2,0-4-2-4-4z M-5,7h10v2h-10z M-5,3h10v2h-10z M0,-2c2,0,3,1,3,3c0,2-1,3-3,3c-2,0-3-1-3-3c0-2,1-3,3-3z', color: '#ec4899' },
+    endpoint:  { icon: '\uf109', color: '#ec4899' },
-    other:     { path: 'M-6,-6h12v12h-12z', color: '#6b7280' }
+    other:     { icon: '\uf111', color: '#6b7280' }
 };
 
 function buildCanvasGraph() {
@@ -394,7 +394,7 @@ function buildCanvasGraph() {
             id: n.id, label: n.label, ip: n.ip_address,
             type: n.node_type, status: n.status, group: n.group_name,
             x: parseFloat(n.pos_x) || 100, y: parseFloat(n.pos_y) || 100,
-            iconPath: fa.path, color: fa.color, w: 36, h: 36
+            icon: fa.icon, color: fa.color, w: 36, h: 36
         };
     });
 
@@ -499,22 +499,18 @@ function drawCanvasNode(n) {
     ctx.stroke();
     ctx.shadowBlur = 0;
 
-    // Draw icon
+    // Draw icon using Font Awesome
     ctx.save();
-    ctx.translate(n.x, n.y);
+    ctx.font = '500 22px "Font Awesome 6 Free", "FontAwesome", "Font Awesome 5 Free", sans-serif';
-    const s = 1.2;
+    ctx.textAlign = 'center';
-    ctx.scale(s, s);
+    ctx.textBaseline = 'middle';
-    const path = new Path2D(n.iconPath);
     ctx.fillStyle = n.color;
-    ctx.lineWidth = 1.8;
+    ctx.fillText(n.icon, n.x, n.y);
-    ctx.strokeStyle = n.color;
-    ctx.fill(path);
-    ctx.stroke(path);
     ctx.restore();
 
     // Status dot
     ctx.beginPath();
-    ctx.arc(17, -17, 5, 0, Math.PI * 2);
+    ctx.arc(n.x + 17, n.y - 17, 5, 0, Math.PI * 2);
     const sc = { online: '#22c55e', offline: '#6b7280', unknown: '#9ca3af', compromised: '#ef4444', monitoring: '#eab308' };
     ctx.fillStyle = sc[n.status] || '#9ca3af';
     ctx.fill();
@@ -571,9 +567,6 @@ function onMouseDown(e) {
     const mx = e.clientX - rect.left - panX;
     const my = e.clientY - rect.top - panY;
 
-    // Always build graph fresh before interacting
-    buildCanvasGraph();
-
     const resize = getShapeResizeHandleAt(mx, my);
     if (resize) {
         dragType = 'resize'; dragTarget = resize.shape;
@@ -613,11 +606,15 @@ function onMouseMove(e) {
         dragTarget.x = e.clientX - rect.left - panX - dragOffX;
         dragTarget.y = e.clientY - rect.top - panY - dragOffY;
         renderNetwork();
-    } else if (dragType === 'shape' && dragTarget) {
+        return;
+    }
+    if (dragType === 'shape' && dragTarget) {
         dragTarget.x = e.clientX - rect.left - panX - dragOffX;
         dragTarget.y = e.clientY - rect.top - panY - dragOffY;
         renderNetwork();
-    } else if (dragType === 'resize' && dragTarget) {
+        return;
+    }
+    if (dragType === 'resize' && dragTarget) {
         const dx = e.clientX - rect.left - panX - dragOffX;
         const dy = e.clientY - rect.top - panY - dragOffY;
         const s = dragTarget;
@@ -631,17 +628,20 @@ function onMouseMove(e) {
         if (nh < 50) { if (o.cy === 0) ny = o.y + o.h - 50; nh = 50; }
         s.x = nx; s.y = ny; s.w = nw; s.h = nh;
         renderNetwork();
-    } else if (isPanning) {
+        return;
+    }
+    if (isPanning) {
         panX = e.clientX - panStartX; panY = e.clientY - panStartY;
         renderNetwork();
-    } else {
+        return;
+    }
+
     const mx = e.clientX - rect.left - panX;
     const my = e.clientY - rect.top - panY;
     if (getShapeResizeHandleAt(mx, my)) canvas.style.cursor = 'nwse-resize';
     else if (getCanvasNodeAt(mx, my) || getShapeAt(mx, my)) canvas.style.cursor = 'pointer';
     else canvas.style.cursor = 'grab';
 }
-}
 
 function onMouseUp(e) {
     if (dragTarget && dragType === 'node') {