Lade Mindmap...
+
+
+
Knotendetails
@@ -281,6 +497,23 @@ document.addEventListener('DOMContentLoaded', function() {
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);
@@ -299,6 +532,56 @@ document.addEventListener('DOMContentLoaded', function() {
// 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);
@@ -318,6 +601,96 @@ document.addEventListener('DOMContentLoaded', function() {
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);
@@ -335,6 +708,36 @@ document.addEventListener('DOMContentLoaded', 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 = `
+
Kategorie: ${data.category || 'Nicht kategorisiert'}
+
Beschreibung: ${data.description || 'Keine Beschreibung verfügbar'}
+ `;
+
+ if (data.hasChildren) {
+ contentHTML += `
Hat Unterknoten
`;
+ }
+
+ infoContent.innerHTML = contentHTML;
+ infoPanel.classList.add('visible');
+ }
+
+ function hideNodeInfo() {
+ const infoPanel = document.getElementById('infoPanel');
+ infoPanel.classList.remove('visible');
+ }
});
{% endblock %}
\ No newline at end of file