"feat: Implement mindmap control enhancements and controls updates"

static/js/mindmap_controls.js

@@ -0,0 +1,220 @@
+/**
+ * Systades Mindmap Steuerung
+ * Implementierung der Funktionalitäten für die Mindmap-Kontrollbuttons
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Mindmap-Steuerung wird initialisiert...');
+    
+    // Vergrößern-Funktion (Kontrollpanel)
+    const zoomInBtn = document.querySelector('#zoomIn');
+    if (zoomInBtn) {
+        console.log('Zoom-In Button gefunden');
+        zoomInBtn.addEventListener('click', function() {
+            vergrößern();
+        });
+    }
+    
+    // Verkleinern-Funktion (Kontrollpanel)
+    const zoomOutBtn = document.querySelector('#zoomOut');
+    if (zoomOutBtn) {
+        console.log('Zoom-Out Button gefunden');
+        zoomOutBtn.addEventListener('click', function() {
+            verkleinern();
+        });
+    }
+    
+    // Zurücksetzen-Funktion (Kontrollpanel)
+    const resetViewBtn = document.querySelector('#resetView');
+    if (resetViewBtn) {
+        console.log('Reset-View Button gefunden');
+        resetViewBtn.addEventListener('click', function() {
+            zurücksetzen();
+        });
+    }
+    
+    // Legende-Funktion (Kontrollpanel)
+    const toggleLegendBtn = document.querySelector('#toggleLegend');
+    if (toggleLegendBtn) {
+        console.log('Toggle-Legend Button gefunden');
+        toggleLegendBtn.addEventListener('click', function() {
+            legendeUmschalten();
+        });
+    }
+
+    // Seitliche Buttons
+    const vergrößernBtn = document.querySelector('#vergrößernBtn');
+    if (vergrößernBtn) {
+        console.log('Vergrößern Button (Seitenleiste) gefunden');
+        vergrößernBtn.addEventListener('click', function() {
+            vergrößern();
+            animateButtonClick(this);
+        });
+    } else {
+        console.warn('Vergrößern Button nicht gefunden');
+    }
+
+    const verkleinernBtn = document.querySelector('#verkleinernBtn');
+    if (verkleinernBtn) {
+        console.log('Verkleinern Button (Seitenleiste) gefunden');
+        verkleinernBtn.addEventListener('click', function() {
+            verkleinern();
+            animateButtonClick(this);
+        });
+    } else {
+        console.warn('Verkleinern Button nicht gefunden');
+    }
+
+    const zurücksetzenBtn = document.querySelector('#zurücksetzenBtn');
+    if (zurücksetzenBtn) {
+        console.log('Zurücksetzen Button (Seitenleiste) gefunden');
+        zurücksetzenBtn.addEventListener('click', function() {
+            zurücksetzen();
+            animateButtonClick(this);
+        });
+    } else {
+        console.warn('Zurücksetzen Button nicht gefunden');
+    }
+});
+
+/**
+ * Vergrößert die aktuelle Mindmap-Ansicht
+ */
+function vergrößern() {
+    console.log('Vergrößern-Funktion aufgerufen');
+    if (window.cy) {
+        const aktuellerZoom = window.cy.zoom();
+        window.cy.zoom({
+            level: aktuellerZoom * 1.2,
+            renderedPosition: { x: window.innerWidth / 2, y: window.innerHeight / 2 }
+        });
+        console.log('Vergrößerung: Neuer Zoom-Level:', window.cy.zoom());
+    } else {
+        console.error('Cytoscape-Instanz nicht verfügbar');
+    }
+}
+
+/**
+ * Verkleinert die aktuelle Mindmap-Ansicht
+ */
+function verkleinern() {
+    console.log('Verkleinern-Funktion aufgerufen');
+    if (window.cy) {
+        const aktuellerZoom = window.cy.zoom();
+        window.cy.zoom({
+            level: aktuellerZoom * 0.8,
+            renderedPosition: { x: window.innerWidth / 2, y: window.innerHeight / 2 }
+        });
+        console.log('Verkleinerung: Neuer Zoom-Level:', window.cy.zoom());
+    } else {
+        console.error('Cytoscape-Instanz nicht verfügbar');
+    }
+}
+
+/**
+ * Setzt die Mindmap-Ansicht zurück, sodass alle Elemente sichtbar sind
+ */
+function zurücksetzen() {
+    console.log('Zurücksetzen-Funktion aufgerufen');
+    if (window.cy) {
+        window.cy.fit();
+        window.cy.center();
+        console.log('Ansicht zurückgesetzt');
+        
+        // Zeige kurze Bestätigung an
+        zeigeFlashNachricht('Ansicht zurückgesetzt', 'info');
+    } else {
+        console.error('Cytoscape-Instanz nicht verfügbar');
+    }
+}
+
+/**
+ * Schaltet die Anzeige der Kategorie-Legende um
+ */
+function legendeUmschalten() {
+    console.log('Legende-Umschalten-Funktion aufgerufen');
+    const legende = document.getElementById('categoryLegend');
+    if (legende) {
+        const neuerZustand = legende.style.display === 'none' || legende.style.display === '' ? 'flex' : 'none';
+        legende.style.display = neuerZustand;
+        console.log('Legende ist jetzt:', neuerZustand === 'flex' ? 'sichtbar' : 'ausgeblendet');
+        
+        // Zeige kurze Bestätigung an
+        zeigeFlashNachricht(
+            neuerZustand === 'flex' ? 'Legende wird angezeigt' : 'Legende ausgeblendet', 
+            'info'
+        );
+    } else {
+        console.error('Legende-Element nicht gefunden');
+    }
+}
+
+/**
+ * Zeigt eine kurze Flash-Nachricht auf dem Bildschirm an
+ * @param {string} nachricht - Die anzuzeigende Nachricht
+ * @param {string} typ - Der Typ der Nachricht (info, success, warning, error)
+ */
+function zeigeFlashNachricht(nachricht, typ = 'info') {
+    console.log(`Flash-Nachricht: ${nachricht} (${typ})`);
+    
+    // Prüfe, ob bereits eine Flash-Nachricht existiert
+    let flashElement = document.getElementById('flash-nachricht');
+    
+    // Falls nicht, erstelle sie
+    if (!flashElement) {
+        flashElement = document.createElement('div');
+        flashElement.id = 'flash-nachricht';
+        document.body.appendChild(flashElement);
+        
+        // Styles für das Flash-Element
+        Object.assign(flashElement.style, {
+            position: 'fixed',
+            bottom: '20px',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            padding: '10px 20px',
+            borderRadius: '5px',
+            color: 'white',
+            fontWeight: 'bold',
+            zIndex: '9999',
+            opacity: '0',
+            transition: 'opacity 0.3s ease-in-out'
+        });
+    }
+    
+    // Setze Hintergrundfarbe je nach Typ
+    const hintergrundFarben = {
+        info: 'rgba(59, 130, 246, 0.9)',
+        success: 'rgba(16, 185, 129, 0.9)',
+        warning: 'rgba(245, 158, 11, 0.9)',
+        error: 'rgba(220, 38, 38, 0.9)'
+    };
+    
+    flashElement.style.backgroundColor = hintergrundFarben[typ] || hintergrundFarben.info;
+    flashElement.textContent = nachricht;
+    
+    // Animiere das Einblenden
+    flashElement.style.opacity = '1';
+    
+    // Ausblenden nach 2 Sekunden
+    setTimeout(() => {
+        flashElement.style.opacity = '0';
+    }, 2000);
+}
+
+/**
+ * Animiert einen Button beim Klicken
+ * @param {HTMLElement} button - Das Button-Element, das animiert werden soll
+ */
+function animateButtonClick(button) {
+    // Aktuelle Transformation speichern
+    const originalTransform = button.style.transform;
+    
+    // Animation anwenden
+    button.style.transform = 'scale(0.95)';
+    
+    // Nach kurzer Zeit zurücksetzen
+    setTimeout(() => {
+        button.style.transform = originalTransform;
+    }, 150);
+} 

