Jakach/armeech-neptune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing network map
Deploy / deploy (push) Successful in 39s
Details

Browse Source
This commit is contained in:
janis steiner
2026-05-12 10:41:53 +02:00
parent 244f33f001
commit 0a980f767b
1 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/js/app.js
+22 -13
View File
@@ -25,6 +25,8 @@ let dragOffX, dragOffY;
let dragHandle = null; let dragHandle = null;
let dragOrig = null; let dragOrig = null;
let dragNodeIds = null; let dragNodeIds = null;
let dragShapeId = null;
let dragOrigShape = null;
let selectStartX, selectStartY; let selectStartX, selectStartY;
let selectRect = null; let selectRect = null;
@@ -397,7 +399,7 @@ function renderMoreEvents() {
} }
let sentinelObserver = null; let sentinelObserver = null;
let suppressNextMouse = false; let suppressNextMouse = 0;
function observeSentinel() { function observeSentinel() {
if (sentinelObserver) sentinelObserver.disconnect(); if (sentinelObserver) sentinelObserver.disconnect();
@@ -1185,8 +1187,8 @@ function setupCanvasDrop() {
wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); wrapper.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; });
wrapper.addEventListener('drop', async (e) => { wrapper.addEventListener('drop', async (e) => {
e.preventDefault(); e.preventDefault();
suppressNextMouse = true; e.stopPropagation();
setTimeout(() => { suppressNextMouse = false; }, 100); suppressNextMouse = Date.now() + 300;
const data = e.dataTransfer.getData('text/plain'); const data = e.dataTransfer.getData('text/plain');
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left - panX; const mx = e.clientX - rect.left - panX;
@@ -1296,7 +1298,7 @@ function onMouseDown(e) {
return; return;
} }
if (e.button !== 0) return; if (e.button !== 0) return;
if (suppressNextMouse) return; if (Date.now() < suppressNextMouse) return;
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
const mx = e.clientX - rect.left - panX; const mx = e.clientX - rect.left - panX;
const my = e.clientY - rect.top - panY; const my = e.clientY - rect.top - panY;
@@ -1320,13 +1322,15 @@ function onMouseDown(e) {
if (shape) { if (shape) {
selectedNodeId = null; selectedNodeIds = []; selectedShapeId = shape.id; selectedNodeId = null; selectedNodeIds = []; selectedShapeId = shape.id;
dragType = 'shape'; dragTarget = shape; dragType = 'shape'; dragTarget = shape;
dragShapeId = shape.id;
dragOffX = mx - shape.x; dragOffY = my - shape.y; dragOffX = mx - shape.x; dragOffY = my - shape.y;
renderNodeList(); renderShapeList(); renderNodeList(); renderShapeList();
const resizeNow = getShapeResizeHandleAt(mx, my); const resizeNow = getShapeResizeHandleAt(mx, my);
if (resizeNow) { if (resizeNow) {
dragType = 'resize'; dragTarget = resizeNow.shape; 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; 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; return;
} }
@@ -1345,15 +1349,19 @@ function onMouseMove(e) {
for (const c of canvasNodes) { if (dragNodeIds.includes(c.id)) { c.x += dx; c.y += dy; } } for (const c of canvasNodes) { if (dragNodeIds.includes(c.id)) { c.x += dx; c.y += dy; } }
renderNetwork(); return; renderNetwork(); return;
} }
if (dragType === 'shape' && dragTarget) { if (dragType === 'shape' && dragShapeId) {
dragTarget.x = e.clientX - rect.left - panX - dragOffX; const s = canvasShapes.find(x => x.id === dragShapeId);
dragTarget.y = e.clientY - rect.top - panY - dragOffY; if (!s) return;
s.x = e.clientX - rect.left - panX - dragOffX;
s.y = e.clientY - rect.top - panY - dragOffY;
renderNetwork(); return; 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 dx = e.clientX - rect.left - panX - dragOffX;
const dy = e.clientY - rect.top - panY - dragOffY; 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; 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.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; } 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); 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 }) }); 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')) { } else if (dragShapeId && (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 }) }); 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') { } else if (dragType === 'select') {
selectRect = null; selectRect = null;
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();
@@ -1410,7 +1419,7 @@ function onMouseUp(e) {
renderNodeList(); renderShapeList(); renderNetwork(); 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; selectRect = null;
isPanning = false; isPanning = false;
canvas.style.cursor = 'grab'; canvas.style.cursor = 'grab';