/** * Update Mindmap * Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher, * dass sie im neuronalen Netzwerk-Design angezeigt werden. * Implementiert Lazy Loading & Progressive Disclosure */ // Neue zentrale Konfiguration const mindmapConfig = { categories: { 'Philosophie': { icon: 'fa-solid fa-lightbulb', color: '#b71c1c', description: 'Die Lehre vom Denken und der Erkenntnis' }, 'Wissenschaft': { icon: 'fa-solid fa-atom', color: '#f4b400', description: 'Systematische Erforschung der Natur und Gesellschaft' }, 'Technologie': { icon: 'fa-solid fa-microchip', color: '#0d47a1', description: 'Anwendung wissenschaftlicher Erkenntnisse' }, 'Künste': { icon: 'fa-solid fa-palette', color: '#c2185b', description: 'Kreativer Ausdruck und künstlerische Gestaltung' } }, defaultNodeStyle: { fontSize: 18, fontColor: '#fff', neuronSize: 8, neuronActivity: 0.8 }, centerNodeStyle: { fontSize: 22, fontColor: '#222', neuronSize: 12, neuronActivity: 1.0, color: '#f5f5f5', icon: 'fa-solid fa-circle' } }; // Zentrale Styling-Konfiguration const mindmapStyles = { node: { base: { 'background-color': 'data(color)', 'label': 'data(label)', 'color': '#ffffff', 'text-background-color': 'rgba(0, 0, 0, 0.7)', 'text-background-opacity': 0.8, 'text-background-padding': '4px', 'text-valign': 'center', 'text-halign': 'center', 'font-size': 16, 'width': 40, 'height': 40, 'border-width': 2, 'border-color': '#ffffff', 'border-opacity': 0.8, 'shape': 'ellipse', 'background-opacity': 0.85 }, center: { 'background-color': '#f5f5f5', 'color': '#222', 'font-size': 20, 'border-width': 3, 'width': 100, 'height': 100 }, selected: { 'border-color': '#f59e42', 'border-width': 3, 'background-opacity': 1 } }, edge: { base: { 'width': function(ele) { return ele.data('strength') ? ele.data('strength') * 2 : 1; }, 'line-color': function(ele) { const sourceColor = ele.source().data('color'); return sourceColor || '#8a8aaa'; }, 'line-opacity': function(ele) { return ele.data('strength') ? ele.data('strength') * 0.6 : 0.4; }, 'curve-style': 'bezier', 'target-arrow-shape': 'none', 'control-point-distances': [30, -30], 'control-point-weights': [0.5, 0.5] } }, layout: { base: { name: 'cose', animate: true, animationDuration: 500, refresh: 20, fit: true, padding: 30, nodeRepulsion: 4500, idealEdgeLength: 50, edgeElasticity: 0.45, randomize: true, componentSpacing: 100, nodeOverlap: 20, gravity: 0.25, initialTemp: 1000, coolingFactor: 0.95, minTemp: 1 } } }; // Globale Variable für die Mindmap-Daten let mindmapData = null; // Funktion zum Laden der Mindmap-Daten aus der Datenbank async function loadMindmapData(nodeId = null) { try { const apiUrl = nodeId ? `/api/mindmap/${nodeId}` : '/api/mindmap/root'; console.log('Lade Mindmap-Daten von:', apiUrl); const response = await fetch(apiUrl); console.log('API-Antwort Status:', response.status); if (!response.ok) { let errorData; try { errorData = await response.json(); console.log('API-Fehler Details:', { status: response.status, statusText: response.statusText, errorData }); } catch (e) { console.error('Fehler beim Parsen der Fehlerantwort:', e); errorData = { error: `HTTP-Fehler ${response.status}: ${response.statusText}` }; } // Fehlerobjekt für die Benachrichtigung erstellen const errorMessage = { error: errorData.error || errorData.message || 'Unbekannter Fehler', details: errorData.details || null }; showUINotification(errorMessage, 'error'); throw new Error(errorMessage.error); } const data = await response.json(); console.log('Geladene Mindmap-Daten:', data); if (!data.success) { const errorMessage = { error: data.error || 'Mindmap-Daten konnten nicht geladen werden', details: data.details || null }; showUINotification(errorMessage, 'error'); throw new Error(errorMessage.error); } // Erfolgreiche Antwort mindmapData = data; // Speichere die Daten in der globalen Variable showUINotification('Mindmap-Daten erfolgreich geladen', 'success'); return data; } catch (error) { console.error('Fehler beim Laden der Mindmap-Daten:', { message: error.message, stack: error.stack, nodeId }); // Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben const errorMessage = { error: error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten', details: error.stack }; showUINotification(errorMessage, 'error'); throw error; } } // Funktion zum Initialisieren der Mindmap async function initializeMindmap() { try { const data = await loadMindmapData(); if (!data || !data.nodes || !data.edges) { throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig'); } const elements = [ // Knoten ...data.nodes.map(node => ({ data: { id: node.id, label: node.name, category: node.category, description: node.description, hasChildren: node.has_children, expanded: false, color: node.color_code, fontColor: '#ffffff', fontSize: node.is_center ? 20 : 16 } })), // Kanten ...data.edges.map(edge => ({ data: { source: edge.source, target: edge.target, strength: edge.strength || 0.5 } })) ]; // Bestehende Cytoscape-Instanz entfernen, falls vorhanden if (window.cy && typeof window.cy.destroy === 'function') { window.cy.destroy(); } const cyContainer = document.getElementById('cy'); if (!cyContainer) { throw new Error('Mindmap-Container #cy nicht gefunden!'); } window.cy = cytoscape({ container: cyContainer, elements: elements, style: [ { selector: 'node', style: mindmapStyles.node.base }, { selector: 'node[isCenter]', style: mindmapStyles.node.center }, { selector: 'node:selected', style: mindmapStyles.node.selected }, { selector: 'edge', style: mindmapStyles.edge.base } ], layout: mindmapStyles.layout.base }); // 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 }); }); // 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(); // Starte neuronale Aktivitätssimulation startNeuralActivitySimulation(cy); // Mindmap mit echten Daten befüllen (Styles, Farben etc.) updateMindmap(); return true; } catch (error) { console.error('Fehler bei der Mindmap-Initialisierung:', error); showUINotification({ error: 'Mindmap konnte nicht initialisiert werden', details: error.message }, 'error'); return false; } } // Warte bis DOM geladen ist document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded Event ausgelöst'); // Prüfe, ob der Container existiert const cyContainer = document.getElementById('cy'); console.log('Container gefunden:', cyContainer); if (!cyContainer) { console.error('Mindmap-Container #cy nicht gefunden!'); return; } // Prüfe, ob Cytoscape verfügbar ist if (typeof cytoscape === 'undefined') { console.error('Cytoscape ist nicht definiert!'); return; } console.log('Cytoscape ist verfügbar'); // Initialisiere die Mindmap initializeMindmap() .then(success => { if (success) { console.log('Mindmap wurde erfolgreich initialisiert'); // Event auslösen, damit andere Scripte reagieren können document.dispatchEvent(new Event('mindmap-loaded')); console.log('mindmap-loaded Event ausgelöst'); } else { console.error('Mindmap-Initialisierung fehlgeschlagen'); } }) .catch(error => { console.error('Fehler bei der Mindmap-Initialisierung:', error); showUINotification({ error: 'Mindmap konnte nicht initialisiert werden', details: error.message }, 'error'); }); }); // Funktion zum Initialisieren des neuronalen Designs function initializeNeuralDesign(cy) { // 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 }); }); // 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 }); }); // Wende neuronales Styling an cy.style() .selector('node') .style({ 'background-color': 'data(color)', 'label': 'data(label)', 'color': '#fff', 'text-background-color': 'rgba(0, 0, 0, 0.7)', 'text-background-opacity': 0.8, 'text-background-padding': '4px', 'text-valign': 'center', 'text-halign': 'center', 'font-size': 16, 'width': 40, 'height': 40, 'border-width': 2, 'border-color': '#fff', 'border-opacity': 0.8, 'overlay-padding': 4, 'z-index': 10, 'shape': 'ellipse', 'background-opacity': 0.85, 'shadow-blur': 15, 'shadow-color': 'data(color)', 'shadow-opacity': 0.6, 'shadow-offset-x': 0, 'shadow-offset-y': 0 }) .selector('edge') .style({ 'width': function(ele) { return ele.data('strength') ? ele.data('strength') * 3 : 1; }, 'curve-style': 'bezier', 'line-color': function(ele) { const sourceColor = ele.source().data('color'); return sourceColor || '#8a8aaa'; }, 'line-opacity': function(ele) { return ele.data('strength') ? ele.data('strength') * 0.8 : 0.4; }, 'line-style': function(ele) { const strength = ele.data('strength'); if (!strength) return 'solid'; if (strength <= 0.4) return 'dotted'; if (strength <= 0.6) return 'dashed'; return 'solid'; }, 'target-arrow-shape': 'none', 'source-endpoint': '0% 50%', 'target-endpoint': '100% 50%', 'transition-property': 'line-opacity, width', 'transition-duration': '0.3s', 'transition-timing-function': 'ease-in-out' }) .update(); // Starte neuronale Aktivitätssimulation startNeuralActivitySimulation(cy); } // Modifiziere die updateMindmap Funktion function updateMindmap() { if (!cy) return; // Bestehende Elemente entfernen cy.elements().remove(); // Neue Knoten hinzufügen mindmapData.nodes.forEach(node => { cy.add({ group: 'nodes', data: { id: node.id, label: node.name, category: node.category, description: node.description, hasChildren: node.has_children, expanded: false, color: node.color_code || mindmapConfig.categories[node.category]?.color || '#60a5fa', icon: node.icon || mindmapConfig.categories[node.category]?.icon || 'fa-solid fa-circle' } }); }); // Neue Kanten hinzufügen mindmapData.edges.forEach(edge => { cy.add({ group: 'edges', data: { source: edge.source, target: edge.target, strength: edge.strength || 0.5 } }); }); // Layout aktualisieren cy.layout(mindmapStyles.layout.base).run(); } /** * Erweitert die Mindmap mit dem neuronalen Netzwerk-Design */ function enhanceMindmap() { // Auf die bestehende Cytoscape-Instanz zugreifen const cy = window.cy; if (!cy) { console.error('Keine Cytoscape-Instanz gefunden.'); return; } // Aktualisiere das Layout für eine bessere Verteilung cy.layout({ name: 'cose', animate: true, animationDuration: 2000, nodeDimensionsIncludeLabels: true, padding: 100, spacingFactor: 2, randomize: true, fit: true, componentSpacing: 150, nodeRepulsion: 10000, edgeElasticity: 150, nestingFactor: 1.5, gravity: 100, initialTemp: 1000, coolingFactor: 0.95, minTemp: 1 }).run(); // Neuronen-Namen mit besserer Lesbarkeit umgestalten cy.style() .selector('node') .style({ 'text-background-color': 'rgba(10, 14, 25, 0.7)', 'text-background-opacity': 0.7, 'text-background-padding': '2px', 'text-border-opacity': 0.2, 'text-border-width': 1, 'text-border-color': '#8b5cf6' }) .update(); // Sicherstellen, dass alle Knoten Neuronen-Eigenschaften haben cy.nodes().forEach(node => { if (!node.data('neuronSize')) { const neuronSize = Math.floor(Math.random() * 8) + 3; node.data('neuronSize', neuronSize); } if (!node.data('neuronActivity')) { const neuronActivity = Math.random() * 0.7 + 0.3; node.data('neuronActivity', neuronActivity); } // Zusätzliche Neuronale Eigenschaften node.data('pulseFrequency', Math.random() * 4 + 2); // Pulsfrequenz (2-6 Hz) node.data('refractionPeriod', Math.random() * 300 + 700); // Refraktionszeit (700-1000ms) node.data('threshold', Math.random() * 0.3 + 0.6); // Aktivierungsschwelle (0.6-0.9) }); // Sicherstellen, dass alle Kanten Synapse-Eigenschaften haben cy.edges().forEach(edge => { if (!edge.data('strength')) { const strength = Math.random() * 0.6 + 0.2; edge.data('strength', strength); } // Zusätzliche synaptische Eigenschaften edge.data('conductionVelocity', Math.random() * 0.5 + 0.3); // Leitungsgeschwindigkeit (0.3-0.8) edge.data('latency', Math.random() * 100 + 50); // Signalverzögerung (50-150ms) }); // Neuronales Netzwerk-Stil anwenden applyNeuralNetworkStyle(cy); console.log('Mindmap wurde erfolgreich im neuronalen Netzwerk-Stil aktualisiert'); // Spezielle Effekte für das neuronale Netzwerk hinzufügen startNeuralActivitySimulation(cy); } /** * Wendet detaillierte neuronale Netzwerkstile auf die Mindmap an * @param {Object} cy - Cytoscape-Instanz */ function applyNeuralNetworkStyle(cy) { cy.style() .selector('node') .style({ 'label': 'data(label)', 'text-valign': 'center', 'text-halign': 'center', 'color': 'data(fontColor)', 'text-outline-width': 2, 'text-outline-color': 'rgba(0,0,0,0.8)', 'text-outline-opacity': 0.9, 'font-size': 'data(fontSize)', 'font-weight': '500', 'text-margin-y': 8, 'width': function(ele) { if (ele.data('isCenter')) return 120; return 80; }, 'height': function(ele) { if (ele.data('isCenter')) return 120; return 80; }, 'background-color': 'data(color)', 'background-opacity': 0.9, 'border-width': 2, 'border-color': '#ffffff', 'border-opacity': 0.8, 'shape': 'ellipse', 'transition-property': 'background-color, background-opacity, border-width', 'transition-duration': '0.3s', 'transition-timing-function': 'ease-in-out' }) .selector('edge') .style({ 'width': function(ele) { return ele.data('strength') ? ele.data('strength') * 3 : 1; }, 'curve-style': 'bezier', 'line-color': function(ele) { const sourceColor = ele.source().data('color'); return sourceColor || '#8a8aaa'; }, 'line-opacity': function(ele) { return ele.data('strength') ? ele.data('strength') * 0.8 : 0.4; }, 'line-style': function(ele) { const strength = ele.data('strength'); if (!strength) return 'solid'; if (strength <= 0.4) return 'dotted'; if (strength <= 0.6) return 'dashed'; return 'solid'; }, 'target-arrow-shape': 'none', 'source-endpoint': '0% 50%', 'target-endpoint': '100% 50%', 'transition-property': 'line-opacity, width', 'transition-duration': '0.3s', 'transition-timing-function': 'ease-in-out' }) .update(); } // Vereinfachte neuronale Aktivitätssimulation function startNeuralActivitySimulation(cy) { if (window.neuralInterval) clearInterval(window.neuralInterval); const nodes = cy.nodes(); let currentTime = Date.now(); function simulateNeuralActivity() { currentTime = Date.now(); nodes.forEach(node => { const data = node.data(); const lastFired = data.lastFired || 0; const timeSinceLastFire = currentTime - lastFired; if (timeSinceLastFire > data.refractionPeriod) { if (Math.random() < data.neuronActivity * 0.1) { fireNeuron(node, true, currentTime); } } }); } function fireNeuron(node, state, currentTime) { const data = node.data(); data.lastFired = currentTime; node.style({ 'background-opacity': 1, 'border-width': 3 }); setTimeout(() => { node.style({ 'background-opacity': 0.9, 'border-width': 2 }); }, 200); if (state) { propagateSignal(node, currentTime); } } function propagateSignal(sourceNode, currentTime) { const outgoingEdges = sourceNode.connectedEdges(); outgoingEdges.forEach(edge => { const targetNode = edge.target(); const edgeData = edge.data(); const latency = edgeData.latency; edge.style({ 'line-opacity': 0.8, 'width': edgeData.strength * 3 }); setTimeout(() => { edge.style({ 'line-opacity': edgeData.strength * 0.6, 'width': edgeData.strength * 2 }); }, 200); setTimeout(() => { const targetData = targetNode.data(); const timeSinceLastFire = currentTime - (targetData.lastFired || 0); if (timeSinceLastFire > targetData.refractionPeriod) { const signalStrength = edgeData.strength * edgeData.conductionVelocity * sourceNode.data('neuronActivity'); if (signalStrength > targetData.threshold) { fireNeuron(targetNode, true, currentTime + latency); } } }, latency); }); } window.neuralInterval = setInterval(simulateNeuralActivity, 100); } // Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises function showFlash(message, type = 'info') { const flashContainer = createFlashContainer(); const flash = document.createElement('div'); flash.className = `flash-message ${type}`; flash.textContent = message; flashContainer.appendChild(flash); document.body.appendChild(flashContainer); setTimeout(() => { flash.classList.add('show'); setTimeout(() => { flash.classList.remove('show'); setTimeout(() => { flashContainer.remove(); }, 300); }, 3000); }, 100); } /** * Zeigt eine Benachrichtigung in der UI an * @param {string|object} message - Die anzuzeigende Nachricht oder ein Fehlerobjekt * @param {string} type - Der Typ der Benachrichtigung ('info', 'success', 'warning', 'error') * @param {number} duration - Die Anzeigedauer in Millisekunden (Standard: 3000) */ function showUINotification(message, type = 'info', duration = 3000) { // Überprüfe und formatiere die Nachricht let displayMessage; if (typeof message === 'object') { if (message.message) { displayMessage = message.message; } else if (message.error) { displayMessage = message.error; } else if (message.details) { displayMessage = message.details; } else { console.error('Ungültiges Nachrichtenobjekt:', message); displayMessage = 'Ein unbekannter Fehler ist aufgetreten'; } } else if (typeof message === 'string') { displayMessage = message; } else { console.error('Ungültige Nachricht für UI-Benachrichtigung:', message); displayMessage = 'Ein unbekannter Fehler ist aufgetreten'; } // Validiere den Typ const validTypes = ['info', 'success', 'warning', 'error']; if (!validTypes.includes(type)) { console.warn(`Ungültiger Benachrichtigungstyp: ${type}. Verwende 'info' als Fallback.`); type = 'info'; } // Validiere die Dauer if (typeof duration !== 'number' || duration < 1000 || duration > 10000) { console.warn(`Ungültige Dauer: ${duration}ms. Verwende 3000ms als Fallback.`); duration = 3000; } // Zeige die Benachrichtigung an showFlash(displayMessage, type); // Logging für Debugging-Zwecke console.log(`UI-Benachrichtigung [${type}]:`, displayMessage); } // Hilfsfunktion zum Erstellen eines Flash-Containers, falls keiner existiert function createFlashContainer() { const container = document.createElement('div'); container.id = 'flash-messages'; container.className = 'fixed top-4 right-4 z-50 w-64'; document.body.appendChild(container); return container; } // Funktion zum Laden der Subthemen async function loadSubthemes(node) { try { // Prüfe zuerst, ob die Node gültig ist if (!node || !node.id) { console.error('Ungültige Node beim Laden der Subthemen'); showUINotification('Fehler: Ungültiger Knoten für Subthemen', 'error'); return; } // Zeige Ladebenachrichtigung showUINotification('Lade Subthemen...', 'info'); console.log('Lade Subthemen für Node:', node.id()); // Lade die Daten für die Unterthemen const data = await loadMindmapData(node.id()); if (!data || !data.nodes || !data.edges) { throw new Error('Ungültiges Datenformat: Subthemen-Daten fehlen oder sind unvollständig'); } // Markiere den aktuellen Knoten als erweitert node.data('expanded', true); // Finde den Mindmap-Container let mindmapContainer = document.querySelector('.mindmap-container'); if (!mindmapContainer) { // Falls der Container nicht existiert, versuche den cy-Container zu finden und erstelle einen Wrapper const cyContainer = document.getElementById('cy'); if (!cyContainer) { throw new Error('Mindmap-Container nicht gefunden'); } // Erstelle einen Container für die Mindmap-Seiten const parentElement = cyContainer.parentElement; mindmapContainer = document.createElement('div'); mindmapContainer.className = 'mindmap-container'; parentElement.insertBefore(mindmapContainer, cyContainer); parentElement.removeChild(cyContainer); mindmapContainer.appendChild(cyContainer); } // Erstelle eine neue Seite für die Unterthemen const newPage = document.createElement('div'); newPage.className = 'mindmap-page'; newPage.setAttribute('data-parent-node', node.id()); // Erstelle den Header der Seite const header = document.createElement('div'); header.className = 'mindmap-header'; header.innerHTML = `

