From fe5f288fc0db6dca2c2f3ee247dca1466e65def0 Mon Sep 17 00:00:00 2001
From: janis steiner <janis@jakach.ch>
Date: Tue, 12 May 2026 10:33:35 +0200
Subject: [PATCH] fixing network map

---
 frontend/assets/js/app.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/assets/js/app.js b/frontend/assets/js/app.js
index caf7347..51ccb01 100644
--- a/frontend/assets/js/app.js
+++ b/frontend/assets/js/app.js
@@ -396,6 +396,7 @@ function renderMoreEvents() {
 }
 
 let sentinelObserver = null;
+let suppressNextMouse = false;
 
 function observeSentinel() {
     if (sentinelObserver) sentinelObserver.disconnect();
@@ -1160,13 +1161,14 @@ function renderNodeToolbar() {
         { type: 'cloud', icon: 'fa-cloud', color: '#22c55e', label: 'Cloud' },
         { type: 'endpoint', icon: 'fa-laptop', color: '#ec4899', label: 'Endpoint' },
         { type: 'other', icon: 'fa-circle', color: '#6b7280', label: 'Other' },
+        { type: 'shape:rectangle', icon: 'fa-vector-square', color: '#3b82f6', label: 'Box', isShape: true },
+        { type: 'shape:ellipse', icon: 'fa-circle', color: '#3b82f6', label: 'Ellipse', isShape: true },
     ];
     bar.innerHTML = '<span class="text-secondary me-1 small" style="font-size:.7rem;line-height:26px;">Drag to canvas:</span>';
     iconMap.forEach(t => {
         const el = document.createElement('span');
-        el.className = 'toolbar-node-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded';
+        el.className = 'd-inline-flex align-items-center gap-1 px-2 py-1 rounded';
         el.draggable = true;
-        el.dataset.nodeType = t.type;
         el.style.cssText = 'cursor:grab;font-size:.75rem;color:' + t.color + ';background:' + t.color + '12;border:1px solid ' + t.color + '30;';
         el.innerHTML = '<i class="fas ' + t.icon + '" style="font-size:.75rem;"></i><span>' + t.label + '</span>';
         el.addEventListener('dragstart', (e) => {
@@ -1175,15 +1177,6 @@ function renderNodeToolbar() {
         });
         bar.appendChild(el);
     });
-    bar.innerHTML += '<span class="toolbar-shape-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded ms-1" draggable="true" data-shape="rectangle" style="cursor:grab;font-size:.75rem;color:#3b82f6;background:#3b82f612;border:1px solid #3b82f630;"><i class="fas fa-vector-square" style="font-size:.75rem;"></i><span>Box</span></span>';
-    bar.innerHTML += '<span class="toolbar-shape-item d-inline-flex align-items-center gap-1 px-2 py-1 rounded ms-1" draggable="true" data-shape="ellipse" style="cursor:grab;font-size:.75rem;color:#3b82f6;background:#3b82f612;border:1px solid #3b82f630;"><i class="fas fa-circle" style="font-size:.75rem;"></i><span>Ellipse</span></span>';
-
-    bar.querySelectorAll('.toolbar-shape-item').forEach(el => {
-        el.addEventListener('dragstart', (e) => {
-            e.dataTransfer.setData('text/plain', 'shape:' + el.dataset.shape);
-            e.dataTransfer.effectAllowed = 'copy';
-        });
-    });
 }
 
 function setupCanvasDrop() {
@@ -1191,6 +1184,8 @@ function setupCanvasDrop() {
     wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });
     wrapper.addEventListener('drop', async (e) => {
         e.preventDefault();
+        suppressNextMouse = true;
+        setTimeout(() => { suppressNextMouse = false; }, 100);
         const data = e.dataTransfer.getData('text/plain');
         const rect = canvas.getBoundingClientRect();
         const mx = e.clientX - rect.left - panX;
@@ -1301,6 +1296,7 @@ function onMouseDown(e) {
         return;
     }
     if (e.button !== 0) return;
+    if (suppressNextMouse) return;
     const rect = canvas.getBoundingClientRect();
     const mx = e.clientX - rect.left - panX;
     const my = e.clientY - rect.top - panY;