fixing network map

frontend/assets/js/app.js

@@ -25,6 +25,8 @@ let dragOffX, dragOffY;
 let dragHandle = null;
 let dragOrig = null;
 let dragNodeIds = null;
+let dragShapeId = null;
+let dragOrigShape = null;
 let selectStartX, selectStartY;
 let selectRect = null;
 
@@ -397,7 +399,7 @@ function renderMoreEvents() {
 }
 
 let sentinelObserver = null;
-let suppressNextMouse = false;
+let suppressNextMouse = 0;
 
 function observeSentinel() {
     if (sentinelObserver) sentinelObserver.disconnect();
@@ -1185,8 +1187,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);
+        e.stopPropagation();
+        suppressNextMouse = Date.now() + 300;
         const data = e.dataTransfer.getData('text/plain');
         const rect = canvas.getBoundingClientRect();
         const mx = e.clientX - rect.left - panX;
@@ -1296,7 +1298,7 @@ function onMouseDown(e) {
         return;
     }
     if (e.button !== 0) return;
-    if (suppressNextMouse) return;
+    if (Date.now() < suppressNextMouse) return;
     const rect = canvas.getBoundingClientRect();
     const mx = e.clientX - rect.left - panX;
     const my = e.clientY - rect.top - panY;
@@ -1320,13 +1322,15 @@ function onMouseDown(e) {
     if (shape) {
         selectedNodeId = null; selectedNodeIds = []; selectedShapeId = shape.id;
         dragType = 'shape'; dragTarget = shape;
+        dragShapeId = shape.id;
         dragOffX = mx - shape.x; dragOffY = my - shape.y;
         renderNodeList(); renderShapeList();
         const resizeNow = getShapeResizeHandleAt(mx, my);
         if (resizeNow) {
             dragType = 'resize'; dragTarget = resizeNow.shape;
+            dragShapeId = resizeNow.shape.id;
+            dragOrigShape = { x: resizeNow.shape.x, y: resizeNow.shape.y, w: resizeNow.shape.w, h: resizeNow.shape.h, cx: resizeNow.cx, cy: resizeNow.cy };
             dragOffX = mx; dragOffY = my;
-            dragOrig = { x: resizeNow.shape.x, y: resizeNow.shape.y, w: resizeNow.shape.w, h: resizeNow.shape.h, cx: resizeNow.cx, cy: resizeNow.cy };
         }
         return;
     }
@@ -1345,15 +1349,19 @@ function onMouseMove(e) {
         for (const c of canvasNodes) { if (dragNodeIds.includes(c.id)) { c.x += dx; c.y += dy; } }
         renderNetwork(); return;
     }
-    if (dragType === 'shape' && dragTarget) {
-        dragTarget.x = e.clientX - rect.left - panX - dragOffX;
-        dragTarget.y = e.clientY - rect.top - panY - dragOffY;
+    if (dragType === 'shape' && dragShapeId) {
+        const s = canvasShapes.find(x => x.id === dragShapeId);
+        if (!s) return;
+        s.x = e.clientX - rect.left - panX - dragOffX;
+        s.y = e.clientY - rect.top - panY - dragOffY;
         renderNetwork(); return;
     }
-    if (dragType === 'resize' && dragTarget) {
+    if (dragType === 'resize' && dragShapeId) {
+        const s = canvasShapes.find(x => x.id === dragShapeId);
+        if (!s) return;
         const dx = e.clientX - rect.left - panX - dragOffX;
         const dy = e.clientY - rect.top - panY - dragOffY;
-        const s = dragTarget; const o = dragOrig;
+        const o = dragOrigShape;
         let nx = o.x, ny = o.y, nw = o.w, nh = o.h;
         if (o.cx === 0) { nx = o.x + dx; nw = o.w - dx; } else { nw = o.w + dx; }
         if (o.cy === 0) { ny = o.y + dy; nh = o.h - dy; } else { nh = o.h + dy; }
@@ -1391,8 +1399,9 @@ function onMouseUp(e) {
             const c = canvasNodes.find(n => n.id === id);
             if (c) apiFetch('nodes/' + id, { method: 'PUT', body: JSON.stringify({ pos_x: c.x, pos_y: c.y }) });
         }
-    } else if (dragTarget && (dragType === 'shape' || dragType === 'resize')) {
-        apiFetch('shapes/' + dragTarget.id, { method: 'PUT', body: JSON.stringify({ pos_x: dragTarget.x, pos_y: dragTarget.y, width: dragTarget.w, height: dragTarget.h }) });
+    } else if (dragShapeId && (dragType === 'shape' || dragType === 'resize')) {
+        const s = canvasShapes.find(x => x.id === dragShapeId);
+        if (s) apiFetch('shapes/' + dragShapeId, { method: 'PUT', body: JSON.stringify({ pos_x: s.x, pos_y: s.y, width: s.w, height: s.h }) });
     } else if (dragType === 'select') {
         selectRect = null;
         const rect = canvas.getBoundingClientRect();
@@ -1410,7 +1419,7 @@ function onMouseUp(e) {
             renderNodeList(); renderShapeList(); renderNetwork();
         }
     }
-    dragType = null; dragTarget = null; dragOrig = null; dragNodeIds = null;
+    dragType = null; dragTarget = null; dragOrig = null; dragNodeIds = null; dragShapeId = null; dragOrigShape = null;
     selectRect = null;
     isPanning = false;
     canvas.style.cursor = 'grab';