website/static/js/mindmap_controls.js

/**
 * 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);
}