templates/mindmap.html

@@ -90,7 +90,7 @@
   /* Kontrollpanel */
   .control-panel {
     position: absolute;
-    right: 2rem;
+    right: 9rem;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(15, 23, 42, 0.9);
@@ -123,6 +123,60 @@
     margin-right: 0.75rem;
   }
 
+  /* Rechte Seitenleiste */
+  .right-sidebar {
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    z-index: 100;
+  }
+
+  .tool-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    background: rgba(15, 23, 42, 0.9);
+    border-radius: 1rem;
+    padding: 1rem;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .sidebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    width: 100%;
+  }
+
+  .sidebar-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateX(-5px);
+  }
+
+  .sidebar-button i {
+    font-size: 1.1rem;
+    color: #8b5cf6;
+  }
+
+  .sidebar-button:active {
+    transform: scale(0.98);
+  }
+
   /* CRUD Panel */
   .crud-panel {
     position: absolute;
@@ -425,6 +479,24 @@
     </button>
   </div>
 
+  <!-- Rechte Seitenleiste -->
+  <div class="right-sidebar">
+    <div class="tool-buttons">
+      <button id="vergrößernBtn" class="sidebar-button">
+        <i class="fas fa-search-plus"></i>
+        <span>Vergrößern</span>
+      </button>
+      <button id="verkleinernBtn" class="sidebar-button">
+        <i class="fas fa-search-minus"></i>
+        <span>Verkleinern</span>
+      </button>
+      <button id="zurücksetzenBtn" class="sidebar-button">
+        <i class="fas fa-sync"></i>
+        <span>Zurücksetzen</span>
+      </button>
+    </div>
+  </div>
+
   <!-- CRUD Buttons (anfänglich ausgeblendet) -->
   <div id="crudPanel" class="crud-panel" style="display: none;">
     <button id="createNode" class="crud-button create">
@@ -488,6 +560,7 @@
 
 <!-- Unsere JavaScript-Dateien -->
 <script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
+<script src="{{ url_for('static', filename='js/mindmap_controls.js') }}"></script>
 
 <!-- Initialisierung -->
 <script>