✨ feat: Erweiterung der Mindmap-Funktionalität durch Hinzufügen von Hover-Events für Knoten und Verbesserung der Zoom-Steuerung; Info-Panel für Knotendetails implementiert.

static/js/update_mindmap.js

@@ -246,7 +246,11 @@ async function initializeMindmap() {
                     style: mindmapStyles.edge.base
                 }
             ],
-            layout: mindmapStyles.layout.base
+            layout: mindmapStyles.layout.base,
+            // Mausrad-Zooming deaktivieren
+            wheelSensitivity: 0,
+            minZoom: 0.2,
+            maxZoom: 2.5
         });
 
         // Füge neuronale Eigenschaften zu allen Knoten hinzu
@@ -282,13 +286,23 @@ async function initializeMindmap() {
         // 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'));
+            console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren') || node.data('has_children'), 'expanded:', node.data('expanded'));
             
-            if (node.data('hasChildren') && !node.data('expanded')) {
+            if ((node.data('hasChildren') || node.data('has_children')) && !node.data('expanded')) {
                 await loadSubthemes(node);
             }
         });
 
+        // Event-Listener für Hover über Knoten (für Info-Panel)
+        cy.on('mouseover', 'node', function(evt) {
+            const node = evt.target;
+            showNodeInfo(node);
+        });
+
+        cy.on('mouseout', 'node', function() {
+            hideNodeInfo();
+        });
+
         // Layout ausführen
         cy.layout(mindmapStyles.layout.base).run();
         
@@ -298,6 +312,15 @@ async function initializeMindmap() {
         // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
         updateMindmap();
         
+        // Setze anfänglichen Zoom auf eine kleinere Stufe, damit mehr sichtbar ist
+        setTimeout(() => {
+            cy.zoom({
+                level: 0.7,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
+            });
+            cy.center();
+        }, 300);
+        
         return true;
     } catch (error) {
         console.error('Fehler bei der Mindmap-Initialisierung:', error);
@@ -459,7 +482,8 @@ function updateMindmap() {
                 label: node.name,
                 category: node.category,
                 description: node.description,
-                hasChildren: node.has_children,
+                has_children: node.has_children,
+                hasChildren: node.has_children, // Doppelte Eigenschaft für Kompatibilität
                 expanded: false,
                 color: node.color_code || mindmapConfig.categories[node.category]?.color || '#60a5fa',
                 icon: node.icon || mindmapConfig.categories[node.category]?.icon || 'fa-solid fa-circle'
@@ -2068,7 +2092,10 @@ async function loadSubthemes(node) {
                 coolingFactor: 0.95,
                 minTemp: 1
             },
-            wheelSensitivity: 0.3
+            // Mausrad-Zooming deaktivieren
+            wheelSensitivity: 0,
+            minZoom: 0.2,
+            maxZoom: 2.5
         });
         
         // Speichere die Instanz
