"Update mindmap Mindmap functionality

2025-05-14 13:47:35 +02:00
parent 3a2f721f63
commit b68f65cc76
3 changed files with 98 additions and 150 deletions
--- a/logs/app.log
+++ b/logs/app.log
@@ -446,3 +446,6 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
 2025-05-14 13:37:17,229 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
 2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 13:42:53,215 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 13:42:55,657 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
+2025-05-14 13:42:55,657 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
--- a/static/js/update_mindmap.js
+++ b/static/js/update_mindmap.js
@@ -200,16 +200,14 @@ async function initializeMindmap() {
                    description: node.description,
                    hasChildren: node.has_children,
                    expanded: false,
-                    color: node.color_code || getCategoryColor(node.category),
+                    color: node.color_code,
                    fontColor: '#ffffff',
-                    fontSize: node.is_center ? 20 : 16,
-                    isCenter: node.is_center || false
+                    fontSize: node.is_center ? 20 : 16
                }
            })),
            // Kanten
            ...data.edges.map(edge => ({
                data: {
-                    id: `edge-${edge.source}-${edge.target}`,
                    source: edge.source,
                    target: edge.target,
                    strength: edge.strength || 0.5
@@ -236,7 +234,7 @@ async function initializeMindmap() {
                    style: mindmapStyles.node.base
                },
                {
-                    selector: 'node[?isCenter]',
+                    selector: 'node[isCenter]',
                    style: mindmapStyles.node.center
                },
                {
@@ -251,32 +249,66 @@ async function initializeMindmap() {
            layout: mindmapStyles.layout.base
        });

-        // Nach der Initialisierung die Knoten sperren
-        window.cy.nodes().lock();
+        // Füge neuronale Eigenschaften zu allen Knoten hinzu
+        cy.nodes().forEach(node => {
+            const data = node.data();
+            // Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
+            const categoryColor = data.category && mindmapConfig.categories[data.category] 
+                ? mindmapConfig.categories[data.category].color 
+                : '#60a5fa';
+            
+            node.data({
+                ...data,
+                neuronSize: data.neuronSize || 8,
+                neuronActivity: data.neuronActivity || 0.8,
+                refractionPeriod: Math.random() * 300 + 700,
+                threshold: Math.random() * 0.3 + 0.6,
+                lastFired: 0,
+                color: data.color || categoryColor
+            });
+        });

-        // Verbessertes Neuronales Design anwenden
-        applyNeuralNetworkStyle(window.cy);
-        enhanceMindmap();
+        // Füge synaptische Eigenschaften zu allen Kanten hinzu
+        cy.edges().forEach(edge => {
+            const data = edge.data();
+            edge.data({
+                ...data,
+                strength: data.strength || 0.5,
+                conductionVelocity: Math.random() * 0.5 + 0.3,
+                latency: Math.random() * 100 + 50
+            });
+        });
+
+        // Event-Listener für Knoten-Klicks
+        cy.on('tap', 'node', async function(evt) {
+            const node = evt.target;
+            console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
+            
+            if (node.data('hasChildren') && !node.data('expanded')) {
+                await loadSubthemes(node);
+            }
+        });
+
+        // Layout ausführen
+        cy.layout(mindmapStyles.layout.base).run();
        
-        // Kategorienlegende anzeigen
-        document.getElementById('categoryLegend').style.display = 'flex';
-
-        return window.cy;
+        // Starte neuronale Aktivitätssimulation
+        startNeuralActivitySimulation(cy);
+        
+        // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
+        updateMindmap();
+        
+        return true;
    } catch (error) {
-        console.error('Fehler beim Initialisieren der Mindmap:', error);
-        showUINotification('Fehler beim Initialisieren der Mindmap: ' + error.message, 'error');
-        throw error;
+        console.error('Fehler bei der Mindmap-Initialisierung:', error);
+        showUINotification({
+            error: 'Mindmap konnte nicht initialisiert werden',
+            details: error.message
+        }, 'error');
+        return false;
    }
 }

-// Hilfsfunktion zum Abrufen der Kategoriefarbe
-function getCategoryColor(category) {
-    if (!category) return '#666666'; // Standardfarbe
-    
-    const categoryData = mindmapConfig.categories[category];
-    return categoryData ? categoryData.color : '#666666';
-}
-
 // Warte bis DOM geladen ist
 document.addEventListener('DOMContentLoaded', function() {
    console.log('DOMContentLoaded Event ausgelöst');
@@ -1135,7 +1167,7 @@ function showNodeContextMenu(node, position) {
                    startEdgeCreation(node);
                    break;
                case 'delete':
-                    deleteElement(node);
+                    deleteNode(node);
                    break;
            }
            
@@ -1355,26 +1387,15 @@ function enableEdgeCreationMode(cy) {
    });
 }

-// Funktion zum Löschen eines Elements (Knoten oder Kante)
-function deleteElement(element) {
-    if (!element) return;
+// Funktion zum Löschen eines Knotens
+function deleteNode(node) {
+    if (!node) return;
    
-    // Sicherheitsabfrage für Knoten
-    if (element.isNode()) {
-        if (confirm('Möchten Sie diesen Knoten wirklich löschen? Alle Verbindungen werden ebenfalls entfernt.')) {
-            // Entferne alle verbundenen Kanten
-            element.connectedEdges().remove();
-            // Entferne den Knoten
-            element.remove();
-            showUINotification('Knoten wurde gelöscht', 'success');
-        }
-    } 
-    // Sicherheitsabfrage für Kanten
-    else if (element.isEdge()) {
-        if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
-            element.remove();
-            showUINotification('Verbindung wurde gelöscht', 'success');
-        }
+    // Frage den Benutzer, ob er den Knoten wirklich löschen möchte
+    if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
+        // Entferne den Knoten und alle zugehörigen Kanten
+        node.remove();
+        showUINotification('Knoten wurde gelöscht', 'success');
    }
 }

@@ -1734,101 +1755,4 @@ editingStyles.textContent = `
        opacity: 0.8;
    }
 `;
-document.head.appendChild(editingStyles);
-
-// Funktion zum Vergrößern der Ansicht
-function zoomIn(cy) {
-    if (cy) {
-        const currentZoom = cy.zoom();
-        cy.zoom({
-            level: currentZoom * 1.2, // 20% größer
-            renderedPosition: { 
-                x: cy.width() / 2, 
-                y: cy.height() / 2 
-            }
-        });
-        showUINotification('Ansicht vergrößert', 'info', 1000);
-    }
-}
-
-// Funktion zum Verkleinern der Ansicht
-function zoomOut(cy) {
-    if (cy) {
-        const currentZoom = cy.zoom();
-        cy.zoom({
-            level: currentZoom * 0.8, // 20% kleiner
-            renderedPosition: { 
-                x: cy.width() / 2, 
-                y: cy.height() / 2 
-            }
-        });
-        showUINotification('Ansicht verkleinert', 'info', 1000);
-    }
-}
-
-// Funktion zum Zurücksetzen der Ansicht
-function resetView(cy) {
-    if (cy) {
-        cy.fit();
-        cy.center();
-        showUINotification('Ansicht zurückgesetzt', 'info', 1000);
-    }
-}
-
-// Funktion zum Ein- und Ausblenden der Legende
-function toggleLegend() {
-    const legend = document.getElementById('categoryLegend');
-    if (legend) {
-        const isVisible = legend.style.display !== 'none';
-        legend.style.display = isVisible ? 'none' : 'flex';
-        showUINotification(isVisible ? 'Legende ausgeblendet' : 'Legende eingeblendet', 'info', 1000);
-    }
-}
-
-// Funktion zum Zurücksetzen aller Änderungen und Neuinitialisierung der Mindmap
-async function resetMindmap() {
-    try {
-        // Warnmeldung anzeigen
-        if (!confirm('Möchten Sie die Mindmap wirklich zurücksetzen? Alle nicht gespeicherten Änderungen gehen verloren.')) {
-            return false;
-        }
-        
-        // UI-Elemente aktualisieren
-        const editModeIndicator = document.getElementById('editModeIndicator');
-        const toggleEditModeBtn = document.getElementById('toggleEditMode');
-        const saveChangesBtn = document.getElementById('saveChanges');
-        const cancelEditBtn = document.getElementById('cancelEdit');
-        const crudPanel = document.getElementById('crudPanel');
-        
-        // Bearbeitungsmodus deaktivieren
-        if (editModeIndicator) editModeIndicator.classList.remove('active');
-        if (toggleEditModeBtn) toggleEditModeBtn.style.display = 'inline-flex';
-        if (saveChangesBtn) saveChangesBtn.style.display = 'none';
-        if (cancelEditBtn) cancelEditBtn.style.display = 'none';
-        if (crudPanel) crudPanel.style.display = 'none';
-        
-        // Loader und Statusmeldung anzeigen
-        const loader = document.getElementById('loader');
-        const statusMessage = document.getElementById('statusMessage');
-        
-        if (loader) loader.style.display = 'block';
-        if (statusMessage) {
-            statusMessage.textContent = 'Setze Mindmap zurück...';
-            statusMessage.style.display = 'block';
-        }
-        
-        // Mindmap neu initialisieren
-        await initializeMindmap();
-        
-        // Loader und Statusmeldung ausblenden
-        if (loader) loader.style.display = 'none';
-        if (statusMessage) statusMessage.style.display = 'none';
-        
-        showUINotification('Mindmap wurde zurückgesetzt', 'success');
-        return true;
-    } catch (error) {
-        console.error('Fehler beim Zurücksetzen der Mindmap:', error);
-        showUINotification('Fehler beim Zurücksetzen der Mindmap: ' + error.message, 'error');
-        return false;
-    }
-} 
+document.head.appendChild(editingStyles); 
--- a/templates/mindmap.html
+++ b/templates/mindmap.html
@@ -456,7 +456,7 @@
  </div>

  <!-- Kategorie-Legende -->
-  <div id="categoryLegend" class="category-legend" style="display: flex;">
+  <div id="categoryLegend" class="category-legend">
    <div class="category-item">
      <div class="category-color" style="background-color: #9F7AEA;"></div>
      <span>Philosophie</span>
@@ -637,7 +637,21 @@ document.addEventListener('DOMContentLoaded', function() {
  
  // Bearbeitungsmodus abbrechen
  cancelEditBtn.addEventListener('click', function() {
-    resetMindmap();
+    if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
+      isEditMode = false;
+      crudPanel.style.display = 'none';
+      editModeIndicator.classList.remove('active');
+      toggleEditModeBtn.style.display = 'inline-flex';
+      saveChangesBtn.style.display = 'none';
+      cancelEditBtn.style.display = 'none';
+      window.cy.container().classList.remove('editing-mode');
+      
+      // Neuinitialisierung der Mindmap
+      initializeMindmap().then(() => {
+        loader.style.display = 'none';
+        statusMessage.style.display = 'none';
+      });
+    }
  });
  
  // CRUD-Funktionen
@@ -661,7 +675,13 @@ document.addEventListener('DOMContentLoaded', function() {
  
  deleteElementBtn.addEventListener('click', function() {
    if (isEditMode && selectedElement) {
-      deleteElement(selectedElement);
+      if (selectedElement.isNode()) {
+        deleteNode(selectedElement);
+      } else if (selectedElement.isEdge()) {
+        if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
+          selectedElement.remove();
+        }
+      }
    }
  });
  
@@ -673,19 +693,20 @@ document.addEventListener('DOMContentLoaded', function() {
  
  // Zoom-Funktionen
  document.getElementById('zoomIn').addEventListener('click', function() {
-    if (window.cy) zoomIn(window.cy);
+    if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
  });
  
  document.getElementById('zoomOut').addEventListener('click', function() {
-    if (window.cy) zoomOut(window.cy);
+    if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
  });
  
  document.getElementById('resetView').addEventListener('click', function() {
-    if (window.cy) resetView(window.cy);
+    if (window.cy) window.cy.fit();
  });
  
  document.getElementById('toggleLegend').addEventListener('click', function() {
-    toggleLegend();
+    const legend = document.getElementById('categoryLegend');
+    legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
  });
  
  // Funktionen für Knoteninfo-Panel