✨ feat(mindmap): verbessere die Benutzerinteraktion und das visuelle Design der Mindmap. Füge dynamische Knotenbeschreibungen hinzu, aktualisiere die Farbpalette und optimiere die Zoom- und Knoteninteraktionen. Erweitere die Seitenleisten mit neuen Panels und verbessere die Animationen für ein ansprechenderes Nutzererlebnis.

templates/mindmap.html

@@ -7,7 +7,7 @@
   /* Spezifische Stile für die Mindmap-Seite */
   #cy {
     width: 100%;
-    height: 600px;
+    height: 750px;
     background-color: var(--bg-secondary);
     transition: background-color 0.3s ease;
     border-radius: 10px;
@@ -15,18 +15,81 @@
     position: relative;
   }
   
+  /* Hintergrundraster für wissenschaftliches Aussehen */
+  #cy::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
+    pointer-events: none;
+    z-index: 1;
+  }
+  
+  .dark #cy::before {
+    background-image: 
+      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  }
+  
+  /* Verbesserte Mindmap-Container-Stile */
   .mindmap-container {
     position: relative;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
+    background-color: var(--bg-secondary);
   }
   
   .dark .mindmap-container {
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    background-color: var(--bg-secondary);
   }
   
+  /* Flüssigere Übergänge für Mindmap-Elemente */
+  .mindmap-svg {
+    transition: background-color 0.5s ease;
+  }
+  
+  .node {
+    cursor: pointer;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+  
+  .node:hover {
+    transform: scale(1.05);
+  }
+  
+  .node circle {
+    transition: r 0.3s ease, fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
+  }
+  
+  .node text {
+    transition: font-size 0.3s ease, fill 0.3s ease;
+    user-select: none;
+  }
+  
+  .link {
+    transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
+    pointer-events: none;
+  }
+  
+  /* Panel-Übergänge für Seitenleiste */
+  [data-sidebar] {
+    transition: opacity 0.3s ease, transform 0.3s ease, display 0s linear 0.3s;
+  }
+  
+  [data-sidebar].active {
+    transition: opacity 0.3s ease, transform 0.3s ease, display 0s linear;
+  }
+  
+  /* Mindmap-Toolbar mit verbessertem Erscheinungsbild */
   .mindmap-toolbar {
     display: flex;
     gap: 0.5rem;
@@ -35,82 +98,59 @@
     background-color: var(--bg-secondary);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     transition: background-color 0.3s ease;
+    position: relative;
+    z-index: 10;
   }
   
   body:not(.dark) .mindmap-toolbar {
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   
-  .btn {
+  /* Verbesserte Button-Stile für Mindmap-Toolbar */
+  .mindmap-action-btn {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 0.875rem;
-    border-radius: 0.375rem;
-    transition: all 0.3s ease;
-  }
-  
-  .category-filters {
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-    padding: 0.75rem;
-    background-color: var(--bg-secondary);
-    transition: background-color 0.3s ease;
-  }
-  
-  .category-filter {
-    border: none;
+    gap: 0.35rem;
+    padding: 0.35rem 0.7rem;
+    font-size: 0.8rem;
     border-radius: 0.25rem;
-    padding: 0.25rem 0.75rem;
-    font-size: 0.75rem;
+    background-color: rgba(79, 70, 229, 0.1);
+    color: #4f46e5;
+    border: 1px solid rgba(79, 70, 229, 0.2);
     cursor: pointer;
-    transition: opacity 0.2s;
-    color: white;
+    transition: all 0.2s ease;
   }
   
-  .category-filter:not(.active) {
-    opacity: 0.6;
+  .dark .mindmap-action-btn {
+    background-color: rgba(79, 70, 229, 0.15);
+    border-color: rgba(79, 70, 229, 0.3);
   }
   
-  .category-filter:hover:not(.active) {
-    opacity: 0.8;
+  .mindmap-action-btn:hover {
+    background-color: rgba(79, 70, 229, 0.2);
+    transform: translateY(-1px);
   }
   
-  /* Kontextmenü */
-  #context-menu {
-    position: absolute;
-    border-radius: 0.375rem;
-    z-index: 1000;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
+  .mindmap-action-btn:active {
+    transform: translateY(0);
   }
   
-  .dark #context-menu {
-    background-color: #232837;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+  /* Verbesserte Seitenleisten-Panels mit Animation */
+  .sidebar-panel {
+    transition: all 0.3s ease-in-out;
   }
   
-  body:not(.dark) #context-menu {
-    background-color: white;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+  .sidebar-panel.hidden {
+    opacity: 0;
+    transform: translateY(10px);
   }
   
-  #context-menu .menu-item {
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
+  .sidebar-panel.visible {
+    opacity: 1;
+    transform: translateY(0);
   }
   
-  .dark #context-menu .menu-item:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-  }
-  
-  body:not(.dark) #context-menu .menu-item:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-  
-  /* Info-Panel */
+  /* Info-Panel anpassungen */
   .mindmap-info-panel {
     position: absolute;
     right: 1rem;
@@ -175,30 +215,6 @@
     transform: translateY(-2px);
   }
   
-  /* Mindmap-Toolbar-Buttons */
-  .mindmap-action-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.35rem 0.7rem;
-    font-size: 0.8rem;
-    border-radius: 0.25rem;
-    background-color: rgba(124, 58, 237, 0.1);
-    color: #8b5cf6;
-    border: 1px solid rgba(124, 58, 237, 0.2);
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-  
-  .dark .mindmap-action-btn {
-    background-color: rgba(124, 58, 237, 0.15);
-    border-color: rgba(124, 58, 237, 0.3);
-  }
-  
-  .mindmap-action-btn:hover {
-    background-color: rgba(124, 58, 237, 0.2);
-  }
-  
   /* Zusätzliches Layout */
   .mindmap-section {
     display: grid;
@@ -235,17 +251,29 @@
       <div class="mindmap-container">
         <!-- Toolbar -->
         <div class="mindmap-toolbar">
-          <button id="fit-btn" class="mindmap-action-btn">
+          <button id="fit-btn" class="mindmap-action-btn" title="An Fenstergröße anpassen">
             <i class="fa-solid fa-expand"></i>
-            <span>Ansicht anpassen</span>
+            <span>Anpassen</span>
           </button>
-          <button id="reset-btn" class="mindmap-action-btn">
+          <button id="reset-btn" class="mindmap-action-btn" title="Ansicht zurücksetzen">
             <i class="fa-solid fa-undo"></i>
             <span>Zurücksetzen</span>
           </button>
-          <button id="toggle-labels-btn" class="mindmap-action-btn">
+          <button id="zoom-in-btn" class="mindmap-action-btn" title="Einzoomen">
+            <i class="fa-solid fa-magnifying-glass-plus"></i>
+            <span>Zoom+</span>
+          </button>
+          <button id="zoom-out-btn" class="mindmap-action-btn" title="Auszoomen">
+            <i class="fa-solid fa-magnifying-glass-minus"></i>
+            <span>Zoom-</span>
+          </button>
+          <button id="toggle-labels-btn" class="mindmap-action-btn" title="Labels ein/ausblenden">
             <i class="fa-solid fa-tags"></i>
-            <span>Labels ein/aus</span>
+            <span>Labels</span>
+          </button>
+          <button id="fullscreen-btn" class="mindmap-action-btn" title="Vollbildmodus">
+            <i class="fa-solid fa-expand"></i>
+            <span>Vollbild</span>
           </button>
         </div>
 
@@ -271,7 +299,8 @@
     <div class="w-full lg:w-1/4 space-y-6">
       <!-- Nutzlänge -->
       <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
-           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
+           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'"
+           data-sidebar="about-mindmap">
         <h3 class="text-xl font-semibold mb-3"
             x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
           <i class="fa-solid fa-circle-info text-purple-400 mr-2"></i>Über die Mindmap
@@ -290,7 +319,8 @@
 
       <!-- Kategorienlegende -->
       <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300"
-           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'">
+           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'"
+           data-sidebar="categories">
         <h3 class="text-xl font-semibold mb-3"
             x-bind:class="darkMode ? 'text-white' : 'text-gray-800'">
           <i class="fa-solid fa-palette text-purple-400 mr-2"></i>Kategorien
@@ -298,11 +328,31 @@
         <div id="category-legend" class="space-y-2 text-sm"
              x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
           <!-- Wird dynamisch befüllt -->
-          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span> Philosophie</div>
-          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> Wissenschaft</div>
-          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-orange-500 mr-2"></span> Technologie</div>
-          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-pink-500 mr-2"></span> Künste</div>
-          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-blue-500 mr-2"></span> Psychologie</div>
+          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-indigo-600 mr-2"></span> Philosophie</div>
+          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-emerald-600 mr-2"></span> Wissenschaft</div>
+          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-indigo-500 mr-2"></span> Technologie</div>
+          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-violet-500 mr-2"></span> Künste</div>
+          <div class="flex items-center"><span class="w-3 h-3 rounded-full bg-cyan-700 mr-2"></span> Psychologie</div>
+        </div>
+      </div>
+      
+      <!-- Knotenbeschreibung (anfangs ausgeblendet) -->
+      <div class="p-5 rounded-lg overflow-hidden border transition-colors duration-300 hidden"
+           x-bind:class="darkMode ? 'bg-slate-800/40 border-slate-700/50' : 'bg-white border-slate-200'"
+           data-sidebar="node-description">
+        <h3 class="text-xl font-semibold mb-3"
+            x-bind:class="darkMode ? 'text-white' : 'text-gray-800'"
+            data-node-title>Knotenbeschreibung</h3>
+        <div class="space-y-3" x-bind:class="darkMode ? 'text-gray-300' : 'text-gray-600'">
+          <p class="text-sm leading-relaxed" data-node-description>
+            Wählen Sie einen Knoten in der Mindmap aus, um dessen Beschreibung hier anzuzeigen.
+          </p>
+          <div class="pt-2 mt-2 border-t" x-bind:class="darkMode ? 'border-slate-700/50' : 'border-slate-200'">
+            <button class="text-xs px-3 py-1.5 rounded bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-colors dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-800/40"
+                  onclick="window.mindmapInstance && window.mindmapInstance.selectedNode && window.mindmapInstance.centerNodeInView(window.mindmapInstance.selectedNode)">
+              <i class="fa-solid fa-crosshairs mr-1"></i> Knoten zentrieren
+            </button>
+          </div>
         </div>
       </div>
 
@@ -347,4 +397,6 @@
 <script src="{{ url_for('static', filename='js/mindmap-init.js') }}"></script>
 <!-- Update Mindmap mit wissenschaftlichen Knoten -->
 <script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
+<!-- Verbesserte Interaktion -->
+<script src="{{ url_for('static', filename='js/mindmap-interaction.js') }}"></script>
 {% endblock %}