✨ feat(mindmap): erweitere die Funktionalität zur Handhabung von Unterthemen und verbessere die Benutzerinteraktion durch neue Navigations- und Layout-Elemente in update_mindmap.js

static/js/update_mindmap.js

@@ -168,7 +168,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 id: node.id,
                 label: node.label,
                 category: node.category,
-                description: node.description
+                description: node.description,
+                hasChildren: node.hasChildren,
+                expanded: node.expanded
             }
         })),
         // Kanten
@@ -264,9 +266,11 @@ document.addEventListener('DOMContentLoaded', function() {
     document.dispatchEvent(new Event('mindmap-loaded'));
     console.log('mindmap-loaded Event ausgelöst');
 
-    // Event-Listener für Knoten-Klicks hinzufügen
+    // Event-Listener für Knoten-Klicks
     cy.on('tap', 'node', async function(evt) {
         const node = evt.target;
+        console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
+        
         if (node.data('hasChildren') && !node.data('expanded')) {
             await loadSubthemes(node);
         }
@@ -298,7 +302,9 @@ function updateMindmap() {
         label: node.label,
         category: node.category,
         description: node.description,
-        color: categoryColors[node.category] || '#60a5fa'
+        color: categoryColors[node.category] || '#60a5fa',
+        hasChildren: node.hasChildren,
+        expanded: node.expanded
       }
     });
   });
@@ -664,47 +670,95 @@ function createFlashContainer() {
 // Funktion zum Laden der Subthemen
 async function loadSubthemes(node) {
     try {
-        // Simuliere Datenbankabfrage (später durch echte API ersetzen)
+        console.log('Loading subthemes for node:', node.id());
+        
+        // Simuliere Datenbankabfrage
         const subthemes = subthemesDatabase[node.id()];
         
-        if (!subthemes) return;
+        if (!subthemes) {
+            console.log('No subthemes found for node:', node.id());
+            return;
+        }
 
         // Animation starten
         showFlash('Lade Subthemen...', 'info');
 
-        // Neue Knoten hinzufügen
+        // Neue Seite erstellen
-        subthemes.forEach(subtheme => {
+        const mindmapContainer = document.querySelector('.mindmap-container');
-            cy.add({
+        const newPage = document.createElement('div');
-                group: 'nodes',
+        newPage.className = 'mindmap-page';
-                data: {
+        newPage.style.display = 'none';
-                    ...subtheme,
-                    expanded: false
-                }
-            });
         
-            // Kante zum Elternknoten hinzufügen
+        // Kopfzeile erstellen
-            cy.add({
+        const header = document.createElement('div');
-                group: 'edges',
+        header.className = 'mindmap-header';
-                data: {
+        header.innerHTML = `
-                    id: `${node.id()}_${subtheme.id}`,
+            <button class="back-button" onclick="goBack()">
-                    source: node.id(),
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    target: subtheme.id
+                    <path d="M19 12H5M12 19l-7-7 7-7"/>
-                }
+                </svg>
-            });
+            </button>
-        });
+            <h2 class="mindmap-title">${node.data('label')}</h2>
+        `;
         
-        // Node als expandiert markieren
+        // Container für die neue Mindmap
-        node.data('expanded', true);
+        const newContainer = document.createElement('div');
+        newContainer.id = `cy-${node.id()}`;
+        newContainer.className = 'mindmap-view';
         
-        // Layout neu berechnen mit Animation
+        // Elemente zur Seite hinzufügen
-        cy.layout({
+        newPage.appendChild(header);
+        newPage.appendChild(newContainer);
+        mindmapContainer.appendChild(newPage);
+        
+        // Neue Cytoscape-Instanz erstellen
+        const newCy = cytoscape({
+            container: newContainer,
+            elements: [],
+            style: cy.style(),
+            layout: {
                 name: 'cose',
                 animate: true,
                 animationDuration: 500,
                 refresh: 20,
                 fit: true,
-            padding: 30
+                padding: 30,
-        }).run();
+                nodeRepulsion: 4500,
+                idealEdgeLength: 50,
+                edgeElasticity: 0.45
+            }
+        });
+        
+        // Neue Knoten hinzufügen
+        subthemes.forEach(subtheme => {
+            newCy.add({
+                group: 'nodes',
+                data: {
+                    id: subtheme.id,
+                    label: subtheme.label,
+                    category: subtheme.category,
+                    description: subtheme.description,
+                    hasChildren: subtheme.hasChildren,
+                    expanded: false,
+                    color: categoryColors[subtheme.category] || '#60a5fa'
+                }
+            });
+        });
+        
+        // Event-Listener für die neue Mindmap
+        newCy.on('tap', 'node', async function(evt) {
+            const clickedNode = evt.target;
+            if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) {
+                await loadSubthemes(clickedNode);
+            }
+        });
+        
+        // Alte Seite ausblenden und neue anzeigen
+        cy.container().style.display = 'none';
+        newPage.style.display = 'block';
+        
+        // Layout ausführen
+        newCy.layout().run();
         
         // Erfolgsmeldung anzeigen
         showFlash('Subthemen erfolgreich geladen', 'success');
@@ -714,3 +768,62 @@ async function loadSubthemes(node) {
         showFlash('Fehler beim Laden der Subthemen', 'error');
     }
 }
+
+// Funktion zum Zurücknavigieren
+function goBack() {
+    const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
+    if (currentPage) {
+        currentPage.style.display = 'none';
+        cy.container().style.display = 'block';
+    }
+}
+
+// CSS-Styles für die neue Seite
+const style = document.createElement('style');
+style.textContent = `
+    .mindmap-page {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: var(--bg-color, #1a1a1a);
+        z-index: 1000;
+    }
+    
+    .mindmap-header {
+        display: flex;
+        align-items: center;
+        padding: 1rem;
+        background: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    .back-button {
+        background: none;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+        padding: 0.5rem;
+        margin-right: 1rem;
+        border-radius: 50%;
+        transition: background-color 0.3s;
+    }
+    
+    .back-button:hover {
+        background: rgba(255, 255, 255, 0.1);
+    }
+    
+    .mindmap-title {
+        color: #fff;
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0;
+    }
+    
+    .mindmap-view {
+        width: 100%;
+        height: calc(100% - 4rem);
+    }
+`;
+document.head.appendChild(style);