${node.data('label')}

`; // Erstelle den Container für das neue Cytoscape const newCyContainer = document.createElement('div'); newCyContainer.id = `cy-${node.id()}`; newCyContainer.className = 'mindmap-view'; // Füge die Elemente zur Seite hinzu newPage.appendChild(header); newPage.appendChild(newCyContainer); mindmapContainer.appendChild(newPage); // Aktuelles Cy-Element ausblenden if (cy && cy.container()) { cy.container().style.display = 'none'; } // Initialisiere das neue Cytoscape const newCy = cytoscape({ container: newCyContainer, elements: [ // Knoten ...data.nodes.map(node => ({ data: { id: node.id, label: node.name || node.label, category: node.category, description: node.description, hasChildren: node.has_children, expanded: false, color: node.color_code || (node.category && mindmapConfig.categories[node.category] ? mindmapConfig.categories[node.category].color : '#60a5fa'), fontColor: '#ffffff', fontSize: 16 } })), // Kanten ...data.edges.map(edge => ({ data: { source: edge.source || edge.source_id, target: edge.target || edge.target_id, strength: edge.strength || 0.5 } })) ], style: [ { selector: 'node', style: mindmapStyles.node.base }, { selector: 'node[isCenter]', style: mindmapStyles.node.center }, { selector: 'node:selected', style: mindmapStyles.node.selected }, { selector: 'edge', style: mindmapStyles.edge.base } ], layout: mindmapStyles.layout.base }); // Füge neuronale Eigenschaften zu allen Knoten hinzu newCy.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 }); }); // Füge synaptische Eigenschaften zu allen Kanten hinzu newCy.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 die neue Mindmap newCy.on('tap', 'node', async function(evt) { const clickedNode = evt.target; console.log('Node clicked in subtheme:', clickedNode.id(), 'hasChildren:', clickedNode.data('hasChildren'), 'expanded:', clickedNode.data('expanded')); if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) { await loadSubthemes(clickedNode); } }); // Starte neuronale Aktivitätssimulation für die neue Mindmap startNeuralActivitySimulation(newCy); // Speichere die Cytoscape-Instanz in einem globalen Array, damit wir sie später referenzieren können if (!window.subthemeCyInstances) { window.subthemeCyInstances = {}; } window.subthemeCyInstances[node.id()] = newCy; // Layout ausführen newCy.layout(mindmapStyles.layout.base).run(); // Zeige die neue Seite an newPage.style.display = 'block'; showUINotification('Subthemen erfolgreich geladen', 'success'); return true; } catch (error) { console.error('Fehler beim Laden der Subthemen:', error); showUINotification({ error: 'Subthemen konnten nicht geladen werden', details: error.message }, 'error'); return false; } } // Funktion zum Zurücknavigieren function goBack() { try { // Finde die aktuell angezeigte Mindmap-Seite const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])'); if (!currentPage) { console.warn('Keine Mindmap-Seite gefunden, zu der zurückgekehrt werden kann'); return; } // Finde die übergeordnete Node ID const parentNodeId = currentPage.getAttribute('data-parent-node'); if (!parentNodeId) { console.warn('Keine übergeordnete Node-ID gefunden, zeige die Hauptmindmap an'); // Blende das aktuelle Cy-Element aus if (window.cy && window.cy.container()) { window.cy.container().style.display = 'block'; } // Entferne die aktuelle Seite currentPage.style.display = 'none'; setTimeout(() => { if (currentPage.parentNode) { currentPage.parentNode.removeChild(currentPage); } }, 300); return; } console.log('Navigiere zurück von Knoten:', parentNodeId); // Entferne die aktuelle Cytoscape-Instanz aus dem Array if (window.subthemeCyInstances && window.subthemeCyInstances[parentNodeId]) { try { if (typeof window.subthemeCyInstances[parentNodeId].destroy === 'function') { window.subthemeCyInstances[parentNodeId].destroy(); } delete window.subthemeCyInstances[parentNodeId]; } catch (e) { console.error('Fehler beim Zerstören der Cytoscape-Instanz:', e); } } // Prüfe, ob es eine übergeordnete Mindmap-Seite gibt const parentPage = document.querySelector(`.mindmap-page[data-parent-node]:not([data-parent-node="${parentNodeId}"])`); if (parentPage) { // Wenn eine übergeordnete Seite gefunden wurde, zeige sie an parentPage.style.display = 'block'; // Entferne die aktuelle Seite currentPage.style.display = 'none'; setTimeout(() => { if (currentPage.parentNode) { currentPage.parentNode.removeChild(currentPage); } }, 300); } else { // Wenn keine übergeordnete Seite gefunden wurde, zeige die Hauptmindmap an if (window.cy && window.cy.container()) { window.cy.container().style.display = 'block'; } // Entferne die aktuelle Seite currentPage.style.display = 'none'; setTimeout(() => { if (currentPage.parentNode) { currentPage.parentNode.removeChild(currentPage); } }, 300); } showUINotification('Zurück zur übergeordneten Mindmap', 'info'); } catch (error) { console.error('Fehler bei der Rücknavigation:', error); showUINotification('Fehler bei der Rücknavigation', 'error'); } } // CSS-Styles für die neue Seite const style = document.createElement('style'); style.textContent = ` .mindmap-page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color, #1a1a1a); z-index: 1000; } .mindmap-header { display: flex; align-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .back-button { background: none; border: none; color: #fff; cursor: pointer; padding: 0.5rem; margin-right: 1rem; border-radius: 50%; transition: background-color 0.3s; } .back-button:hover { background: rgba(255, 255, 255, 0.1); } .mindmap-title { color: #fff; font-size: 1.5rem; font-weight: 600; margin: 0; } .mindmap-view { width: 100%; height: calc(100% - 4rem); } /* Neuronale Effekte */ .cy-container { background: linear-gradient(45deg, #1a1a1a, #2a2a2a); } .cy-container node { transition: all 0.3s ease; } .cy-container node:hover { filter: brightness(1.2); } .cy-node-icon { position: absolute; pointer-events: none; z-index: 1001; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.25); } /* Verbesserte Flash-Benachrichtigungen */ #flash-messages { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 24rem; } .flash-message { padding: 1rem 1.25rem; border-radius: 0.5rem; background: rgba(17, 24, 39, 0.95); color: #fff; font-size: 0.875rem; line-height: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: translateX(120%); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); } .flash-message.show { transform: translateX(0); opacity: 1; } .flash-message.info { border-left: 4px solid #3b82f6; background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(17, 24, 39, 0.95)); } .flash-message.success { border-left: 4px solid #10b981; background: linear-gradient(to right, rgba(16, 185, 129, 0.1), rgba(17, 24, 39, 0.95)); } .flash-message.warning { border-left: 4px solid #f59e0b; background: linear-gradient(to right, rgba(245, 158, 11, 0.1), rgba(17, 24, 39, 0.95)); } .flash-message.error { border-left: 4px solid #ef4444; background: linear-gradient(to right, rgba(239, 68, 68, 0.1), rgba(17, 24, 39, 0.95)); } .flash-message::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .flash-message.show { animation: pulse 0.3s ease-in-out; } /* Neuronale Effekte für Benachrichtigungen */ .flash-message.info:hover { box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); } .flash-message.success:hover { box-shadow: 0 0 15px rgba(16, 185, 129, 0.3); } .flash-message.warning:hover { box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); } .flash-message.error:hover { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); } `; document.head.appendChild(style); // Initialisiere die Mindmap beim Laden der Seite document.addEventListener('DOMContentLoaded', initializeMindmap); // Funktion zum Aktivieren des Bearbeitungsmodus function enableMindmapEditing(nodeId) { try { console.log('Aktiviere Bearbeitungsmodus für Mindmap:', nodeId); // Finde die relevante Cytoscape-Instanz let targetCy; if (nodeId) { // Für Unterthemen if (window.subthemeCyInstances && window.subthemeCyInstances[nodeId]) { targetCy = window.subthemeCyInstances[nodeId]; } else { throw new Error(`Cytoscape-Instanz für Node ${nodeId} nicht gefunden`); } } else { // Für die Hauptmindmap targetCy = window.cy; } if (!targetCy) { throw new Error('Keine aktive Cytoscape-Instanz gefunden'); } // Aktiviere Bearbeitungsmodus toggleEditingMode(targetCy, true); // Zeige Bearbeitungssteuerungen an showEditingControls(nodeId); showUINotification('Bearbeitungsmodus aktiviert', 'info'); } catch (error) { console.error('Fehler beim Aktivieren des Bearbeitungsmodus:', error); showUINotification('Fehler beim Aktivieren des Bearbeitungsmodus', 'error'); } } // Funktion zum Deaktivieren des Bearbeitungsmodus function disableMindmapEditing(nodeId) { try { console.log('Deaktiviere Bearbeitungsmodus für Mindmap:', nodeId); // Finde die relevante Cytoscape-Instanz let targetCy; if (nodeId) { // Für Unterthemen if (window.subthemeCyInstances && window.subthemeCyInstances[nodeId]) { targetCy = window.subthemeCyInstances[nodeId]; } } else { // Für die Hauptmindmap targetCy = window.cy; } if (!targetCy) { throw new Error('Keine aktive Cytoscape-Instanz gefunden'); } // Deaktiviere Bearbeitungsmodus toggleEditingMode(targetCy, false); // Verstecke Bearbeitungssteuerungen hideEditingControls(nodeId); showUINotification('Bearbeitungsmodus deaktiviert', 'info'); } catch (error) { console.error('Fehler beim Deaktivieren des Bearbeitungsmodus:', error); showUINotification('Fehler beim Deaktivieren des Bearbeitungsmodus', 'error'); } } // Funktion zum Umschalten des Bearbeitungsmodus function toggleEditingMode(cy, enabled) { if (!cy) return; if (enabled) { // Mache Knoten beweglich cy.nodes().ungrabify(false); // Ändere den Cursor-Stil cy.container().classList.add('editing-mode'); // Aktiviere Ziehen und Ablegen cy.on('dragfree', 'node', function(event) { const node = event.target; console.log('Node verschoben:', node.id(), node.position()); // Hier könnte man die neue Position in der Datenbank speichern }); // Aktiviere Doppelklick zum Bearbeiten cy.on('dblclick', 'node', function(event) { const node = event.target; editNodeProperties(node); }); // Aktiviere Rechtsklick-Menü cy.on('cxttap', 'node', function(event) { const node = event.target; showNodeContextMenu(node, event.renderedPosition); }); // Aktiviere Rechtsklick auf leeren Bereich zum Hinzufügen neuer Knoten cy.on('cxttap', function(event) { if (event.target === cy) { showAddNodeMenu(event.renderedPosition); } }); } else { // Deaktiviere Bearbeitungsfunktionen cy.nodes().grabify(); cy.container().classList.remove('editing-mode'); cy.removeListener('dragfree'); cy.removeListener('dblclick'); cy.removeListener('cxttap'); } } // Funktion zum Anzeigen der Bearbeitungssteuerungen function showEditingControls(nodeId) { const container = nodeId ? document.getElementById(`cy-${nodeId}`).parentElement : document.getElementById('cy').parentElement; if (!container) return; // Erstelle Bearbeitungswerkzeuge, wenn sie noch nicht existieren let editingControls = container.querySelector('.editing-controls'); if (!editingControls) { editingControls = document.createElement('div'); editingControls.className = 'editing-controls'; editingControls.innerHTML = `
`; container.appendChild(editingControls); // Event-Listener für die Bearbeitungswerkzeuge hinzufügen const toolButtons = editingControls.querySelectorAll('.tool-button'); toolButtons.forEach(button => { button.addEventListener('click', function() { const action = this.getAttribute('data-action'); handleEditingAction(action, nodeId); }); }); } // Zeige die Steuerungen an editingControls.style.display = 'block'; } // Funktion zum Ausblenden der Bearbeitungssteuerungen function hideEditingControls(nodeId) { const container = nodeId ? document.getElementById(`cy-${nodeId}`).parentElement : document.getElementById('cy').parentElement; if (!container) return; const editingControls = container.querySelector('.editing-controls'); if (editingControls) { editingControls.style.display = 'none'; } } // Funktion zum Verarbeiten von Bearbeitungsaktionen function handleEditingAction(action, nodeId) { console.log('Bearbeitungsaktion:', action, 'für NodeId:', nodeId); // Finde die relevante Cytoscape-Instanz const cy = nodeId ? (window.subthemeCyInstances && window.subthemeCyInstances[nodeId]) : window.cy; if (!cy) { console.error('Keine Cytoscape-Instanz gefunden'); return; } switch (action) { case 'add-node': addNewNode(cy); break; case 'add-edge': enableEdgeCreationMode(cy); break; case 'delete': deleteSelectedElements(cy); break; case 'save': saveMindmapChanges(cy, nodeId); break; default: console.warn('Unbekannte Aktion:', action); } } // Funktion zum Hinzufügen eines neuen Knotens function addNewNode(cy) { // Zentriere den neuen Knoten im sichtbaren Bereich const extent = cy.extent(); const centerX = (extent.x1 + extent.x2) / 2; const centerY = (extent.y1 + extent.y2) / 2; // Generiere eine eindeutige ID const newId = 'new-node-' + Date.now(); // Füge den neuen Knoten hinzu cy.add({ group: 'nodes', data: { id: newId, label: 'Neuer Knoten', category: 'Wissenschaft', description: 'Beschreibung hinzufügen', hasChildren: false, expanded: false, color: mindmapConfig.categories['Wissenschaft'].color, fontColor: '#ffffff', fontSize: 16, neuronSize: 8, neuronActivity: 0.8 }, position: { x: centerX, y: centerY } }); // Wähle den neuen Knoten aus, um ihn zu bearbeiten const newNode = cy.getElementById(newId); newNode.select(); // Öffne den Bearbeitungsdialog für den neuen Knoten setTimeout(() => { editNodeProperties(newNode); }, 300); } // Funktion zum Bearbeiten von Knoteneigenschaften function editNodeProperties(node) { if (!node) return; // Erstelle den Modal-Hintergrund const backdrop = document.createElement('div'); backdrop.className = 'modal-backdrop'; document.body.appendChild(backdrop); // Erstelle den Bearbeitungsdialog const dialog = document.createElement('div'); dialog.className = 'node-edit-dialog'; // Hole die aktuellen Daten des Knotens const data = node.data(); // Generiere die Kategorie-Optionen let categoryOptions = ''; for (const category in mindmapConfig.categories) { categoryOptions += ``; } // Erstelle das Formular dialog.innerHTML = `

