1767 lines
58 KiB
JavaScript
1767 lines
58 KiB
JavaScript
/**
|
|
* 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:', 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 = errorData.error || 'Unbekannter Fehler';
|
|
|
|
showUINotification(errorMessage, 'error');
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('Geladene Mindmap-Daten:', data);
|
|
|
|
if (!data.success) {
|
|
const errorMessage = data.error || 'Mindmap-Daten konnten nicht geladen werden';
|
|
showUINotification(errorMessage, 'error');
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
// Überprüfen, ob Nodes und Edges existieren
|
|
if (!data.nodes || !data.edges) {
|
|
const errorMessage = 'Ungültiges Datenformat: Nodes oder Edges fehlen';
|
|
showUINotification(errorMessage, 'error');
|
|
throw new Error(errorMessage);
|
|
}
|
|
|
|
// 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:', error);
|
|
|
|
// Stelle sicher, dass wir eine aussagekräftige Fehlermeldung haben
|
|
const errorMessage = error.message || 'Unbekannter Fehler beim Laden der Mindmap-Daten';
|
|
|
|
showUINotification(errorMessage, 'error');
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Implementiert Zoomfunktionalität für die Mindmap
|
|
* @param {Object} cy - Cytoscape-Instanz
|
|
*/
|
|
function implementZoomFunctions(cy) {
|
|
if (!cy) {
|
|
console.error('Cytoscape-Instanz nicht gefunden!');
|
|
return;
|
|
}
|
|
|
|
// Vergrößern-Button
|
|
const zoomInButton = document.getElementById('zoomIn');
|
|
if (zoomInButton) {
|
|
zoomInButton.addEventListener('click', function() {
|
|
cy.zoom(cy.zoom() * 1.2);
|
|
cy.center();
|
|
showUINotification('Ansicht vergrößert', 'info', 1500);
|
|
});
|
|
}
|
|
|
|
// Verkleinern-Button
|
|
const zoomOutButton = document.getElementById('zoomOut');
|
|
if (zoomOutButton) {
|
|
zoomOutButton.addEventListener('click', function() {
|
|
cy.zoom(cy.zoom() * 0.8);
|
|
cy.center();
|
|
showUINotification('Ansicht verkleinert', 'info', 1500);
|
|
});
|
|
}
|
|
|
|
// Zurücksetzen-Button
|
|
const resetViewButton = document.getElementById('resetView');
|
|
if (resetViewButton) {
|
|
resetViewButton.addEventListener('click', function() {
|
|
cy.fit();
|
|
cy.center();
|
|
showUINotification('Ansicht zurückgesetzt', 'info', 1500);
|
|
});
|
|
}
|
|
|
|
// Legende-Button
|
|
const toggleLegendButton = document.getElementById('toggleLegend');
|
|
const categoryLegend = document.getElementById('categoryLegend');
|
|
|
|
if (toggleLegendButton && categoryLegend) {
|
|
toggleLegendButton.addEventListener('click', function() {
|
|
if (categoryLegend.style.display === 'none') {
|
|
categoryLegend.style.display = 'flex';
|
|
showUINotification('Legende angezeigt', 'info', 1500);
|
|
} else {
|
|
categoryLegend.style.display = 'none';
|
|
showUINotification('Legende ausgeblendet', 'info', 1500);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Funktion zum Starten der Mindmap-Anwendung
|
|
*/
|
|
async function startMindmapApp() {
|
|
try {
|
|
const loader = document.getElementById('loader');
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
const cyContainer = document.getElementById('cy');
|
|
|
|
if (!cyContainer) {
|
|
throw new Error('Cytoscape-Container nicht gefunden');
|
|
}
|
|
|
|
// Anzeigen der Ladeanzeige
|
|
if (loader) loader.style.display = 'block';
|
|
if (statusMessage) {
|
|
statusMessage.textContent = 'Lade Mindmap...';
|
|
statusMessage.style.display = 'block';
|
|
}
|
|
|
|
// Initialisieren der Mindmap
|
|
const cy = await initializeMindmap();
|
|
window.cy = cy; // Speichern für globalen Zugriff
|
|
|
|
// Zoom-Funktionen und Legendensteuerung implementieren
|
|
implementZoomFunctions(cy);
|
|
|
|
// Verstecken der Ladeanzeige
|
|
if (loader) loader.style.display = 'none';
|
|
if (statusMessage) statusMessage.style.display = 'none';
|
|
|
|
return cy;
|
|
} catch (error) {
|
|
console.error('Fehler beim Starten der Mindmap-Anwendung:', error);
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
|
|
if (statusMessage) {
|
|
statusMessage.textContent = 'Fehler beim Laden der Mindmap: ' + error.message;
|
|
statusMessage.style.display = 'block';
|
|
}
|
|
|
|
const loader = document.getElementById('loader');
|
|
if (loader) loader.style.display = 'none';
|
|
|
|
showUINotification('Fehler beim Laden der Mindmap: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Eventlistener für DOM-Ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOM vollständig geladen, starte Mindmap-Anwendung');
|
|
startMindmapApp();
|
|
});
|
|
|
|
// 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,
|
|
color: getCategoryColor(node.category)
|
|
}
|
|
})),
|
|
// Kanten
|
|
...data.edges.map(edge => ({
|
|
data: {
|
|
id: edge.id,
|
|
source: edge.source,
|
|
target: edge.target,
|
|
strength: edge.weight || 1.0
|
|
}
|
|
}))
|
|
];
|
|
|
|
// Cytoscape-Container
|
|
const cyContainer = document.getElementById('cy');
|
|
if (!cyContainer) {
|
|
throw new Error('Cytoscape-Container nicht gefunden');
|
|
}
|
|
|
|
// Cytoscape initialisieren
|
|
const cy = cytoscape({
|
|
container: cyContainer,
|
|
elements: elements,
|
|
style: [
|
|
// Knoten-Styling
|
|
{
|
|
selector: 'node',
|
|
style: mindmapStyles.node.base
|
|
},
|
|
// Kanten-Styling
|
|
{
|
|
selector: 'edge',
|
|
style: mindmapStyles.edge.base
|
|
},
|
|
// Ausgewählte Knoten
|
|
{
|
|
selector: 'node:selected',
|
|
style: mindmapStyles.node.selected
|
|
}
|
|
],
|
|
layout: mindmapStyles.layout.base
|
|
});
|
|
|
|
// Event-Listener für Knoten-Interaktionen
|
|
cy.on('tap', 'node', function(evt) {
|
|
const node = evt.target;
|
|
showNodeInfo(node);
|
|
});
|
|
|
|
// UI aktualisieren
|
|
document.getElementById('loader').style.display = 'none';
|
|
document.getElementById('statusMessage').style.display = 'none';
|
|
|
|
// Neurales Design anwenden
|
|
initializeNeuralDesign(cy);
|
|
|
|
// Gebe die Cytoscape-Instanz zurück
|
|
return cy;
|
|
} catch (error) {
|
|
console.error('Fehler beim Initialisieren der Mindmap:', error);
|
|
document.getElementById('statusMessage').textContent = 'Fehler: ' + error.message;
|
|
document.getElementById('statusMessage').style.display = 'block';
|
|
document.getElementById('loader').style.display = 'none';
|
|
|
|
showUINotification('Fehler beim Initialisieren der Mindmap: ' + error.message, 'error');
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gibt die Farbe für eine Kategorie zurück
|
|
* @param {string} category - Die Kategorie
|
|
* @returns {string} - Die Farbe als Hex-Code
|
|
*/
|
|
function getCategoryColor(category) {
|
|
const categoryMap = {
|
|
'Philosophie': '#9F7AEA', // Violett
|
|
'Wissenschaft': '#60A5FA', // Blau
|
|
'Technologie': '#10B981', // Grün
|
|
'Künste': '#F59E0B', // Orange
|
|
'Psychologie': '#EF4444' // Rot
|
|
};
|
|
|
|
return categoryMap[category] || '#8B5CF6'; // Standardfarbe, wenn Kategorie nicht gefunden
|
|
}
|
|
|
|
/**
|
|
* Zeigt Informationen zu einem Knoten an
|
|
* @param {Object} node - Der Knoten, dessen Informationen angezeigt werden sollen
|
|
*/
|
|
function showNodeInfo(node) {
|
|
if (!node || !node.isNode()) return;
|
|
|
|
const infoPanel = document.getElementById('infoPanel');
|
|
const infoTitle = infoPanel.querySelector('.info-title');
|
|
const infoContent = infoPanel.querySelector('.info-content');
|
|
|
|
if (!infoPanel || !infoTitle || !infoContent) return;
|
|
|
|
const data = node.data();
|
|
|
|
infoTitle.textContent = data.label || 'Knotendetails';
|
|
|
|
let contentHTML = `
|
|
<p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
|
|
<p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
|
|
`;
|
|
|
|
infoContent.innerHTML = contentHTML;
|
|
infoPanel.classList.add('visible');
|
|
}
|
|
|
|
// Funktion zum Initialisieren des neuronalen Designs
|
|
function initializeNeuralDesign(cy) {
|
|
if (!cy) return;
|
|
|
|
console.log('Initialisiere neurales Design für Mindmap');
|
|
|
|
// Füge neurale Eigenschaften zu allen Knoten hinzu
|
|
cy.nodes().forEach(node => {
|
|
const data = node.data();
|
|
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
|
|
});
|
|
});
|
|
|
|
// 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 neurales Netzwerk-Styling an
|
|
applyNeuralNetworkStyle(cy);
|
|
|
|
// Starte Simulation der neuronalen Aktivität
|
|
startNeuralActivitySimulation(cy);
|
|
|
|
return cy;
|
|
}
|
|
|
|
// Funktionen für das neurale Netzwerk-Design
|
|
function applyNeuralNetworkStyle(cy) {
|
|
if (!cy) return;
|
|
|
|
// Animation für pulsierende Knoten
|
|
const pulseKeyframes = [
|
|
{ scale: 1.0, opacity: 0.8, borderOpacity: 0.6 },
|
|
{ scale: 1.05, opacity: 1.0, borderOpacity: 0.9 },
|
|
{ scale: 1.0, opacity: 0.8, borderOpacity: 0.6 }
|
|
];
|
|
|
|
// Anwenden auf alle Knoten
|
|
cy.nodes().forEach(node => {
|
|
const randomDelay = Math.random() * 3000;
|
|
|
|
// CSS-Animationen auf die Knoten anwenden
|
|
node.style({
|
|
'border-width': 3,
|
|
'border-opacity': 0.6,
|
|
'background-opacity': 0.8,
|
|
'transition-property': 'background-opacity, border-opacity, width, height',
|
|
'transition-duration': '300ms'
|
|
});
|
|
|
|
// Pulseffekt mit zufälligem Delay starten
|
|
setTimeout(() => {
|
|
node.animate({
|
|
style: pulseKeyframes,
|
|
duration: 2000 + Math.random() * 1000,
|
|
complete: function() {
|
|
// Animation wiederholen
|
|
this.loopAnimation = true;
|
|
if (this.loopAnimation) {
|
|
setTimeout(() => {
|
|
applyNeuralNetworkStyle(cy);
|
|
}, 100);
|
|
}
|
|
}
|
|
});
|
|
}, randomDelay);
|
|
});
|
|
}
|
|
|
|
// Simulation der neuronalen Aktivität
|
|
function startNeuralActivitySimulation(cy) {
|
|
if (!cy) return;
|
|
|
|
console.log('Starte Simulation der neuronalen Aktivität');
|
|
let isSimulationRunning = true;
|
|
|
|
// Funktion zur Simulation der neuronalen Aktivität
|
|
function simulateNeuralActivity() {
|
|
if (!isSimulationRunning) return;
|
|
|
|
const currentTime = Date.now();
|
|
|
|
// Wähle zufällige Knoten zum Feuern aus
|
|
const randomNode = cy.nodes()[Math.floor(Math.random() * cy.nodes().length)];
|
|
if (randomNode) {
|
|
fireNeuron(randomNode, { isPrimary: true }, currentTime);
|
|
}
|
|
|
|
// Wiederholung der Simulation
|
|
setTimeout(simulateNeuralActivity, 2000 + Math.random() * 3000);
|
|
}
|
|
|
|
// Funktion zum "Feuern" eines Neurons
|
|
function fireNeuron(node, state, currentTime) {
|
|
if (!node) return;
|
|
|
|
const data = node.data();
|
|
const lastFired = data.lastFired || 0;
|
|
const refractionPeriod = data.refractionPeriod || 1000;
|
|
|
|
// Prüfe, ob das Neuron feuerbereit ist (Refraktärzeit vorbei)
|
|
if (currentTime - lastFired < refractionPeriod && !state.isPrimary) {
|
|
return; // Neuron ist noch in Refraktärphase
|
|
}
|
|
|
|
// Aktualisiere "Letztes Feuern"-Zeitstempel
|
|
node.data('lastFired', currentTime);
|
|
|
|
// Visuellen Effekt des Feuerns anzeigen
|
|
node.animate({
|
|
style: {
|
|
'background-opacity': 1,
|
|
'border-opacity': 1,
|
|
'border-color': '#f59e42',
|
|
'border-width': 4
|
|
},
|
|
duration: 300,
|
|
complete: function() {
|
|
// Zurück zum Normalzustand
|
|
node.animate({
|
|
style: {
|
|
'background-opacity': 0.8,
|
|
'border-opacity': 0.6,
|
|
'border-color': '#ffffff',
|
|
'border-width': 3
|
|
},
|
|
duration: 500
|
|
});
|
|
|
|
// Signal an verbundene Knoten weitergeben
|
|
propagateSignal(node, currentTime);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Funktion zur Signalausbreitung zu verbundenen Knoten
|
|
function propagateSignal(sourceNode, currentTime) {
|
|
// Verbundene Kanten finden
|
|
const connectedEdges = sourceNode.outgoers('edge');
|
|
|
|
connectedEdges.forEach(edge => {
|
|
const targetNode = edge.target();
|
|
const data = edge.data();
|
|
const strength = data.strength || 0.5;
|
|
const conductionVelocity = data.conductionVelocity || 0.5;
|
|
const latency = data.latency || 100;
|
|
|
|
// Kante hervorheben (Signal fließt durch die Kante)
|
|
edge.animate({
|
|
style: {
|
|
'line-opacity': 1,
|
|
'width': 3
|
|
},
|
|
duration: 200,
|
|
complete: function() {
|
|
// Nach einer Verzögerung (Latenz), das Ziel-Neuron feuern lassen
|
|
setTimeout(() => {
|
|
edge.animate({
|
|
style: {
|
|
'line-opacity': data.strength ? data.strength * 0.6 : 0.4,
|
|
'width': data.strength ? data.strength * 2 : 1
|
|
},
|
|
duration: 300
|
|
});
|
|
|
|
// Ziel-Neuron feuern lassen mit Wahrscheinlichkeit basierend auf Stärke
|
|
if (Math.random() < strength) {
|
|
fireNeuron(targetNode, { isPrimary: false }, currentTime + latency);
|
|
}
|
|
}, latency / conductionVelocity);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Starte die Simulation
|
|
simulateNeuralActivity();
|
|
|
|
// Funktion zum Stoppen der Simulation
|
|
cy.stopNeuralSimulation = function() {
|
|
isSimulationRunning = false;
|
|
};
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
|
|
// Hilfe-Funktion zum Hinzufügen eines Flash-Hinweises
|
|
function showFlash(message, type = 'info') {
|
|
const flash = document.createElement('div');
|
|
flash.className = `flash-message ${type}`;
|
|
flash.innerHTML = `
|
|
<div class="flex items-center">
|
|
<i class="fas ${type === 'error' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-2"></i>
|
|
<span>${message}</span>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(flash);
|
|
|
|
// Animation zum Einblenden
|
|
setTimeout(() => {
|
|
flash.classList.add('visible');
|
|
}, 10);
|
|
|
|
// Automatisches Ausblenden nach 3 Sekunden
|
|
setTimeout(() => {
|
|
flash.classList.remove('visible');
|
|
setTimeout(() => {
|
|
document.body.removeChild(flash);
|
|
}, 300);
|
|
}, 3000);
|
|
}
|
|
|
|
/**
|
|
* Zeigt eine UI-Benachrichtigung
|
|
* @param {string} message - Die Nachricht
|
|
* @param {string} type - Der Typ der Benachrichtigung (info, success, warning, error)
|
|
* @param {number} duration - Die Anzeigedauer in Millisekunden
|
|
*/
|
|
function showUINotification(message, type = 'info', duration = 3000) {
|
|
// Prüfe, ob Toast-Container existiert, sonst erstellen
|
|
let toastContainer = document.getElementById('toast-container');
|
|
|
|
if (!toastContainer) {
|
|
toastContainer = document.createElement('div');
|
|
toastContainer.id = 'toast-container';
|
|
toastContainer.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
|
|
document.body.appendChild(toastContainer);
|
|
}
|
|
|
|
// Erstelle Toast-Element
|
|
const toast = document.createElement('div');
|
|
toast.className = 'toast-message transform transition-all duration-300 ease-out translate-x-full';
|
|
|
|
// Setze Styling basierend auf Typ
|
|
let iconClass = 'fa-info-circle';
|
|
let bgColorClass = 'bg-blue-500';
|
|
|
|
switch (type) {
|
|
case 'success':
|
|
iconClass = 'fa-check-circle';
|
|
bgColorClass = 'bg-green-500';
|
|
break;
|
|
case 'warning':
|
|
iconClass = 'fa-exclamation-circle';
|
|
bgColorClass = 'bg-yellow-500';
|
|
break;
|
|
case 'error':
|
|
iconClass = 'fa-exclamation-triangle';
|
|
bgColorClass = 'bg-red-500';
|
|
break;
|
|
}
|
|
|
|
// Inhalt des Toasts
|
|
toast.innerHTML = `
|
|
<div class="flex items-center p-3 rounded-lg shadow-lg ${bgColorClass} text-white">
|
|
<i class="fas ${iconClass} mr-2"></i>
|
|
<span>${message}</span>
|
|
<button class="ml-auto pl-3 focus:outline-none hover:opacity-75">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
// Füge Toast zum Container hinzu
|
|
toastContainer.appendChild(toast);
|
|
|
|
// Animation zum Einblenden
|
|
setTimeout(() => {
|
|
toast.classList.remove('translate-x-full');
|
|
}, 10);
|
|
|
|
// Schließen-Button-Funktionalität
|
|
const closeButton = toast.querySelector('button');
|
|
closeButton.addEventListener('click', () => {
|
|
removeToast(toast);
|
|
});
|
|
|
|
// Automatisches Ausblenden nach der angegebenen Dauer
|
|
const timeoutId = setTimeout(() => {
|
|
removeToast(toast);
|
|
}, duration);
|
|
|
|
// Funktion zum Entfernen des Toasts
|
|
function removeToast(toastElement) {
|
|
// Animation zum Ausblenden
|
|
toastElement.classList.add('translate-x-full');
|
|
|
|
// Entfernen nach Abschluss der Animation
|
|
setTimeout(() => {
|
|
if (toastElement.parentNode === toastContainer) {
|
|
toastContainer.removeChild(toastElement);
|
|
}
|
|
|
|
// Entferne Container, wenn keine Toasts mehr vorhanden sind
|
|
if (toastContainer.children.length === 0) {
|
|
document.body.removeChild(toastContainer);
|
|
}
|
|
}, 300);
|
|
|
|
// Timeout löschen
|
|
clearTimeout(timeoutId);
|
|
}
|
|
}
|
|
|
|
// 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 = `
|
|
<div class="editing-toolbar">
|
|
<button class="tool-button" data-action="add-node" title="Neuen Knoten hinzufügen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="8" x2="12" y2="16"></line>
|
|
<line x1="8" y1="12" x2="16" y2="12"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="tool-button" data-action="add-edge" title="Verbindung hinzufügen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="tool-button" data-action="delete" title="Löschen">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="tool-button" data-action="save" title="Änderungen speichern">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
|
|
<polyline points="17 21 17 13 7 13 7 21"></polyline>
|
|
<polyline points="7 3 7 8 15 8"></polyline>
|
|
</svg>
|
|
</button>
|
|
<button class="tool-button" data-action="cancel" title="Bearbeitungsmodus beenden" onclick="disableMindmapEditing('${nodeId || ''}')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="15" y1="9" x2="9" y2="15"></line>
|
|
<line x1="9" y1="9" x2="15" y2="15"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
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 += `<option value="${category}" ${data.category === category ? 'selected' : ''}>${category}</option>`;
|
|
}
|
|
|
|
// Erstelle das Formular
|
|
dialog.innerHTML = `
|
|
<h3>Knoten bearbeiten</h3>
|
|
<form id="node-edit-form">
|
|
<div class="form-group">
|
|
<label for="node-label">Bezeichnung</label>
|
|
<input type="text" id="node-label" value="${data.label || ''}" placeholder="Knotenbezeichnung">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="node-category">Kategorie</label>
|
|
<select id="node-category">
|
|
${categoryOptions}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="node-description">Beschreibung</label>
|
|
<textarea id="node-description" rows="3" placeholder="Beschreibung hinzufügen">${data.description || ''}</textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="node-has-children">Hat Unterthemen</label>
|
|
<select id="node-has-children">
|
|
<option value="true" ${data.hasChildren ? 'selected' : ''}>Ja</option>
|
|
<option value="false" ${!data.hasChildren ? 'selected' : ''}>Nein</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="cancel">Abbrechen</button>
|
|
<button type="submit" class="save">Speichern</button>
|
|
</div>
|
|
</form>
|
|
`;
|
|
|
|
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 = `
|
|
<div class="context-menu-item" data-action="edit">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
|
</svg>
|
|
Bearbeiten
|
|
</div>
|
|
<div class="context-menu-item" data-action="connect">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
|
<polyline points="15 3 21 3 21 9"></polyline>
|
|
<line x1="10" y1="14" x2="21" y2="3"></line>
|
|
</svg>
|
|
Verbindung erstellen
|
|
</div>
|
|
<div class="context-menu-item" data-action="delete">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
|
</svg>
|
|
Löschen
|
|
</div>
|
|
`;
|
|
|
|
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 += `
|
|
<div class="context-menu-item" data-category="${category}" style="color: ${categoryConfig.color}">
|
|
<i class="${categoryConfig.icon}"></i>
|
|
${category}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Menü-Einträge
|
|
menu.innerHTML = `
|
|
<div class="context-menu-header" style="padding: 8px 16px; font-size: 0.9rem; opacity: 0.7;">Neuen Knoten hinzufügen</div>
|
|
${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);
|