@@ -2135,24 +2162,31 @@ async function loadSubthemes(node) {
         // Zoom-Controls für die Unterkategorien
         document.getElementById(`zoomIn-${node.id()}`)?.addEventListener('click', () => {
             newCy.zoom({
-                level: newCy.zoom() * 1.2,
+                level: newCy.zoom() * 1.3,
                 renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
             });
         });
         
         document.getElementById(`zoomOut-${node.id()}`)?.addEventListener('click', () => {
             newCy.zoom({
-                level: newCy.zoom() / 1.2,
+                level: newCy.zoom() / 1.3,
                 renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
             });
         });
         
         document.getElementById(`resetView-${node.id()}`)?.addEventListener('click', () => {
-            newCy.fit();
+            // Auswahl zurücksetzen
             newCy.nodes().forEach(n => {
                 n.removeStyle();
                 n.connectedEdges().removeStyle();
             });
+            
+            // Zoom auf eine angenehme Stufe setzen und zentrieren
+            newCy.zoom({
+                level: 0.7,
+                renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
+            });
+            newCy.center();
         });
         
         // Hervorhebe den zentralen Knoten
@@ -2170,6 +2204,15 @@ async function loadSubthemes(node) {
         // Wende neuronale Simulationen an
         startNeuralActivitySimulation(newCy);
         
+        // Setze anfänglichen Zoom auf eine kleinere Stufe, damit mehr sichtbar ist
+        setTimeout(() => {
+            newCy.zoom({
+                level: 0.7,
+                renderedPosition: { x: newCy.width() / 2, y: newCy.height() / 2 }
+            });
+            newCy.center();
+        }, 300);
+        
         // Erfolgsbenachrichtigung
         showUINotification('Subthemen erfolgreich geladen', 'success');
         
@@ -2235,4 +2278,88 @@ function goBack() {
 }
 
 // Funktion global verfügbar machen
-window.goBack = goBack; 
+window.goBack = goBack; 
+
+// Verbesserte Zoom-Funktionalität für die Hauptmindmap
+document.addEventListener('DOMContentLoaded', function() {
+    // Warte bis die Mindmap geladen ist
+    document.addEventListener('mindmap-loaded', function() {
+        // Zoom-Buttons für die Hauptmindmap
+        document.getElementById('zoomIn')?.addEventListener('click', function() {
+            if (!window.cy) return;
+            
+            cy.zoom({
+                level: cy.zoom() * 1.3,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
+            });
+        });
+        
+        document.getElementById('zoomOut')?.addEventListener('click', function() {
+            if (!window.cy) return;
+            
+            cy.zoom({
+                level: cy.zoom() / 1.3,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
+            });
+        });
+        
+        document.getElementById('resetView')?.addEventListener('click', function() {
+            if (!window.cy) return;
+            
+            // Auswahl zurücksetzen
+            cy.nodes().forEach(node => {
+                node.removeStyle();
+                node.connectedEdges().removeStyle();
+            });
+            
+            // Zoom auf eine angenehme Stufe setzen und zentrieren
+            cy.zoom({
+                level: 0.7,
+                renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
+            });
+            cy.center();
+        });
+    });
+});
+
+// Funktionen für Knoteninfo-Panel
+function showNodeInfo(node) {
+    if (!node || !node.isNode()) return;
+    
+    const infoPanel = document.getElementById('infoPanel');
+    if (!infoPanel) return;
+    
+    // Stelle sicher, dass das Info-Panel die notwendigen Elemente enthält
+    if (!infoPanel.querySelector('.info-title')) {
+        infoPanel.innerHTML = `
+            <h3 class="info-title"></h3>
+            <div class="info-content"></div>
+        `;
+    }
+    
+    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 || data.has_children) {
+        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');
+    if (infoPanel) {
+        infoPanel.classList.remove('visible');
+    }
+}

templates/mindmap.html

@@ -20,6 +20,46 @@
     background: transparent;
   }
 
+  /* Zoom-Toolbar */
+  .mindmap-toolbar {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    padding: 8px;
+    background: rgba(30, 41, 59, 0.8);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    z-index: 10;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .mindmap-toolbar button {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .mindmap-toolbar button:hover {
+    background: rgba(139, 92, 246, 0.5);
+    transform: translateY(-2px);
+  }
+  
+  .mindmap-toolbar button i {
+    font-size: 16px;
+  }
+
   /* Header-Bereich */
   .mindmap-header {
     position: absolute;
@@ -369,115 +409,40 @@
 
 {% block content %}
 <div class="mindmap-container">
-  <!-- Header -->
+  <div id="cy"></div>
+  
+  <!-- Zoom-Toolbar für Hauptmindmap -->
+  <div class="mindmap-toolbar">
+    <button id="zoomIn" title="Vergrößern">
+      <i class="fas fa-plus"></i>
+    </button>
+    <button id="zoomOut" title="Verkleinern">
+      <i class="fas fa-minus"></i>
+    </button>
+    <button id="resetView" title="Ansicht zurücksetzen">
+      <i class="fas fa-expand"></i>
+    </button>
+  </div>
+  
   <div class="mindmap-header">
-    <h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
+    <h1 class="mindmap-title">Wissenslandschaft</h1>
-    
-    <!-- Aktionsmenü -->
     <div class="mindmap-actions">
-      <button id="toggleEditMode" class="action-button primary">
+      <button class="action-button" id="toggleCategories">
-        <i class="fas fa-edit"></i>
+        <i class="fas fa-tags"></i> Kategorien
-        <span>Bearbeiten</span>
       </button>
-      <button id="saveChanges" class="action-button" style="display: none;">
+      <button class="action-button primary" id="startEdit">
-        <i class="fas fa-save"></i>
+        <i class="fas fa-edit"></i> Bearbeiten
-        <span>Speichern</span>
-      </button>
-      <button id="cancelEdit" class="action-button danger" style="display: none;">
-        <i class="fas fa-times"></i>
-        <span>Abbrechen</span>
       </button>
     </div>
   </div>
 
-  <!-- Ladeanzeige -->
+  <!-- Info-Panel für Knotendetails -->
-  <div id="loader" class="loader"></div>
-  
-  <!-- Status-Meldung -->
-  <div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
-  
-  <!-- Bearbeitungsmodus-Hinweis -->
-  <div id="editModeIndicator" class="edit-mode-indicator">
-    <i class="fas fa-pencil-alt"></i>
-    <span>Bearbeitungsmodus</span>
-  </div>
-
-  <!-- Hauptvisualisierung -->
-  <div id="cy"></div>
-
-  <!-- Kontrollpanel -->
-  <div class="control-panel">
-    <button id="zoomIn" class="control-button">
-      <i class="fas fa-search-plus"></i>
-      <span>Vergrößern</span>
-    </button>
-    <button id="zoomOut" class="control-button">
-      <i class="fas fa-search-minus"></i>
-      <span>Verkleinern</span>
-    </button>
-    <button id="resetView" class="control-button">
-      <i class="fas fa-sync"></i>
-      <span>Zurücksetzen</span>
-    </button>
-    <button id="toggleLegend" class="control-button">
-      <i class="fas fa-layer-group"></i>
-      <span>Legende</span>
-    </button>
-  </div>
-
-  <!-- CRUD Buttons (anfänglich ausgeblendet) -->
-  <div id="crudPanel" class="crud-panel" style="display: none;">
-    <button id="createNode" class="crud-button create">
-      <i class="fas fa-plus-circle"></i>
-      <span>Knoten erstellen</span>
-    </button>
-    <button id="createEdge" class="crud-button create">
-      <i class="fas fa-link"></i>
-      <span>Verbindung</span>
-    </button>
-    <button id="editNode" class="crud-button edit" disabled>
-      <i class="fas fa-edit"></i>
-      <span>Bearbeiten</span>
-    </button>
-    <button id="deleteElement" class="crud-button delete" disabled>
-      <i class="fas fa-trash-alt"></i>
-      <span>Löschen</span>
-    </button>
-    <button id="saveMindmap" class="crud-button save">
-      <i class="fas fa-save"></i>
-      <span>Speichern</span>
-    </button>
-  </div>
-
-  <!-- Info-Panel -->
   <div id="infoPanel" class="info-panel">
     <h3 class="info-title">Knotendetails</h3>
     <div class="info-content"></div>
   </div>
-
+  
-  <!-- Kategorie-Legende -->
+  <div id="categoryLegend" class="category-legend"></div>
-  <div id="categoryLegend" class="category-legend">
-    <div class="category-item">
-      <div class="category-color" style="background-color: #9F7AEA;"></div>
-      <span>Philosophie</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #60A5FA;"></div>
-      <span>Wissenschaft</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #10B981;"></div>
-      <span>Technologie</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #F59E0B;"></div>
-      <span>Künste</span>
-    </div>
-    <div class="category-item">
-      <div class="category-color" style="background-color: #EF4444;"></div>
-      <span>Psychologie</span>
-    </div>
-  </div>
 </div>
 {% endblock %}
 
@@ -691,7 +656,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   });
   
-  // Zoom-Funktionen
+  // Funktionen für Zoom-Buttons und Reset
   document.getElementById('zoomIn').addEventListener('click', function() {
     if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
   });
@@ -703,41 +668,6 @@ document.addEventListener('DOMContentLoaded', function() {
   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>
 {% endblock %}