Knoten bearbeiten

`; document.body.appendChild(dialog); // Event-Listener für den Abbrechen-Button dialog.querySelector('button.cancel').addEventListener('click', function() { document.body.removeChild(dialog); document.body.removeChild(backdrop); }); // Event-Listener für den Modal-Hintergrund backdrop.addEventListener('click', function() { document.body.removeChild(dialog); document.body.removeChild(backdrop); }); // Event-Listener für das Formular dialog.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // Hole die neuen Werte aus dem Formular const label = document.getElementById('node-label').value; const category = document.getElementById('node-category').value; const description = document.getElementById('node-description').value; const hasChildren = document.getElementById('node-has-children').value === 'true'; // Bestimme die Farbe basierend auf der Kategorie const color = mindmapConfig.categories[category]?.color || data.color || '#60a5fa'; // Aktualisiere die Daten des Knotens node.data({ ...data, label, category, description, hasChildren, color }); // Schließe den Dialog document.body.removeChild(dialog); document.body.removeChild(backdrop); // Benachrichtigung anzeigen showUINotification('Knoten wurde aktualisiert', 'success'); }); } // Funktion zum Anzeigen des Kontext-Menüs für einen Knoten function showNodeContextMenu(node, position) { if (!node) return; // Entferne existierende Kontext-Menüs const existingMenu = document.querySelector('.context-menu'); if (existingMenu) { existingMenu.parentNode.removeChild(existingMenu); } // Erstelle das Kontext-Menü const menu = document.createElement('div'); menu.className = 'context-menu'; menu.style.left = `${position.x}px`; menu.style.top = `${position.y}px`; // Menü-Einträge menu.innerHTML = `
Bearbeiten
Verbindung erstellen
Löschen
`; document.body.appendChild(menu); // Event-Listener für Menü-Einträge menu.querySelectorAll('.context-menu-item').forEach(item => { item.addEventListener('click', function() { const action = this.getAttribute('data-action'); switch (action) { case 'edit': editNodeProperties(node); break; case 'connect': startEdgeCreation(node); break; case 'delete': deleteNode(node); break; } // Entferne das Menü document.body.removeChild(menu); }); }); // Klick außerhalb des Menüs schließt es document.addEventListener('click', function closeMenu(e) { if (!menu.contains(e.target)) { if (document.body.contains(menu)) { document.body.removeChild(menu); } document.removeEventListener('click', closeMenu); } }); } // Funktion zum Anzeigen des Menüs zum Hinzufügen eines Knotens function showAddNodeMenu(position) { // Entferne existierende Kontext-Menüs const existingMenu = document.querySelector('.context-menu'); if (existingMenu) { existingMenu.parentNode.removeChild(existingMenu); } // Erstelle das Kontext-Menü const menu = document.createElement('div'); menu.className = 'context-menu'; menu.style.left = `${position.x}px`; menu.style.top = `${position.y}px`; // Kategorie-Einträge für neue Knoten let categoryItems = ''; for (const category in mindmapConfig.categories) { const categoryConfig = mindmapConfig.categories[category]; categoryItems += `
${category}
`; } // Menü-Einträge menu.innerHTML = `
Neuen Knoten hinzufügen
${categoryItems} `; document.body.appendChild(menu); // Event-Listener für Kategorie-Einträge menu.querySelectorAll('.context-menu-item').forEach(item => { item.addEventListener('click', function() { const category = this.getAttribute('data-category'); // Füge einen neuen Knoten an der Position hinzu addNewNodeAtPosition(cy, position, category); // Entferne das Menü document.body.removeChild(menu); }); }); // Klick außerhalb des Menüs schließt es document.addEventListener('click', function closeMenu(e) { if (!menu.contains(e.target)) { if (document.body.contains(menu)) { document.body.removeChild(menu); } document.removeEventListener('click', closeMenu); } }); } // Funktion zum Hinzufügen eines neuen Knotens an einer bestimmten Position function addNewNodeAtPosition(cy, position, category) { if (!cy) return; // Berechne die Modellposition (statt der gerenderten Position) const modelPosition = cy.renderer().projectIntoViewport(position.x, position.y); // Generiere eine eindeutige ID const newId = 'new-node-' + Date.now(); // Hole die Kategorie-Konfiguration const categoryConfig = mindmapConfig.categories[category] || mindmapConfig.categories['Wissenschaft']; // Füge den neuen Knoten hinzu cy.add({ group: 'nodes', data: { id: newId, label: 'Neuer ' + category + '-Knoten', category: category, description: categoryConfig.description || 'Beschreibung hinzufügen', hasChildren: false, expanded: false, color: categoryConfig.color, fontColor: '#ffffff', fontSize: 16, neuronSize: 8, neuronActivity: 0.8 }, position: { x: modelPosition[0], y: modelPosition[1] } }); // Wähle den neuen Knoten aus, um ihn zu bearbeiten const newNode = cy.getElementById(newId); newNode.select(); // Öffne den Bearbeitungsdialog für den neuen Knoten setTimeout(() => { editNodeProperties(newNode); }, 300); } // Funktion zum Starten der Erstellung einer Kante function startEdgeCreation(sourceNode) { if (!sourceNode) return; const cy = sourceNode.cy(); if (!cy) return; // Markiere den Quellknoten sourceNode.addClass('edge-source'); // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu cy.container().classList.add('edge-creation-mode'); // Zeige Hinweis an showUINotification('Wähle einen Zielknoten für die Verbindung', 'info'); // Einmaliger Event-Listener für das Auswählen des Zielknotens cy.once('tap', 'node', function(evt) { const targetNode = evt.target; // Ignoriere, wenn es der gleiche Knoten ist if (targetNode.id() === sourceNode.id()) { showUINotification('Quell- und Zielknoten dürfen nicht identisch sein', 'warning'); finishEdgeCreation(); return; } // Prüfe, ob bereits eine Kante existiert const existingEdge = cy.edges(`[source="${sourceNode.id()}"][target="${targetNode.id()}"]`); if (existingEdge.length > 0) { showUINotification('Verbindung existiert bereits', 'warning'); finishEdgeCreation(); return; } // Füge die neue Kante hinzu cy.add({ group: 'edges', data: { source: sourceNode.id(), target: targetNode.id(), strength: 0.5, conductionVelocity: Math.random() * 0.5 + 0.3, latency: Math.random() * 100 + 50 } }); showUINotification('Verbindung wurde erstellt', 'success'); finishEdgeCreation(); }); // Event-Listener für Abbruch durch Klick auf leeren Bereich cy.once('tap', function(evt) { if (evt.target === cy) { showUINotification('Kantenerstellung abgebrochen', 'info'); finishEdgeCreation(); } }); function finishEdgeCreation() { sourceNode.removeClass('edge-source'); cy.container().classList.remove('edge-creation-mode'); } } // Funktion zum Aktivieren des Kantenerstellungsmodus function enableEdgeCreationMode(cy) { if (!cy) return; // Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu cy.container().classList.add('edge-creation-mode'); // Zeige Hinweis an showUINotification('Wähle einen Quellknoten für die Verbindung', 'info'); // Einmaliger Event-Listener für das Auswählen des Quellknotens cy.once('tap', 'node', function(evt) { const sourceNode = evt.target; startEdgeCreation(sourceNode); }); // Event-Listener für Abbruch durch Rechtsklick oder Escape-Taste const cancelEdgeCreation = function() { cy.container().classList.remove('edge-creation-mode'); cy.removeListener('tap'); showUINotification('Kantenerstellung abgebrochen', 'info'); }; cy.once('cxttap', cancelEdgeCreation); document.addEventListener('keydown', function escKeyHandler(e) { if (e.key === 'Escape') { cancelEdgeCreation(); document.removeEventListener('keydown', escKeyHandler); } }); } // Funktion zum Löschen eines Knotens function deleteNode(node) { if (!node) return; // 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'); } } // Funktion zum Löschen ausgewählter Elemente function deleteSelectedElements(cy) { if (!cy) return; const selectedElements = cy.elements(':selected'); if (selectedElements.length === 0) { showUINotification('Keine Elemente ausgewählt', 'warning'); return; } // Zähle die ausgewählten Knoten und Kanten const selectedNodes = selectedElements.filter('node'); const selectedEdges = selectedElements.filter('edge'); let confirmMessage = 'Möchtest du die ausgewählten Elemente wirklich löschen?'; if (selectedNodes.length > 0 && selectedEdges.length > 0) { confirmMessage = `Möchtest du ${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wirklich löschen?`; } else if (selectedNodes.length > 0) { confirmMessage = `Möchtest du ${selectedNodes.length} Knoten wirklich löschen?`; } else if (selectedEdges.length > 0) { confirmMessage = `Möchtest du ${selectedEdges.length} Verbindungen wirklich löschen?`; } // Frage den Benutzer, ob er die ausgewählten Elemente wirklich löschen möchte if (confirm(confirmMessage)) { // Entferne die ausgewählten Elemente selectedElements.remove(); let successMessage = 'Elemente wurden gelöscht'; if (selectedNodes.length > 0 && selectedEdges.length > 0) { successMessage = `${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wurden gelöscht`; } else if (selectedNodes.length > 0) { successMessage = `${selectedNodes.length} Knoten wurden gelöscht`; } else if (selectedEdges.length > 0) { successMessage = `${selectedEdges.length} Verbindungen wurden gelöscht`; } showUINotification(successMessage, 'success'); } } // Funktion zum Speichern der Änderungen an der Mindmap function saveMindmapChanges(cy, nodeId) { if (!cy) return; // Sammle die Daten aller Knoten und Kanten const nodes = []; const edges = []; cy.nodes().forEach(node => { const data = node.data(); const position = node.position(); nodes.push({ id: data.id, name: data.label, category: data.category, description: data.description, has_children: data.hasChildren, color_code: data.color, position_x: position.x, position_y: position.y }); }); cy.edges().forEach(edge => { const data = edge.data(); edges.push({ source: data.source, target: data.target, strength: data.strength }); }); // Erstelle die Daten für den API-Aufruf const saveData = { nodes: nodes, edges: edges, parent_id: nodeId || null }; console.log('Speichere Mindmap-Änderungen:', saveData); // Zeige eine Speicherbenachrichtigung an showUINotification('Speichere Mindmap-Änderungen...', 'info'); // Sende die Daten an den Server fetch('/api/mindmap/save', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(saveData) }) .then(response => { if (!response.ok) { return response.json().then(data => { throw new Error(data.error || `Fehler ${response.status}: ${response.statusText}`); }); } return response.json(); }) .then(data => { console.log('Speichern erfolgreich:', data); showUINotification('Mindmap wurde erfolgreich gespeichert', 'success'); }) .catch(error => { console.error('Fehler beim Speichern der Mindmap:', error); showUINotification({ error: 'Fehler beim Speichern der Mindmap', details: error.message }, 'error'); }); } // Füge CSS-Stile für den Bearbeitungsmodus hinzu const editingStyles = document.createElement('style'); editingStyles.textContent = ` /* Bearbeitungsmodus-Cursor */ .editing-mode { cursor: grab !important; } .editing-mode:active { cursor: grabbing !important; } /* Bearbeitungssteuerungen */ .editing-controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1010; display: none; } .editing-toolbar { display: flex; background: rgba(30, 41, 59, 0.85); border-radius: 8px; padding: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); } .tool-button { background: rgba(255, 255, 255, 0.1); border: none; color: white; width: 40px; height: 40px; border-radius: 6px; margin: 0 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .tool-button:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .tool-button:active { transform: translateY(0); } .tool-button[data-action="add-node"] { background: rgba(16, 185, 129, 0.2); } .tool-button[data-action="add-edge"] { background: rgba(59, 130, 246, 0.2); } .tool-button[data-action="delete"] { background: rgba(239, 68, 68, 0.2); } .tool-button[data-action="save"] { background: rgba(245, 158, 11, 0.2); } /* Node-Bearbeitungsdialog */ .node-edit-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(30, 41, 59, 0.95); border-radius: 12px; padding: 20px; width: 400px; max-width: 90vw; z-index: 2000; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); } .node-edit-dialog h3 { margin-top: 0; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; color: #e2e8f0; font-size: 0.9rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px 12px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: white; font-size: 0.95rem; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } .form-actions button { padding: 8px 16px; border-radius: 6px; border: none; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .form-actions button.save { background: #8b5cf6; color: white; } .form-actions button.cancel { background: rgba(255, 255, 255, 0.1); color: white; } .form-actions button:hover { transform: translateY(-2px); } /* Kontext-Menü */ .context-menu { position: absolute; background: rgba(30, 41, 59, 0.95); border-radius: 8px; padding: 8px 0; min-width: 160px; z-index: 2000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); } .context-menu-item { padding: 8px 16px; color: white; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; gap: 8px; } .context-menu-item:hover { background: rgba(255, 255, 255, 0.1); } .context-menu-item svg { width: 16px; height: 16px; } /* Modal-Hintergrund */ .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1999; backdrop-filter: blur(2px); } /* Edge-Erstellungsmodus */ .edge-creation-mode { cursor: crosshair !important; } /* Erweiterte Mindmap-Seite */ .mindmap-header { display: flex; align-items: center; justify-content: space-between; } .mindmap-actions { display: flex; gap: 10px; } .edit-button { display: flex; align-items: center; gap: 6px; background: rgba(139, 92, 246, 0.2); border: none; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .edit-button:hover { background: rgba(139, 92, 246, 0.3); transform: translateY(-2px); } .edit-button svg { opacity: 0.8; } `; document.head.appendChild(editingStyles);