/**
* 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
*/
// Mock-Datenbank für Subthemen (später durch echte DB-Abfragen ersetzen)
const subthemesDatabase = {
'philosophy': [
{
id: 'epistemology',
label: 'Erkenntnistheorie',
category: 'Philosophie',
description: 'Untersuchung der Natur und Grenzen menschlicher Erkenntnis',
hasChildren: true
},
{
id: 'ethics',
label: 'Ethik',
category: 'Philosophie',
description: 'Lehre vom moralisch richtigen Handeln',
hasChildren: true
},
{
id: 'metaphysics',
label: 'Metaphysik',
category: 'Philosophie',
description: 'Grundfragen des Seins und der Wirklichkeit',
hasChildren: true
}
],
'science': [
{
id: 'physics',
label: 'Physik',
category: 'Wissenschaft',
description: 'Lehre von der Materie und ihren Wechselwirkungen',
hasChildren: true
},
{
id: 'biology',
label: 'Biologie',
category: 'Wissenschaft',
description: 'Lehre von den Lebewesen und ihren Lebensprozessen',
hasChildren: true
},
{
id: 'chemistry',
label: 'Chemie',
category: 'Wissenschaft',
description: 'Wissenschaft von den Stoffen und ihren Reaktionen',
hasChildren: true
}
],
'technology': [
{
id: 'ai',
label: 'Künstliche Intelligenz',
category: 'Technologie',
description: 'Maschinelles Lernen und intelligente Systeme',
hasChildren: true
},
{
id: 'robotics',
label: 'Robotik',
category: 'Technologie',
description: 'Entwicklung und Steuerung von Robotern',
hasChildren: true
},
{
id: 'quantum_computing',
label: 'Quantencomputing',
category: 'Technologie',
description: 'Computer basierend auf Quantenmechanik',
hasChildren: true
}
],
'arts': [
{
id: 'visual_arts',
label: 'Bildende Kunst',
category: 'Künste',
description: 'Malerei, Bildhauerei und andere visuelle Kunstformen',
hasChildren: true
},
{
id: 'music',
label: 'Musik',
category: 'Künste',
description: 'Tonkunst und musikalische Komposition',
hasChildren: true
},
{
id: 'literature',
label: 'Literatur',
category: 'Künste',
description: 'Schriftliche Kunstwerke und Poesie',
hasChildren: true
}
]
};
// Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL)
const categoryIcons = {
'Philosophie': 'fa-solid fa-lightbulb',
'Wissenschaft': 'fa-solid fa-atom',
'Technologie': 'fa-solid fa-microchip',
'Künste': 'fa-solid fa-palette',
'Psychologie': 'fa-solid fa-brain'
};
// Farben für Kategorien (wie im Bild)
const categoryColors = {
'Philosophie': '#b71c1c', // Rot
'Wissenschaft': '#f4b400', // Gelb
'Technologie': '#0d47a1', // Blau
'Künste': '#c2185b', // Pink
'Psychologie': '#009688' // Türkis
};
// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe)
const mindmapData = {
nodes: [
{
id: 'center',
label: 'Wissenskarte',
isCenter: true,
color: '#f5f5f5',
icon: 'fa-solid fa-circle',
fontColor: '#222',
fontSize: 22
},
{
id: 'philosophy',
label: 'Philosophie',
category: 'Philosophie',
description: 'Die Lehre vom Denken und der Erkenntnis',
hasChildren: true,
expanded: false,
neuronSize: 8,
neuronActivity: 0.8,
color: categoryColors['Philosophie'],
icon: categoryIcons['Philosophie'],
fontColor: '#fff',
fontSize: 18
},
{
id: 'science',
label: 'Wissenschaft',
category: 'Wissenschaft',
description: 'Systematische Erforschung der Natur und Gesellschaft',
hasChildren: true,
expanded: false,
neuronSize: 8,
neuronActivity: 0.8,
color: categoryColors['Wissenschaft'],
icon: categoryIcons['Wissenschaft'],
fontColor: '#fff',
fontSize: 18
},
{
id: 'technology',
label: 'Technologie',
category: 'Technologie',
description: 'Anwendung wissenschaftlicher Erkenntnisse',
hasChildren: true,
expanded: false,
neuronSize: 8,
neuronActivity: 0.8,
color: categoryColors['Technologie'],
icon: categoryIcons['Technologie'],
fontColor: '#fff',
fontSize: 18
},
{
id: 'arts',
label: 'Künste',
category: 'Künste',
description: 'Kreativer Ausdruck und künstlerische Gestaltung',
hasChildren: true,
expanded: false,
neuronSize: 8,
neuronActivity: 0.8,
color: categoryColors['Künste'],
icon: categoryIcons['Künste'],
fontColor: '#fff',
fontSize: 18
}
],
edges: [
{ source: 'center', target: 'philosophy', strength: 0.9 },
{ source: 'center', target: 'science', strength: 0.9 },
{ source: 'center', target: 'technology', strength: 0.9 },
{ source: 'center', target: 'arts', strength: 0.9 }
]
};
// 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');
// Beispiel-Daten entfernt, stattdessen große Mindmap-Daten verwenden
const elements = [
// Knoten
...mindmapData.nodes.map(node => ({
data: {
id: node.id,
label: node.label,
category: node.category,
description: node.description,
hasChildren: node.hasChildren,
expanded: node.expanded,
neuronSize: node.neuronSize,
neuronActivity: node.neuronActivity,
color: node.color,
icon: node.icon,
fontColor: node.fontColor,
fontSize: node.fontSize
}
})),
// Kanten
...mindmapData.edges.map(edge => ({
data: {
source: edge.source,
target: edge.target,
label: edge.label,
strength: edge.strength
}
}))
];
console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay
window.cy = cytoscape({
container: cyContainer,
elements: elements,
style: [
{
selector: 'node',
style: {
'background-color': 'data(color)',
'label': 'data(label)',
'color': 'data(fontColor)',
'text-valign': 'center',
'text-halign': 'center',
'font-size': 'data(fontSize)',
'width': 'mapData(neuronSize, 3, 10, 60, 110)',
'height': 'mapData(neuronSize, 3, 10, 60, 110)',
'border-width': 4,
'border-color': '#fff',
'border-opacity': 0.9,
'overlay-padding': 4,
'z-index': 10,
'shape': 'ellipse',
'background-opacity': 0.95,
'shadow-blur': 20,
'shadow-color': 'data(color)',
'shadow-opacity': 0.7,
'shadow-offset-x': 0,
'shadow-offset-y': 0,
'text-wrap': 'wrap',
'text-max-width': 90
}
},
{
selector: 'node[isCenter]','style': {
'background-color': '#f5f5f5',
'color': '#222',
'font-size': 22,
'border-width': 0,
'width': 120,
'height': 120
}
},
{
selector: 'node:selected',
style: {
'border-color': '#f59e42',
'border-width': 6,
'shadow-blur': 30,
'shadow-opacity': 0.9
}
},
{
selector: 'edge',
style: {
'width': 'mapData(strength, 0.2, 1, 3, 7)',
'line-color': '#bdbdbd',
'line-opacity': 0.7,
'curve-style': 'bezier',
'target-arrow-shape': 'none',
'control-point-distances': [40, -40],
'control-point-weights': [0.5, 0.5],
'edge-distances': 'intersection',
'line-style': 'solid'
}
}
],
layout: {
name: 'concentric',
fit: true,
padding: 60,
animate: true,
concentric: function(node) {
return node.data('isCenter') ? 2 : 1;
},
levelWidth: function() { return 1; }
}
});
console.log('Cytoscape initialisiert');
// Füge neuronale 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,
color: categoryColors[data.category] || '#60a5fa'
});
});
// 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
});
});
// Starte neuronale Aktivitätssimulation
startNeuralActivitySimulation(cy);
// Mindmap mit echten Daten befüllen (Styles, Farben etc.)
updateMindmap();
// Event auslösen, damit andere Scripte reagieren können
document.dispatchEvent(new Event('mindmap-loaded'));
console.log('mindmap-loaded Event ausgelöst');
// 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);
}
});
// Nach dem Rendern: Icons als HTML-Overlay einfügen
setTimeout(() => {
cy.nodes().forEach(node => {
const icon = node.data('icon');
if (icon) {
const dom = cy.getElementById(node.id()).popperRef();
const iconDiv = document.createElement('div');
iconDiv.className = 'cy-node-icon';
iconDiv.innerHTML = ``;
document.body.appendChild(iconDiv);
// Positionierung mit Popper.js oder absolut über node.position()
}
});
}, 500);
});
// 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();
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: categoryColors[data.category] || '#60a5fa'
});
});
// 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': 'mapData(neuronSize, 3, 10, 30, 60)',
'height': 'mapData(neuronSize, 3, 10, 30, 60)',
'border-width': 2,
'border-color': '#fff',
'border-opacity': 0.8,
'overlay-padding': 4,
'z-index': 10,
'shape': 'ellipse',
'background-opacity': 0.85,
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
'shadow-color': 'data(color)',
'shadow-opacity': 0.6,
'shadow-offset-x': 0,
'shadow-offset-y': 0
})
.selector('edge')
.style({
'width': 'mapData(strength, 0.2, 1, 1, 3)',
'line-color': '#a78bfa',
'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)',
'target-arrow-color': '#a78bfa',
'target-arrow-shape': 'none',
'curve-style': 'bezier',
'control-point-distances': [20, -20],
'control-point-weights': [0.5, 0.5],
'edge-distances': 'intersection',
'loop-direction': '-45deg',
'loop-sweep': '-90deg',
'line-style': function(ele) {
const strength = ele.data('strength');
if (strength <= 0.4) return 'dotted';
if (strength <= 0.6) return 'dashed';
return 'solid';
}
})
.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.label,
category: node.category,
description: node.description,
hasChildren: node.hasChildren,
expanded: node.expanded,
neuronSize: node.neuronSize,
neuronActivity: node.neuronActivity,
color: node.color,
icon: node.icon,
fontColor: node.fontColor,
fontSize: node.fontSize
}
});
});
// Neue Kanten hinzufügen
mindmapData.edges.forEach(edge => {
cy.add({
group: 'edges',
data: {
source: edge.source,
target: edge.target,
strength: edge.strength
}
});
});
// Neuronales Design initialisieren
initializeNeuralDesign(cy);
// Layout anwenden
cy.layout({
name: 'cose',
animate: true,
animationDuration: 1000,
nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
fit: true,
componentSpacing: 100,
nodeRepulsion: 8000,
edgeElasticity: 100,
nestingFactor: 1.2,
gravity: 80
}).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) {
// Wende erweiterte Stile für Neuronen und Synapsen an
cy.style()
.selector('node')
.style({
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'color': '#ffffff',
'text-outline-width': 2,
'text-outline-color': 'rgba(0,0,0,0.8)',
'text-outline-opacity': 0.9,
'font-size': 14,
'font-weight': '500',
'text-margin-y': 8,
'width': 'mapData(neuronSize, 3, 10, 40, 80)',
'height': 'mapData(neuronSize, 3, 10, 40, 80)',
'background-color': 'data(color)',
'background-opacity': 0.9,
'border-width': 2,
'border-color': '#ffffff',
'border-opacity': 0.8,
'shape': 'ellipse',
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 15, 30)',
'shadow-color': 'data(color)',
'shadow-opacity': 0.8,
'shadow-offset-x': 0,
'shadow-offset-y': 0,
'transition-property': 'background-color, shadow-blur, shadow-opacity, background-opacity',
'transition-duration': '0.3s',
'transition-timing-function': 'ease-in-out'
})
.selector('edge')
.style({
'width': 'mapData(strength, 0.2, 0.8, 1, 3)',
'curve-style': 'bezier',
'line-color': function(ele) {
const sourceColor = ele.source().data('color');
const targetColor = ele.target().data('color');
return `linear-gradient(to right, ${sourceColor}, ${targetColor})`;
},
'line-opacity': 'mapData(strength, 0.2, 0.8, 0.4, 0.8)',
'line-style': function(ele) {
const strength = ele.data('strength');
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'
})
.selector('node[isRoot]')
.style({
'font-size': 18,
'font-weight': 'bold',
'width': 100,
'height': 100,
'background-color': '#6366f1',
'shadow-blur': 30,
'shadow-color': '#6366f1',
'shadow-opacity': 0.9,
'text-margin-y': 10,
'border-width': 3
})
.update();
}
/**
* Simuliert neuronale Aktivität in der Mindmap
* @param {Object} cy - Cytoscape-Instanz
*/
function startNeuralActivitySimulation(cy) {
if (window.neuralInterval) clearInterval(window.neuralInterval);
const nodes = cy.nodes();
const edges = cy.edges();
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.15) {
fireNeuron(node, true, currentTime);
}
}
});
}
function fireNeuron(node, state, currentTime) {
const data = node.data();
data.lastFired = currentTime;
// Verbesserte visuelle Effekte
node.animate({
style: {
'background-opacity': 1,
'shadow-blur': 35,
'shadow-opacity': 1,
'border-width': 3,
'border-color': '#ffffff'
},
duration: 200,
easing: 'ease-in-out-cubic'
});
setTimeout(() => {
node.animate({
style: {
'background-opacity': 0.9,
'shadow-blur': 20,
'shadow-opacity': 0.8,
'border-width': 2,
'border-color': 'rgba(255,255,255,0.8)'
},
duration: 300,
easing: 'ease-out-cubic'
});
}, 200);
if (state) {
propagateSignal(node, currentTime);
}
}
function propagateSignal(sourceNode, currentTime) {
const outgoingEdges = sourceNode.connectedEdges('out');
outgoingEdges.forEach(edge => {
const targetNode = edge.target();
const edgeData = edge.data();
const latency = edgeData.latency;
// Verbesserte Kanten-Animation
edge.animate({
style: {
'line-opacity': 1,
'width': edgeData.strength * 4
},
duration: 200,
easing: 'ease-in-out-cubic'
});
setTimeout(() => {
edge.animate({
style: {
'line-opacity': edgeData.strength * 0.8,
'width': edgeData.strength * 2
},
duration: 300,
easing: 'ease-out-cubic'
});
}, 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 = document.getElementById('flash-messages') || createFlashContainer();
const flashMsg = document.createElement('div');
flashMsg.className = `flash-message flash-${type} mb-2 p-3 rounded`;
flashMsg.innerHTML = `
`;
flashContainer.appendChild(flashMsg);
// Nach 5 Sekunden automatisch ausblenden
setTimeout(() => {
flashMsg.style.opacity = '0';
setTimeout(() => flashMsg.remove(), 300);
}, 5000);
// Close-Button
const closeBtn = flashMsg.querySelector('.close-flash');
closeBtn.addEventListener('click', () => {
flashMsg.style.opacity = '0';
setTimeout(() => flashMsg.remove(), 300);
});
}
// 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 {
console.log('Loading subthemes for node:', node.id());
// Simuliere Datenbankabfrage
const subthemes = subthemesDatabase[node.id()];
if (!subthemes) {
console.log('No subthemes found for node:', node.id());
return;
}
// Animation starten
showFlash('Lade Subthemen...', 'info');
// Neue Seite erstellen
const mindmapContainer = document.querySelector('.mindmap-container');
const newPage = document.createElement('div');
newPage.className = 'mindmap-page';
newPage.style.display = 'none';
// Kopfzeile erstellen
const header = document.createElement('div');
header.className = 'mindmap-header';
header.innerHTML = `
${node.data('label')}
`;
// Container für die neue Mindmap
const newContainer = document.createElement('div');
newContainer.id = `cy-${node.id()}`;
newContainer.className = 'mindmap-view';
// Elemente zur Seite hinzufügen
newPage.appendChild(header);
newPage.appendChild(newContainer);
mindmapContainer.appendChild(newPage);
// Neue Cytoscape-Instanz erstellen
const newCy = cytoscape({
container: newContainer,
elements: [],
style: cy.style(),
layout: {
name: 'cose',
animate: true,
animationDuration: 500,
refresh: 20,
fit: true,
padding: 30,
nodeRepulsion: 4500,
idealEdgeLength: 50,
edgeElasticity: 0.45
}
});
// Neue Knoten hinzufügen
subthemes.forEach(subtheme => {
newCy.add({
group: 'nodes',
data: {
id: subtheme.id,
label: subtheme.label,
category: subtheme.category,
description: subtheme.description,
hasChildren: subtheme.hasChildren,
expanded: false,
neuronSize: 6,
neuronActivity: 0.7
}
});
});
// Neuronales Design für die neue Mindmap initialisieren
initializeNeuralDesign(newCy);
// Event-Listener für die neue Mindmap
newCy.on('tap', 'node', async function(evt) {
const clickedNode = evt.target;
if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) {
await loadSubthemes(clickedNode);
}
});
// Alte Seite ausblenden und neue anzeigen
cy.container().style.display = 'none';
newPage.style.display = 'block';
// Layout ausführen
newCy.layout().run();
// Erfolgsmeldung anzeigen
showFlash('Subthemen erfolgreich geladen', 'success');
// Icons für Subthemen wie oben einfügen
setTimeout(() => {
newCy.nodes().forEach(node => {
const icon = node.data('icon');
if (icon) {
const dom = newCy.getElementById(node.id()).popperRef();
const iconDiv = document.createElement('div');
iconDiv.className = 'cy-node-icon';
iconDiv.innerHTML = ``;
document.body.appendChild(iconDiv);
}
});
}, 500);
} catch (error) {
console.error('Fehler beim Laden der Subthemen:', error);
showFlash('Fehler beim Laden der Subthemen', 'error');
}
}
// Funktion zum Zurücknavigieren
function goBack() {
const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])');
if (currentPage) {
currentPage.style.display = 'none';
cy.container().style.display = 'block';
}
}
// 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);
}
`;
document.head.appendChild(style);