"Update mindmap template with Convention-Format: templates/templates/mindmap.html"
This commit is contained in:
@@ -492,253 +492,7 @@
|
|||||||
|
|
||||||
<!-- Initialisierung -->
|
<!-- Initialisierung -->
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
// DOM-Ready-Event - die Initialisierung erfolgt durch den startMindmapApp()-Aufruf
|
||||||
console.log('DOMContentLoaded Event ausgelöst');
|
// in der update_mindmap.js
|
||||||
|
|
||||||
const cyContainer = document.getElementById('cy');
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
const statusMessage = document.getElementById('statusMessage');
|
|
||||||
const crudPanel = document.getElementById('crudPanel');
|
|
||||||
const editModeIndicator = document.getElementById('editModeIndicator');
|
|
||||||
|
|
||||||
// CRUD Buttons
|
|
||||||
const createNodeBtn = document.getElementById('createNode');
|
|
||||||
const createEdgeBtn = document.getElementById('createEdge');
|
|
||||||
const editNodeBtn = document.getElementById('editNode');
|
|
||||||
const deleteElementBtn = document.getElementById('deleteElement');
|
|
||||||
const saveMindmapBtn = document.getElementById('saveMindmap');
|
|
||||||
|
|
||||||
// Header Action Buttons
|
|
||||||
const toggleEditModeBtn = document.getElementById('toggleEditMode');
|
|
||||||
const saveChangesBtn = document.getElementById('saveChanges');
|
|
||||||
const cancelEditBtn = document.getElementById('cancelEdit');
|
|
||||||
|
|
||||||
let isEditMode = false;
|
|
||||||
let selectedElement = null;
|
|
||||||
|
|
||||||
if (cyContainer) {
|
|
||||||
console.log('Container gefunden:', cyContainer);
|
|
||||||
|
|
||||||
// Loader und Statusmeldung anzeigen
|
|
||||||
loader.style.display = 'block';
|
|
||||||
statusMessage.textContent = 'Lade Mindmap...';
|
|
||||||
statusMessage.style.display = 'block';
|
|
||||||
|
|
||||||
// Prüfen, ob Cytoscape vorhanden ist
|
|
||||||
if (typeof cytoscape !== 'undefined') {
|
|
||||||
console.log('Cytoscape ist verfügbar');
|
|
||||||
|
|
||||||
// Initialisieren der Mindmap
|
|
||||||
initializeMindmap().then(() => {
|
|
||||||
// Erfolg: Loader und Statusmeldung ausblenden
|
|
||||||
loader.style.display = 'none';
|
|
||||||
statusMessage.style.display = 'none';
|
|
||||||
|
|
||||||
// Event-Listener für Knotenauswahl
|
|
||||||
window.cy.on('select', 'node', function(event) {
|
|
||||||
selectedElement = event.target;
|
|
||||||
editNodeBtn.disabled = false;
|
|
||||||
deleteElementBtn.disabled = false;
|
|
||||||
|
|
||||||
// Knotendetails im Info-Panel anzeigen
|
|
||||||
showNodeInfo(selectedElement);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.cy.on('select', 'edge', function(event) {
|
|
||||||
selectedElement = event.target;
|
|
||||||
editNodeBtn.disabled = true;
|
|
||||||
deleteElementBtn.disabled = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
window.cy.on('unselect', function() {
|
|
||||||
selectedElement = null;
|
|
||||||
editNodeBtn.disabled = true;
|
|
||||||
deleteElementBtn.disabled = true;
|
|
||||||
|
|
||||||
// Info-Panel ausblenden
|
|
||||||
hideNodeInfo();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Rechtsklick-Menü
|
|
||||||
window.cy.on('cxttap', 'node', function(event) {
|
|
||||||
// Kontextmenü für Knoten anzeigen
|
|
||||||
if (isEditMode) {
|
|
||||||
const node = event.target;
|
|
||||||
const position = event.renderedPosition;
|
|
||||||
showNodeContextMenu(node, {
|
|
||||||
x: event.originalEvent.clientX,
|
|
||||||
y: event.originalEvent.clientY
|
|
||||||
});
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.cy.on('cxttap', function(event) {
|
|
||||||
// Kontextmenü zum Hinzufügen eines Knotens
|
|
||||||
if (isEditMode && event.target === window.cy) {
|
|
||||||
showAddNodeMenu({
|
|
||||||
x: event.originalEvent.clientX,
|
|
||||||
y: event.originalEvent.clientY
|
|
||||||
});
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}).catch(error => {
|
|
||||||
// Fehler: Fehlermeldung anzeigen
|
|
||||||
console.error('Mindmap-Initialisierung fehlgeschlagen', error);
|
|
||||||
loader.style.display = 'none';
|
|
||||||
statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
|
|
||||||
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
||||||
statusMessage.style.display = 'block';
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('Cytoscape ist nicht verfügbar');
|
|
||||||
loader.style.display = 'none';
|
|
||||||
statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
|
|
||||||
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
||||||
statusMessage.style.display = 'block';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error('Container #cy nicht gefunden');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bearbeitungsmodus umschalten
|
|
||||||
toggleEditModeBtn.addEventListener('click', function() {
|
|
||||||
isEditMode = !isEditMode;
|
|
||||||
|
|
||||||
if (isEditMode) {
|
|
||||||
// Bearbeitungsmodus aktivieren
|
|
||||||
crudPanel.style.display = 'flex';
|
|
||||||
editModeIndicator.classList.add('active');
|
|
||||||
toggleEditModeBtn.style.display = 'none';
|
|
||||||
saveChangesBtn.style.display = 'inline-flex';
|
|
||||||
cancelEditBtn.style.display = 'inline-flex';
|
|
||||||
window.cy.container().classList.add('editing-mode');
|
|
||||||
|
|
||||||
// Aktiviere Knotenbewegung (dragging)
|
|
||||||
window.cy.nodes().unlock();
|
|
||||||
} else {
|
|
||||||
// Bearbeitungsmodus deaktivieren
|
|
||||||
crudPanel.style.display = 'none';
|
|
||||||
editModeIndicator.classList.remove('active');
|
|
||||||
toggleEditModeBtn.style.display = 'inline-flex';
|
|
||||||
saveChangesBtn.style.display = 'none';
|
|
||||||
cancelEditBtn.style.display = 'none';
|
|
||||||
window.cy.container().classList.remove('editing-mode');
|
|
||||||
|
|
||||||
// Deaktiviere Knotenbewegung
|
|
||||||
window.cy.nodes().lock();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Änderungen speichern
|
|
||||||
saveChangesBtn.addEventListener('click', function() {
|
|
||||||
saveMindmapChanges(window.cy);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Bearbeitungsmodus abbrechen
|
|
||||||
cancelEditBtn.addEventListener('click', function() {
|
|
||||||
if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
|
|
||||||
isEditMode = false;
|
|
||||||
crudPanel.style.display = 'none';
|
|
||||||
editModeIndicator.classList.remove('active');
|
|
||||||
toggleEditModeBtn.style.display = 'inline-flex';
|
|
||||||
saveChangesBtn.style.display = 'none';
|
|
||||||
cancelEditBtn.style.display = 'none';
|
|
||||||
window.cy.container().classList.remove('editing-mode');
|
|
||||||
|
|
||||||
// Neuinitialisierung der Mindmap
|
|
||||||
initializeMindmap().then(() => {
|
|
||||||
loader.style.display = 'none';
|
|
||||||
statusMessage.style.display = 'none';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// CRUD-Funktionen
|
|
||||||
createNodeBtn.addEventListener('click', function() {
|
|
||||||
if (isEditMode) {
|
|
||||||
addNewNode(window.cy);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
createEdgeBtn.addEventListener('click', function() {
|
|
||||||
if (isEditMode) {
|
|
||||||
enableEdgeCreationMode(window.cy);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
editNodeBtn.addEventListener('click', function() {
|
|
||||||
if (isEditMode && selectedElement && selectedElement.isNode()) {
|
|
||||||
editNodeProperties(selectedElement);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
deleteElementBtn.addEventListener('click', function() {
|
|
||||||
if (isEditMode && selectedElement) {
|
|
||||||
if (selectedElement.isNode()) {
|
|
||||||
deleteNode(selectedElement);
|
|
||||||
} else if (selectedElement.isEdge()) {
|
|
||||||
if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
|
|
||||||
selectedElement.remove();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
saveMindmapBtn.addEventListener('click', function() {
|
|
||||||
if (isEditMode) {
|
|
||||||
saveMindmapChanges(window.cy);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Zoom-Funktionen
|
|
||||||
document.getElementById('zoomIn').addEventListener('click', function() {
|
|
||||||
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('zoomOut').addEventListener('click', function() {
|
|
||||||
if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('resetView').addEventListener('click', function() {
|
|
||||||
if (window.cy) window.cy.fit();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('toggleLegend').addEventListener('click', function() {
|
|
||||||
const legend = document.getElementById('categoryLegend');
|
|
||||||
legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Funktionen für Knoteninfo-Panel
|
|
||||||
function showNodeInfo(node) {
|
|
||||||
if (!node || !node.isNode()) return;
|
|
||||||
|
|
||||||
const infoPanel = document.getElementById('infoPanel');
|
|
||||||
const infoTitle = infoPanel.querySelector('.info-title');
|
|
||||||
const infoContent = infoPanel.querySelector('.info-content');
|
|
||||||
|
|
||||||
const data = node.data();
|
|
||||||
|
|
||||||
infoTitle.textContent = data.label || 'Knotendetails';
|
|
||||||
|
|
||||||
let contentHTML = `
|
|
||||||
<p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
|
|
||||||
<p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (data.hasChildren) {
|
|
||||||
contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
infoContent.innerHTML = contentHTML;
|
|
||||||
infoPanel.classList.add('visible');
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideNodeInfo() {
|
|
||||||
const infoPanel = document.getElementById('infoPanel');
|
|
||||||
infoPanel.classList.remove('visible');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user