+47
-47
@@ -30,7 +30,6 @@ let editingNodeId = null;
|
|||||||
let editingShapeId = null;
|
let editingShapeId = null;
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
// Check auth first
|
|
||||||
checkSession().then(() => {
|
checkSession().then(() => {
|
||||||
canvas = document.getElementById('networkCanvas');
|
canvas = document.getElementById('networkCanvas');
|
||||||
ctx = canvas.getContext('2d');
|
ctx = canvas.getContext('2d');
|
||||||
@@ -50,59 +49,60 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
document.getElementById('opacityVal').textContent = parseFloat(e.target.value).toFixed(2);
|
document.getElementById('opacityVal').textContent = parseFloat(e.target.value).toFixed(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
canvas.addEventListener('mousedown', onMouseDown);
|
canvas.addEventListener('mousedown', onMouseDown);
|
||||||
canvas.addEventListener('mousemove', onMouseMove);
|
canvas.addEventListener('mousemove', onMouseMove);
|
||||||
canvas.addEventListener('mouseup', onMouseUp);
|
canvas.addEventListener('mouseup', onMouseUp);
|
||||||
canvas.addEventListener('dblclick', onDblClick);
|
canvas.addEventListener('dblclick', onDblClick);
|
||||||
canvas.addEventListener('contextmenu', (e) => e.preventDefault());
|
canvas.addEventListener('contextmenu', (e) => e.preventDefault());
|
||||||
window.addEventListener('resize', () => { resizeCanvas(); renderNetwork(); });
|
window.addEventListener('resize', () => { resizeCanvas(); renderNetwork(); });
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
|
if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
|
||||||
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
||||||
if (selectedNodeId) copyNode(selectedNodeId);
|
if (selectedNodeId) copyNode(selectedNodeId);
|
||||||
else if (selectedShapeId) copyShape(selectedShapeId);
|
else if (selectedShapeId) copyShape(selectedShapeId);
|
||||||
|
}
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
return;
|
if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
|
||||||
}
|
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
|
if (copyBuffer) pasteItem();
|
||||||
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
}
|
||||||
if (copyBuffer) pasteItem();
|
return;
|
||||||
}
|
}
|
||||||
return;
|
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
||||||
}
|
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
|
e.preventDefault();
|
||||||
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
selectedNodeIds = canvasNodes.map(n => n.id);
|
||||||
e.preventDefault();
|
selectedNodeId = selectedNodeIds.length > 0 ? selectedNodeIds[0] : null;
|
||||||
selectedNodeIds = canvasNodes.map(n => n.id);
|
selectedShapeId = null;
|
||||||
selectedNodeId = selectedNodeIds.length > 0 ? selectedNodeIds[0] : null;
|
renderNodeList(); renderShapeList(); renderNetwork();
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (e.key === 'Delete') {
|
||||||
|
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
||||||
|
if (selectedNodeIds.length > 0) deleteSelectedNodes();
|
||||||
|
else if (selectedShapeId) deleteSelectedShape(selectedShapeId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
selectedNodeId = null;
|
||||||
selectedShapeId = null;
|
selectedShapeId = null;
|
||||||
renderNodeList(); renderShapeList(); renderNetwork();
|
renderNetwork();
|
||||||
|
renderNodeList();
|
||||||
|
renderShapeList();
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (e.key === 'Delete') {
|
|
||||||
if (!document.activeElement || document.activeElement.tagName !== 'INPUT') {
|
|
||||||
if (selectedNodeIds.length > 0) deleteSelectedNodes();
|
|
||||||
else if (selectedShapeId) deleteSelectedShape(selectedShapeId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (e.key === 'Escape') {
|
|
||||||
selectedNodeId = null;
|
|
||||||
selectedShapeId = null;
|
|
||||||
renderNetwork();
|
|
||||||
renderNodeList();
|
|
||||||
renderShapeList();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
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');
|
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() {
|
function resizeCanvas() {
|
||||||
|
|||||||
Reference in New Issue
Block a user