"Refactor Mindate mindmap UI updates for mindmap controls and components" (feat)

static/js/mindmap_controls.js

@@ -1,220 +0,0 @@
-/**
- * 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);
-}