783 lines
27 KiB
JavaScript
783 lines
27 KiB
JavaScript
const API = '/api/';
|
|
let teams = [];
|
|
let events = [];
|
|
let nodes = [];
|
|
let links = [];
|
|
let shapes = [];
|
|
let selectedNodeId = null;
|
|
let selectedShapeId = null;
|
|
|
|
// Canvas state
|
|
let canvas, ctx;
|
|
let canvasNodes = [];
|
|
let canvasLinks = [];
|
|
let canvasShapes = [];
|
|
let panX = 0, panY = 0;
|
|
let isPanning = false;
|
|
let panStartX, panStartY;
|
|
|
|
// Drag state
|
|
let dragTarget = null;
|
|
let dragType = null;
|
|
let dragOffX, dragOffY;
|
|
let dragHandle = null;
|
|
let dragOrig = null;
|
|
|
|
let nextShapeZ = 0;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
canvas = document.getElementById('networkCanvas');
|
|
ctx = canvas.getContext('2d');
|
|
resizeCanvas();
|
|
|
|
loadTeams().then(() => loadEvents());
|
|
loadNetworkData();
|
|
|
|
document.getElementById('saveEvent').addEventListener('click', saveEvent);
|
|
document.getElementById('saveNode').addEventListener('click', saveNode);
|
|
document.getElementById('saveLink').addEventListener('click', saveLink);
|
|
document.getElementById('saveShape').addEventListener('click', saveShape);
|
|
document.getElementById('teamFilter').addEventListener('change', renderTimeline);
|
|
document.getElementById('searchEvents').addEventListener('input', renderTimeline);
|
|
document.getElementById('shapeOpacity').addEventListener('input', (e) => {
|
|
document.getElementById('opacityVal').textContent = parseFloat(e.target.value).toFixed(2);
|
|
});
|
|
|
|
canvas.addEventListener('mousedown', onMouseDown);
|
|
canvas.addEventListener('mousemove', onMouseMove);
|
|
canvas.addEventListener('mouseup', onMouseUp);
|
|
canvas.addEventListener('dblclick', onDblClick);
|
|
canvas.addEventListener('contextmenu', onContextMenu);
|
|
window.addEventListener('resize', () => { resizeCanvas(); renderNetwork(); });
|
|
|
|
// Keyboard shortcuts
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
if (document.activeElement === canvas || document.activeElement?.tagName !== 'INPUT') {
|
|
if (selectedNodeId) deleteSelectedNode();
|
|
else if (selectedShapeId) deleteSelectedShape();
|
|
}
|
|
}
|
|
if (e.key === 'Escape') {
|
|
selectedNodeId = null;
|
|
selectedShapeId = null;
|
|
renderNetwork();
|
|
renderNodeList();
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
|
|
tab.addEventListener('shown.bs.tab', () => {
|
|
if (tab.id === 'network-tab') {
|
|
resizeCanvas();
|
|
renderNetwork();
|
|
}
|
|
});
|
|
});
|
|
|
|
document.documentElement.setAttribute('data-bs-theme', 'dark');
|
|
});
|
|
|
|
function resizeCanvas() {
|
|
const wrapper = document.getElementById('networkCanvasWrapper');
|
|
canvas.width = wrapper.clientWidth;
|
|
canvas.height = wrapper.clientHeight;
|
|
}
|
|
|
|
async function apiFetch(path, options = {}) {
|
|
const res = await fetch(API + path, {
|
|
headers: { 'Content-Type': 'application/json' },
|
|
...options
|
|
});
|
|
return res.json();
|
|
}
|
|
|
|
// ==================== TEAMS ====================
|
|
async function loadTeams() {
|
|
teams = await apiFetch('teams');
|
|
const selTeam = document.getElementById('eventTeam');
|
|
const filter = document.getElementById('teamFilter');
|
|
selTeam.innerHTML = '';
|
|
filter.innerHTML = '<option value="">All Teams</option>';
|
|
teams.forEach(t => {
|
|
selTeam.innerHTML += `<option value="${t.id}">${t.name}</option>`;
|
|
filter.innerHTML += `<option value="${t.id}">${t.name}</option>`;
|
|
});
|
|
}
|
|
|
|
// ==================== EVENTS / TIMELINE ====================
|
|
async function loadEvents() {
|
|
events = await apiFetch('events');
|
|
renderTimeline();
|
|
}
|
|
|
|
function renderTimeline() {
|
|
const container = document.getElementById('timelineContainer');
|
|
const teamFilter = document.getElementById('teamFilter').value;
|
|
const search = document.getElementById('searchEvents').value.toLowerCase();
|
|
|
|
let filtered = events;
|
|
if (teamFilter) filtered = filtered.filter(e => e.team_id == teamFilter);
|
|
if (search) filtered = filtered.filter(e =>
|
|
e.title.toLowerCase().includes(search) ||
|
|
(e.description && e.description.toLowerCase().includes(search))
|
|
);
|
|
|
|
if (!filtered.length) {
|
|
container.innerHTML = `<div class="text-center text-secondary py-5"><i class="bi bi-journal-text fs-1"></i><p class="mt-2">No events yet. Create your first incident entry!</p></div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = filtered.map(e => {
|
|
const sevClass = 'severity-' + e.severity;
|
|
const date = new Date(e.occurred_at).toLocaleString();
|
|
return `
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot ${sevClass}"></div>
|
|
<div class="card timeline-card bg-dark border-secondary" style="border-left-color: ${e.team_color}">
|
|
<div class="card-body py-2 px-3">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<span class="badge severity-badge me-1" style="background:${e.team_color}20;color:${e.team_color}">${e.team_name}</span>
|
|
<span class="badge bg-${e.severity === 'critical' ? 'danger' : e.severity === 'high' ? 'warning' : e.severity === 'medium' ? 'warning' : e.severity === 'low' ? 'success' : 'info'} severity-badge">${e.severity}</span>
|
|
<span class="badge bg-secondary severity-badge ms-1">${e.event_type}</span>
|
|
</div>
|
|
<small class="event-meta">${date}</small>
|
|
</div>
|
|
<h6 class="event-title mt-1 mb-1">${esc(e.title)}</h6>
|
|
${e.description ? `<p class="mb-1 small text-secondary">${esc(e.description)}</p>` : ''}
|
|
<div class="mt-2" id="comments-${e.id}">
|
|
<div class="d-flex align-items-center mb-1">
|
|
<small class="text-secondary fw-bold"><i class="bi bi-chat-dots me-1"></i>Comments ${e.comments && e.comments.length ? `(${e.comments.length})` : ''}</small>
|
|
</div>
|
|
<div class="comment-log">
|
|
${renderComments(e)}
|
|
</div>
|
|
<div class="input-group input-group-sm comment-input-group mt-1">
|
|
<input type="text" class="form-control form-control-sm comment-input" placeholder="Write a comment..." onkeydown="if(event.key==='Enter') addComment(${e.id}, this)">
|
|
<button class="btn btn-outline-secondary btn-sm" onclick="addComment(${e.id}, this)"><i class="bi bi-send"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function renderComments(event) {
|
|
if (!event.comments || !event.comments.length) return '<div class="text-secondary small py-1"><i class="bi bi-chat-left-text me-1"></i>No comments yet</div>';
|
|
return event.comments.map(c => `
|
|
<div class="comment-box d-flex">
|
|
<div class="me-2 text-secondary" style="font-size:.7rem;"><i class="bi bi-person-circle"></i></div>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex justify-content-between">
|
|
<span class="comment-author">${esc(c.author)}</span>
|
|
<span class="text-secondary" style="font-size:.7rem;">${new Date(c.created_at).toLocaleString()}</span>
|
|
</div>
|
|
<div class="comment-body">${esc(c.body)}</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async function addComment(eventId, el) {
|
|
const container = el.closest('.comment-input-group') || el.parentElement;
|
|
const input = container.querySelector('.comment-input');
|
|
const body = input.value.trim();
|
|
if (!body) return;
|
|
const author = prompt('Your name:') || 'Anonymous';
|
|
await apiFetch('comments', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ event_id: eventId, author, body })
|
|
});
|
|
input.value = '';
|
|
loadEvents();
|
|
}
|
|
|
|
async function saveEvent() {
|
|
const data = {
|
|
team_id: document.getElementById('eventTeam').value,
|
|
title: document.getElementById('eventTitle').value,
|
|
description: document.getElementById('eventDescription').value,
|
|
severity: document.getElementById('eventSeverity').value,
|
|
event_type: document.getElementById('eventType').value,
|
|
occurred_at: new Date().toISOString().slice(0, 16)
|
|
};
|
|
if (!data.title) return alert('Title required');
|
|
await apiFetch('events', { method: 'POST', body: JSON.stringify(data) });
|
|
bootstrap.Modal.getInstance(document.getElementById('eventModal')).hide();
|
|
document.getElementById('eventForm').reset();
|
|
loadEvents();
|
|
}
|
|
|
|
// ==================== NETWORK MAP ====================
|
|
async function loadNetworkData() {
|
|
const [n, l, s] = await Promise.all([
|
|
apiFetch('nodes'),
|
|
apiFetch('links'),
|
|
apiFetch('shapes')
|
|
]);
|
|
nodes = n;
|
|
links = l;
|
|
shapes = s;
|
|
populateNodeSelects();
|
|
renderNodeList();
|
|
renderShapeList();
|
|
if (shapes.length) nextShapeZ = Math.max(...shapes.map(s => s.z_index)) + 1;
|
|
renderNetwork();
|
|
}
|
|
|
|
function populateNodeSelects() {
|
|
const html = nodes.map(n => `<option value="${n.id}">${esc(n.label)} (${n.ip_address || 'no IP'})</option>`).join('');
|
|
document.getElementById('linkSource').innerHTML = html;
|
|
document.getElementById('linkTarget').innerHTML = html;
|
|
}
|
|
|
|
function renderNodeList() {
|
|
const list = document.getElementById('nodeList');
|
|
list.innerHTML = nodes.map(n => `
|
|
<div class="list-group-item bg-dark border-secondary node-list-item py-2 ${selectedNodeId == n.id ? 'active' : ''}" data-node-id="${n.id}" onclick="selectNode(${n.id})">
|
|
<div class="d-flex align-items-center">
|
|
<span class="status-dot status-${n.status}"></span>
|
|
<div>
|
|
<strong class="small">${esc(n.label)}</strong>
|
|
<div class="text-secondary" style="font-size:.7rem;">${n.ip_address || '—'} · ${n.node_type}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderShapeList() {
|
|
const list = document.getElementById('shapeList');
|
|
list.innerHTML = shapes.map(s => `
|
|
<div class="list-group-item bg-dark border-secondary py-2 ${selectedShapeId == s.id ? 'active' : ''}" onclick="selectShape(${s.id})">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<span style="display:inline-block;width:12px;height:12px;border-radius:2px;background:${s.border_color};margin-right:.4rem;"></span>
|
|
<strong class="small">${esc(s.label) || (s.shape_type === 'rectangle' ? 'Box' : 'Ellipse')}</strong>
|
|
</div>
|
|
<small class="text-secondary">${s.shape_type}</small>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function selectNode(id) {
|
|
selectedNodeId = id;
|
|
selectedShapeId = null;
|
|
const n = nodes.find(x => x.id == id);
|
|
if (n) {
|
|
document.getElementById('nodeDetails').innerHTML = `
|
|
<div class="small">
|
|
<div class="d-flex align-items-center mb-1"><span class="status-dot status-${n.status} me-2"></span><strong>${esc(n.label)}</strong></div>
|
|
<div><span class="text-secondary">IP:</span> ${n.ip_address || '—'}</div>
|
|
<div><span class="text-secondary">Type:</span> ${n.node_type}</div>
|
|
<div><span class="text-secondary">Status:</span> ${n.status}</div>
|
|
<div><span class="text-secondary">Group:</span> ${n.group_name}</div>
|
|
<button class="btn btn-outline-danger btn-sm mt-2" onclick="deleteSelectedNode()"><i class="bi bi-trash"></i> Delete</button>
|
|
</div>
|
|
`;
|
|
}
|
|
renderNodeList();
|
|
renderShapeList();
|
|
renderNetwork();
|
|
}
|
|
|
|
function selectShape(id) {
|
|
selectedShapeId = id;
|
|
selectedNodeId = null;
|
|
renderNodeList();
|
|
renderShapeList();
|
|
renderNetwork();
|
|
}
|
|
|
|
async function deleteSelectedNode() {
|
|
if (!selectedNodeId) return;
|
|
if (!confirm('Delete this node and its connections?')) return;
|
|
const id = selectedNodeId;
|
|
selectedNodeId = null;
|
|
await apiFetch(`nodes/${id}`, { method: 'DELETE' });
|
|
loadNetworkData();
|
|
}
|
|
|
|
async function deleteSelectedShape() {
|
|
if (!selectedShapeId) return;
|
|
if (!confirm('Delete this shape?')) return;
|
|
const id = selectedShapeId;
|
|
selectedShapeId = null;
|
|
await apiFetch(`shapes/${id}`, { method: 'DELETE' });
|
|
loadNetworkData();
|
|
}
|
|
|
|
async function saveNode() {
|
|
const data = {
|
|
label: document.getElementById('nodeLabel').value,
|
|
ip_address: document.getElementById('nodeIp').value,
|
|
node_type: document.getElementById('nodeType').value,
|
|
status: document.getElementById('nodeStatus').value,
|
|
group_name: document.getElementById('nodeGroup').value || 'default',
|
|
pos_x: Math.random() * canvas.width * 0.6 + canvas.width * 0.2 - panX,
|
|
pos_y: Math.random() * canvas.height * 0.6 + canvas.height * 0.2 - panY
|
|
};
|
|
if (!data.label) return alert('Label required');
|
|
await apiFetch('nodes', { method: 'POST', body: JSON.stringify(data) });
|
|
bootstrap.Modal.getInstance(document.getElementById('nodeModal')).hide();
|
|
document.getElementById('nodeForm').reset();
|
|
loadNetworkData();
|
|
}
|
|
|
|
async function saveLink() {
|
|
const data = {
|
|
source_id: document.getElementById('linkSource').value,
|
|
target_id: document.getElementById('linkTarget').value,
|
|
link_type: document.getElementById('linkType').value,
|
|
label: document.getElementById('linkLabel').value
|
|
};
|
|
if (data.source_id === data.target_id) return alert('Source and target must differ');
|
|
await apiFetch('links', { method: 'POST', body: JSON.stringify(data) });
|
|
bootstrap.Modal.getInstance(document.getElementById('linkModal')).hide();
|
|
document.getElementById('linkForm').reset();
|
|
loadNetworkData();
|
|
}
|
|
|
|
async function saveShape() {
|
|
const data = {
|
|
label: document.getElementById('shapeLabel').value,
|
|
shape_type: document.getElementById('shapeType').value,
|
|
pos_x: canvas.width / 2 - 100 - panX,
|
|
pos_y: canvas.height / 2 - 75 - panY,
|
|
width: 200,
|
|
height: 150,
|
|
color: document.getElementById('shapeColor').value,
|
|
border_color: document.getElementById('shapeBorderColor').value,
|
|
opacity: parseFloat(document.getElementById('shapeOpacity').value),
|
|
z_index: nextShapeZ++
|
|
};
|
|
await apiFetch('shapes', { method: 'POST', body: JSON.stringify(data) });
|
|
bootstrap.Modal.getInstance(document.getElementById('shapeModal')).hide();
|
|
document.getElementById('shapeForm').reset();
|
|
loadNetworkData();
|
|
}
|
|
|
|
// ==================== CANVAS RENDERING ====================
|
|
const NODE_ICONS = {
|
|
host: ['M7,4 L17,4 L20,9 L20,18 L4,18 L4,9 Z', '#3b82f6'],
|
|
server: ['M6,3 L18,3 L20,6 L20,20 L4,20 L4,6 Z M8,10 L16,10 M8,14 L16,14 M8,17 L12,17', '#8b5cf6'],
|
|
router: ['M12,3 L21,10 L18,20 L6,20 L3,10 Z M12,6 L12,17 M8,10 L16,10', '#f59e0b'],
|
|
firewall: ['M6,3 L18,3 L21,8 L21,16 L18,21 L6,21 L3,16 L3,8 Z M9,10 L15,10 L15,14 L9,14 Z', '#ef4444'],
|
|
switch: ['M4,8 L20,8 L20,16 L4,16 Z M7,11 L7,13 M10,11 L10,13 M13,11 L13,13 M16,11 L16,13', '#06b6d4'],
|
|
cloud: ['M10,4 C6,4 4,7 5,10 C3,11 2,14 4,16 L8,16 C10,18 14,18 16,16 L20,16 C22,14 21,10 19,9 C20,6 17,4 15,5 C14,4 12,4 10,4 Z', '#22c55e'],
|
|
endpoint: ['M8,4 L16,4 L18,10 L18,16 L16,20 L8,20 L6,16 L6,10 Z M10,12 L14,12 M12,10 L12,14', '#ec4899'],
|
|
other: ['M8,6 L16,6 L18,12 L16,18 L8,18 L6,12 Z', '#6b7280']
|
|
};
|
|
|
|
function buildCanvasGraph() {
|
|
canvasNodes = nodes.map(n => {
|
|
const icon = NODE_ICONS[n.node_type] || NODE_ICONS.other;
|
|
return {
|
|
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: icon[0],
|
|
color: icon[1],
|
|
w: 36,
|
|
h: 36
|
|
};
|
|
});
|
|
|
|
canvasLinks = links.map(l => ({
|
|
source: canvasNodes.find(n => n.id == l.source_id),
|
|
target: canvasNodes.find(n => n.id == l.target_id),
|
|
type: l.link_type,
|
|
label: l.label
|
|
})).filter(l => l.source && l.target);
|
|
|
|
canvasShapes = shapes.map(s => ({
|
|
id: s.id,
|
|
label: s.label,
|
|
type: s.shape_type,
|
|
x: parseFloat(s.pos_x),
|
|
y: parseFloat(s.pos_y),
|
|
w: parseFloat(s.width),
|
|
h: parseFloat(s.height),
|
|
color: s.color,
|
|
borderColor: s.border_color,
|
|
opacity: parseFloat(s.opacity),
|
|
z: parseInt(s.z_index)
|
|
}));
|
|
}
|
|
|
|
function renderNetwork() {
|
|
buildCanvasGraph();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.save();
|
|
ctx.translate(panX, panY);
|
|
|
|
// Draw shapes (lowest layer)
|
|
canvasShapes.sort((a, b) => a.z - b.z).forEach(drawShape);
|
|
|
|
// Draw links
|
|
canvasLinks.forEach(l => {
|
|
ctx.beginPath();
|
|
ctx.moveTo(l.source.x, l.source.y);
|
|
ctx.lineTo(l.target.x, l.target.y);
|
|
|
|
const colors = { direct: '#334155', vpn: '#eab308', wireless: '#22c55e', monitored: '#3b82f6' };
|
|
ctx.strokeStyle = colors[l.type] || '#334155';
|
|
ctx.lineWidth = l.type === 'vpn' ? 2.5 : 1.5;
|
|
|
|
if (l.type === 'vpn' || l.type === 'wireless') ctx.setLineDash([6, 4]);
|
|
else ctx.setLineDash([]);
|
|
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
if (l.label) {
|
|
const mx = (l.source.x + l.target.x) / 2;
|
|
const my = (l.source.y + l.target.y) / 2;
|
|
ctx.fillStyle = '#94a3b8';
|
|
ctx.font = '10px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(l.label, mx, my - 8);
|
|
}
|
|
});
|
|
|
|
// Draw nodes
|
|
canvasNodes.forEach(drawCanvasNode);
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawShape(s) {
|
|
ctx.save();
|
|
const isSelected = selectedShapeId == s.id;
|
|
|
|
ctx.globalAlpha = s.opacity;
|
|
|
|
if (s.type === 'ellipse') {
|
|
ctx.beginPath();
|
|
ctx.ellipse(s.x + s.w / 2, s.y + s.h / 2, s.w / 2, s.h / 2, 0, 0, Math.PI * 2);
|
|
ctx.fillStyle = s.color;
|
|
ctx.fill();
|
|
ctx.globalAlpha = 1;
|
|
ctx.strokeStyle = isSelected ? '#ffffff' : s.borderColor;
|
|
ctx.lineWidth = isSelected ? 2.5 : 1.5;
|
|
ctx.setLineDash([5, 3]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
} else {
|
|
ctx.beginPath();
|
|
ctx.roundRect(s.x, s.y, s.w, s.h, 8);
|
|
ctx.fillStyle = s.color;
|
|
ctx.fill();
|
|
ctx.globalAlpha = 1;
|
|
ctx.strokeStyle = isSelected ? '#ffffff' : s.borderColor;
|
|
ctx.lineWidth = isSelected ? 2.5 : 1.5;
|
|
ctx.setLineDash([5, 3]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
// Resize handles
|
|
if (isSelected) {
|
|
const handles = getShapeHandles(s);
|
|
handles.forEach(h => {
|
|
ctx.beginPath();
|
|
ctx.arc(h.x, h.y, 5, 0, Math.PI * 2);
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#3b82f6';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
});
|
|
}
|
|
|
|
// Label
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillStyle = '#94a3b8';
|
|
ctx.font = '12px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(s.label, s.x + s.w / 2, s.y - 8);
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function drawCanvasNode(n) {
|
|
const isSelected = selectedNodeId == n.id;
|
|
const s = 1.8;
|
|
|
|
ctx.save();
|
|
if (isSelected) {
|
|
ctx.shadowColor = n.color;
|
|
ctx.shadowBlur = 18;
|
|
}
|
|
|
|
// Fill background
|
|
ctx.translate(n.x, n.y);
|
|
ctx.scale(1, 1);
|
|
ctx.beginPath();
|
|
|
|
// Icon background circle/box
|
|
if (n.type === 'switch') {
|
|
ctx.rect(-20, -20, 40, 40);
|
|
} else {
|
|
ctx.arc(0, 0, 22, 0, Math.PI * 2);
|
|
}
|
|
ctx.fillStyle = n.color + '18';
|
|
ctx.fill();
|
|
|
|
// Border
|
|
ctx.strokeStyle = isSelected ? '#ffffff' : n.color;
|
|
ctx.lineWidth = isSelected ? 2.5 : 1.5;
|
|
ctx.stroke();
|
|
ctx.shadowBlur = 0;
|
|
|
|
// Icon path
|
|
const scalePath = (path, cx, cy, sc) => {
|
|
return path.replace(/([\d.]+)/g, (m) => {
|
|
const v = parseFloat(m);
|
|
return ((v - 12) * sc + cx).toFixed(1);
|
|
});
|
|
};
|
|
const scaled = scalePath(n.iconPath, 0, 0, 0.85);
|
|
const path = new Path2D(scaled);
|
|
ctx.fillStyle = n.color;
|
|
ctx.fill(path);
|
|
|
|
// Status dot
|
|
ctx.beginPath();
|
|
ctx.arc(17, -17, 5, 0, Math.PI * 2);
|
|
const statusColors = { online: '#22c55e', offline: '#6b7280', unknown: '#9ca3af', compromised: '#ef4444', monitoring: '#eab308' };
|
|
ctx.fillStyle = statusColors[n.status] || '#9ca3af';
|
|
ctx.fill();
|
|
if (n.status === 'compromised') {
|
|
ctx.strokeStyle = '#ef4444';
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.translate(-n.x, -n.y);
|
|
|
|
// Label
|
|
ctx.fillStyle = '#e2e8f0';
|
|
ctx.font = isSelected ? 'bold 11px sans-serif' : '10px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(n.label, n.x, n.y + 34);
|
|
if (n.ip) {
|
|
ctx.fillStyle = '#64748b';
|
|
ctx.font = '9px sans-serif';
|
|
ctx.fillText(n.ip, n.x, n.y + 46);
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
function getShapeHandles(s) {
|
|
return [
|
|
{ x: s.x, y: s.y, cx: 0, cy: 0 },
|
|
{ x: s.x + s.w, y: s.y, cx: 1, cy: 0 },
|
|
{ x: s.x + s.w, y: s.y + s.h, cx: 1, cy: 1 },
|
|
{ x: s.x, y: s.y + s.h, cx: 0, cy: 1 }
|
|
];
|
|
}
|
|
|
|
// ==================== CANVAS EVENTS ====================
|
|
function getCanvasNodeRaw(mx, my) {
|
|
return canvasNodes.find(n => {
|
|
const dx = mx - n.x, dy = my - n.y;
|
|
return Math.sqrt(dx * dx + dy * dy) < 28;
|
|
});
|
|
}
|
|
|
|
function getShapeAt(mx, my) {
|
|
for (let i = canvasShapes.length - 1; i >= 0; i--) {
|
|
const s = canvasShapes[i];
|
|
if (mx >= s.x && mx <= s.x + s.w && my >= s.y && my <= s.y + s.h) return s;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function getShapeResizeHandle(mx, my) {
|
|
for (const s of canvasShapes) {
|
|
if (selectedShapeId != s.id) continue;
|
|
const handles = getShapeHandles(s);
|
|
for (const h of handles) {
|
|
const dx = mx - h.x, dy = my - h.y;
|
|
if (Math.sqrt(dx * dx + dy * dy) < 8) return { shape: s, handle: h };
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function onMouseDown(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left - panX;
|
|
const my = e.clientY - rect.top - panY;
|
|
|
|
// Check shape resize handle first (only for selected shape)
|
|
const resize = getShapeResizeHandle(mx, my);
|
|
if (resize) {
|
|
dragType = 'resize';
|
|
dragTarget = resize.shape;
|
|
dragHandle = resize.handle;
|
|
dragOrig = { x: resize.shape.x, y: resize.shape.y, w: resize.shape.w, h: resize.shape.h };
|
|
dragOffX = mx;
|
|
dragOffY = my;
|
|
return;
|
|
}
|
|
|
|
// Check node
|
|
const node = getCanvasNodeRaw(mx, my);
|
|
if (node) {
|
|
dragType = 'node';
|
|
dragTarget = node;
|
|
dragOffX = mx - node.x;
|
|
dragOffY = my - node.y;
|
|
selectNode(node.id);
|
|
return;
|
|
}
|
|
|
|
// Check shape body
|
|
const shape = getShapeAt(mx, my);
|
|
if (shape) {
|
|
selectedNodeId = null;
|
|
selectedShapeId = shape.id;
|
|
dragType = 'shape';
|
|
dragTarget = shape;
|
|
dragOffX = mx - shape.x;
|
|
dragOffY = my - shape.y;
|
|
renderShapeList();
|
|
renderNetwork();
|
|
return;
|
|
}
|
|
|
|
// Pan
|
|
selectedNodeId = null;
|
|
selectedShapeId = null;
|
|
renderNodeList();
|
|
renderShapeList();
|
|
isPanning = true;
|
|
panStartX = e.clientX - panX;
|
|
panStartY = e.clientY - panY;
|
|
canvas.style.cursor = 'grabbing';
|
|
}
|
|
|
|
function onMouseMove(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
|
|
if (dragType === 'node' && dragTarget) {
|
|
dragTarget.x = e.clientX - rect.left - panX - dragOffX;
|
|
dragTarget.y = e.clientY - rect.top - panY - dragOffY;
|
|
renderNetwork();
|
|
} else 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 && dragHandle) {
|
|
const dx = e.clientX - rect.left - panX - dragOffX;
|
|
const dy = e.clientY - rect.top - panY - dragOffY;
|
|
const h = dragHandle;
|
|
if (h.cx === 0) { dragTarget.x = dragOrig.x + dx; dragTarget.w = dragOrig.w - dx; }
|
|
else { dragTarget.w = dragOrig.w + dx; }
|
|
if (h.cy === 0) { dragTarget.y = dragOrig.y + dy; dragTarget.h = dragOrig.h - dy; }
|
|
else { dragTarget.h = dragOrig.h + dy; }
|
|
if (dragTarget.w < 50) dragTarget.w = 50;
|
|
if (dragTarget.h < 50) dragTarget.h = 50;
|
|
renderNetwork();
|
|
} else if (isPanning) {
|
|
panX = e.clientX - panStartX;
|
|
panY = e.clientY - panStartY;
|
|
renderNetwork();
|
|
} else {
|
|
const mx = e.clientX - rect.left - panX;
|
|
const my = e.clientY - rect.top - panY;
|
|
const node = getCanvasNodeRaw(mx, my);
|
|
const shape = getShapeAt(mx, my);
|
|
const resize = getShapeResizeHandle(mx, my);
|
|
if (resize) canvas.style.cursor = 'nwse-resize';
|
|
else if (node || shape) canvas.style.cursor = 'pointer';
|
|
else canvas.style.cursor = 'grab';
|
|
}
|
|
}
|
|
|
|
function onMouseUp(e) {
|
|
if (dragTarget) {
|
|
if (dragType === 'node') {
|
|
apiFetch(`nodes/${dragTarget.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ pos_x: dragTarget.x, pos_y: dragTarget.y })
|
|
});
|
|
} else if (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
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
dragType = null;
|
|
dragTarget = null;
|
|
dragHandle = null;
|
|
dragOrig = null;
|
|
isPanning = false;
|
|
canvas.style.cursor = 'grab';
|
|
}
|
|
|
|
function onDblClick(e) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const mx = e.clientX - rect.left - panX;
|
|
const my = e.clientY - rect.top - panY;
|
|
|
|
const node = getCanvasNodeRaw(mx, my);
|
|
if (node) {
|
|
selectNode(node.id);
|
|
return;
|
|
}
|
|
|
|
const shape = getShapeAt(mx, my);
|
|
if (shape) {
|
|
selectedNodeId = null;
|
|
selectedShapeId = shape.id;
|
|
renderShapeList();
|
|
renderNetwork();
|
|
}
|
|
}
|
|
|
|
function onContextMenu(e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
function esc(s) {
|
|
if (!s) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = s;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// roundRect polyfill for older browsers
|
|
if (!CanvasRenderingContext2D.prototype.roundRect) {
|
|
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
|
|
if (r > w / 2) r = w / 2;
|
|
if (r > h / 2) r = h / 2;
|
|
this.moveTo(x + r, y);
|
|
this.lineTo(x + w - r, y);
|
|
this.quadraticCurveTo(x + w, y, x + w, y + r);
|
|
this.lineTo(x + w, y + h - r);
|
|
this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
|
|
this.lineTo(x + r, y + h);
|
|
this.quadraticCurveTo(x, y + h, x, y + h - r);
|
|
this.lineTo(x, y + r);
|
|
this.quadraticCurveTo(x, y, x + r, y);
|
|
return this;
|
|
};
|
|
} |