feat: improve mindmap interaction and enhance performance in JS files

static/js/mindmap-interaction.js

@@ -12,6 +12,9 @@ document.addEventListener('DOMContentLoaded', function() {
   
   // Sofortiges Setup für statische Interaktionen
   setupStaticInteractions();
+
+  // Direkten Event-Listener für Knotenauswahl einrichten
+  setupNodeSelectionListener();
 });
 
 // Richtet grundlegende statische Interaktionen ein
@@ -257,4 +260,147 @@ function setupTouchInteractions(mindmap) {
       window.lastTapTime = now;
     }
   });
+}
+
+// Richtet einen Event-Listener für die Knotenauswahl ein
+function setupNodeSelectionListener() {
+  document.addEventListener('mindmap-node-selected', function(event) {
+    const node = event.detail;
+    if (node) {
+      console.log('Knoten ausgewählt:', node);
+      showNodeDescriptionSidebar(node);
+    }
+  });
+  
+  document.addEventListener('mindmap-node-deselected', function() {
+    console.log('Knoten abgewählt');
+    showDefaultSidebar();
+  });
+}
+
+// Zeigt die Standard-Seitenleiste an
+function showDefaultSidebar() {
+  // Finde die Seitenleistenelemente
+  const aboutMindmapPanel = document.querySelector('[data-sidebar="about-mindmap"]');
+  const categoriesPanel = document.querySelector('[data-sidebar="categories"]');
+  const nodeDescriptionPanel = document.querySelector('[data-sidebar="node-description"]');
+  
+  if (aboutMindmapPanel && categoriesPanel && nodeDescriptionPanel) {
+    // Beschreibungspanel ausblenden
+    nodeDescriptionPanel.style.display = 'none';
+    
+    // Standardpanels einblenden mit Animation
+    aboutMindmapPanel.style.display = 'block';
+    categoriesPanel.style.display = 'block';
+    
+    setTimeout(() => {
+      aboutMindmapPanel.style.opacity = '1';
+      aboutMindmapPanel.style.transform = 'translateY(0)';
+      
+      categoriesPanel.style.opacity = '1';
+      categoriesPanel.style.transform = 'translateY(0)';
+    }, 50);
+  }
+}
+
+// Zeigt die Knotenbeschreibung in der Seitenleiste an
+function showNodeDescriptionSidebar(node) {
+  // Finde die Seitenleistenelemente
+  const aboutMindmapPanel = document.querySelector('[data-sidebar="about-mindmap"]');
+  const categoriesPanel = document.querySelector('[data-sidebar="categories"]');
+  const nodeDescriptionPanel = document.querySelector('[data-sidebar="node-description"]');
+  
+  if (aboutMindmapPanel && categoriesPanel && nodeDescriptionPanel) {
+    // Standardpanels ausblenden
+    aboutMindmapPanel.style.transition = 'all 0.3s ease';
+    categoriesPanel.style.transition = 'all 0.3s ease';
+    
+    aboutMindmapPanel.style.opacity = '0';
+    aboutMindmapPanel.style.transform = 'translateY(10px)';
+    
+    categoriesPanel.style.opacity = '0';
+    categoriesPanel.style.transform = 'translateY(10px)';
+    
+    setTimeout(() => {
+      aboutMindmapPanel.style.display = 'none';
+      categoriesPanel.style.display = 'none';
+      
+      // Beschreibungspanel vorbereiten
+      const titleElement = nodeDescriptionPanel.querySelector('[data-node-title]');
+      const descriptionElement = nodeDescriptionPanel.querySelector('[data-node-description]');
+      
+      if (titleElement && descriptionElement) {
+        titleElement.textContent = node.name || 'Unbenannter Knoten';
+        
+        // Beschreibung setzen oder Standardbeschreibung generieren
+        let description = node.description;
+        if (!description || description.trim() === '') {
+          description = generateNodeDescription(node);
+        }
+        
+        descriptionElement.textContent = description;
+      }
+      
+      // Beschreibungspanel einblenden mit Animation
+      nodeDescriptionPanel.style.display = 'block';
+      nodeDescriptionPanel.style.opacity = '0';
+      nodeDescriptionPanel.style.transform = 'translateY(10px)';
+      
+      setTimeout(() => {
+        nodeDescriptionPanel.style.transition = 'all 0.4s ease';
+        nodeDescriptionPanel.style.opacity = '1';
+        nodeDescriptionPanel.style.transform = 'translateY(0)';
+      }, 50);
+    }, 300);
+  }
+}
+
+// Generiert automatisch eine Beschreibung für einen Knoten ohne Beschreibung
+function generateNodeDescription(node) {
+  const descriptions = {
+    "Wissen": "Der zentrale Knotenpunkt der Mindmap, der alle wissenschaftlichen Disziplinen und Wissensgebiete verbindet. Hier finden sich grundlegende Erkenntnisse und Verbindungen zu spezifischeren Fachgebieten.",
+    
+    "Quantenphysik": "Ein Zweig der Physik, der sich mit dem Verhalten und den Interaktionen von Materie und Energie auf der kleinsten Skala beschäftigt. Quantenmechanische Phänomene wie Superposition und Verschränkung bilden die Grundlage für moderne Technologien wie Quantencomputer und -kommunikation.",
+    
+    "Neurowissenschaften": "Interdisziplinäres Forschungsgebiet, das die Struktur, Funktion und Entwicklung des Nervensystems und des Gehirns untersucht. Die Erkenntnisse beeinflussen unser Verständnis von Bewusstsein, Kognition, Verhalten und neurologischen Erkrankungen.",
+    
+    "Künstliche Intelligenz": "Forschungsgebiet der Informatik, das sich mit der Entwicklung von Systemen befasst, die menschliche Intelligenzformen simulieren können. KI umfasst maschinelles Lernen, neuronale Netze und verschiedene Ansätze zur Problemlösung und Mustererkennung.",
+    
+    "Klimaforschung": "Wissenschaftliche Disziplin, die sich mit der Untersuchung des Erdklimas, seinen Veränderungen und den zugrundeliegenden physikalischen Prozessen beschäftigt. Sie liefert wichtige Erkenntnisse zu Klimawandel, Wettermuster und globalen Umweltveränderungen.",
+    
+    "Genetik": "Wissenschaft der Gene, Vererbung und der Variation von Organismen. Moderne genetische Forschung umfasst Genomik, Gentechnologie und das Verständnis der molekularen Grundlagen des Lebens sowie ihrer Anwendungen in Medizin und Biotechnologie.",
+    
+    "Astrophysik": "Zweig der Astronomie, der die physikalischen Eigenschaften und Prozesse von Himmelskörpern und des Universums untersucht. Sie erforscht Phänomene wie Schwarze Löcher, Galaxien, kosmische Strahlung und die Entstehung und Entwicklung des Universums.",
+    
+    "Philosophie": "Disziplin, die sich mit fundamentalen Fragen des Wissens, der Realität und der Existenz auseinandersetzt. Sie umfasst Bereiche wie Metaphysik, Erkenntnistheorie, Ethik und Logik und bildet die Grundlage für kritisches Denken und wissenschaftliche Methodik.",
+    
+    "Wissenschaft": "Systematische Erforschung der Natur und der materiellen Welt durch Beobachtung, Experimente und die Formulierung überprüfbarer Theorien. Sie umfasst Naturwissenschaften, Sozialwissenschaften und angewandte Wissenschaften.",
+    
+    "Technologie": "Anwendung wissenschaftlicher Erkenntnisse für praktische Zwecke. Sie umfasst die Entwicklung von Werkzeugen, Maschinen, Materialien und Prozessen zur Lösung von Problemen und zur Verbesserung der menschlichen Lebensbedingungen.",
+    
+    "Künste": "Ausdruck menschlicher Kreativität und Imagination in verschiedenen Formen wie Malerei, Musik, Literatur, Theater und Film. Die Künste erforschen ästhetische, emotionale und intellektuelle Dimensionen der menschlichen Erfahrung.",
+    
+    "Biologie": "Wissenschaft des Lebens und der lebenden Organismen. Sie umfasst Bereiche wie Molekularbiologie, Evolutionsbiologie, Ökologie und beschäftigt sich mit der Struktur, Funktion, Entwicklung und Evolution lebender Systeme.",
+    
+    "Mathematik": "Wissenschaft der Muster, Strukturen und Beziehungen. Sie ist die Sprache der Naturwissenschaften und bildet die Grundlage für quantitative Analysen, logisches Denken und Problemlösung in allen wissenschaftlichen Disziplinen.",
+    
+    "Psychologie": "Wissenschaftliche Untersuchung des menschlichen Verhaltens und der mentalen Prozesse. Sie erforscht Bereiche wie Kognition, Emotion, Persönlichkeit, soziale Interaktionen und die Behandlung psychischer Störungen.",
+    
+    "Ethik": "Teilgebiet der Philosophie, das sich mit moralischen Prinzipien, Werten und der Frage nach richtigem und falschem Handeln beschäftigt. Sie bildet die Grundlage für moralische Entscheidungsfindung in allen Lebensbereichen."
+  };
+  
+  // Verwende vordefinierte Beschreibung, wenn verfügbar
+  if (node.name && descriptions[node.name]) {
+    return descriptions[node.name];
+  }
+  
+  // Generische Beschreibung basierend auf dem Knotentyp
+  switch (node.type) {
+    case 'category':
+      return `Dieser Knoten repräsentiert die Kategorie "${node.name}", die verschiedene verwandte Konzepte und Ideen zusammenfasst. Wählen Sie einen der verbundenen Unterthemen, um mehr Details zu erfahren.`;
+    case 'subcategory':
+      return `"${node.name}" ist eine Unterkategorie, die spezifische Aspekte eines größeren Themenbereichs beleuchtet. Die verbundenen Knoten zeigen wichtige Konzepte und Ideen innerhalb dieses Bereichs.`;
+    default:
+      return `Dieser Knoten repräsentiert das Konzept "${node.name}". Erforschen Sie die verbundenen Knoten, um Zusammenhänge und verwandte Ideen zu entdecken.`;
+  }
 } 

static/mindmap.js

@@ -1227,6 +1227,9 @@ class MindMapVisualization {
         .style('filter', 'url(#glass-with-reflection)')
         .attr('stroke-width', 2);
       
+      // Event auslösen: Knoten abgewählt
+      document.dispatchEvent(new CustomEvent('mindmap-node-deselected'));
+      
       // Standardinformationspanels wieder anzeigen
       this.showDefaultSidebar();
       
@@ -1295,6 +1298,11 @@ class MindMapVisualization {
     this.nodeElements
       .classed('selected', n => n === d);
     
+    // Event auslösen: Knoten ausgewählt
+    document.dispatchEvent(new CustomEvent('mindmap-node-selected', { 
+      detail: d 
+    }));
+    
     // Visuelles Feedback für Auswahl
     this.nodeElements
       .filter(n => n === d)
@@ -1338,9 +1346,6 @@ class MindMapVisualization {
     // Knoten zentrieren
     this.centerNodeInView(d);
     
-    // Knotenbeschreibung in der Seitenleiste anzeigen
-    this.showNodeDescriptionSidebar(d);
-    
     // Gedanken laden
     this.loadThoughtsForNode(d);