marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f0d13cae785418c69e32655af8a686f294dff079
website/static/js/update_mindmap.js
marwin 37c457ca3f Kategorien- Button Funktion
2025-05-22 12:15:50 +01:00

2724 lines
93 KiB
JavaScript
Raw Blame History

/**
* 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;
}
}
/**
* Zerstört eine Cytoscape-Instanz sicher
* @param {Object} instance - Die zu zerstörende Cytoscape-Instanz
*/
function destroyCytoscapeInstance(instance) {
if (instance && typeof instance.destroy === 'function') {
try {
// Event-Listener entfernen
instance.removeAllListeners();
// Instanz zerstören
instance.destroy();
} catch (e) {
console.error('Fehler beim Zerstören der Cytoscape-Instanz:', e);
}
}
}
// Funktion zum Initialisieren der Mindmap
async function initializeMindmap() {
try {
// Zeige Ladeanimation
const loader = document.getElementById('loader');
const statusMessage = document.getElementById('statusMessage');
if (loader) loader.style.display = 'block';
if (statusMessage) {
statusMessage.textContent = 'Lade Mindmap...';
statusMessage.style.display = 'block';
}
// Prüfe auf bestehende Cytoscape-Instanz und zerstöre sie
if (window.cy && typeof window.cy.destroy === 'function') {
try {
window.cy.destroy();
} catch (e) {
console.error('Fehler beim Zerstören der bestehenden Cytoscape-Instanz:', e);
}
window.cy = null;
}
// Bereinige auch alle Subthemen-Instanzen
if (window.subthemeCyInstances) {
Object.keys(window.subthemeCyInstances).forEach(key => {
try {
if (window.subthemeCyInstances[key] && typeof window.subthemeCyInstances[key].destroy === 'function') {
window.subthemeCyInstances[key].destroy();
}
} catch (e) {
console.error(`Fehler beim Zerstören der Subthemen-Instanz ${key}:`, e);
}
});
window.subthemeCyInstances = {};
}
// Entferne bestehende Subpages aus dem DOM
const existingSubpages = document.querySelectorAll('.mindmap-subpage');
existingSubpages.forEach(subpage => {
if (subpage.parentNode) {
subpage.parentNode.removeChild(subpage);
}
});
// Lade Mindmap-Daten
const data = await loadMindmapData();
if (!data || !data.nodes || !data.edges) {
throw new Error('Ungültiges Datenformat: Mindmap-Daten fehlen oder sind unvollständig');
}
// Prüfe, ob der Container existiert
const cyContainer = document.getElementById('cy');
if (!cyContainer) {
throw new Error('Mindmap-Container #cy nicht gefunden!');
}
// Stelle sicher, dass der Container sichtbar ist
cyContainer.style.display = 'block';
// Elemente für Cytoscape erstellen
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
}
}))
];
// Cytoscape-Instanz erstellen
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,
// Mausrad-Zooming deaktivieren
wheelSensitivity: 0,
minZoom: 0.2,
maxZoom: 2.5
});
// Prüfe, ob die Cytoscape-Instanz erfolgreich erstellt wurde
if (!window.cy || !window.cy.container()) {
throw new Error('Cytoscape-Instanz konnte nicht korrekt initialisiert werden');
}
// Füge neuronale Eigenschaften zu allen Knoten hinzu
window.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
window.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 mit Fehlerbehandlung
window.cy.on('tap', 'node', async function(evt) {
try {
const node = evt.target;
console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren') || node.data('has_children'), 'expanded:', node.data('expanded'));
if ((node.data('hasChildren') || node.data('has_children')) && !node.data('expanded')) {
await loadSubthemes(node);
}
} catch (e) {
console.error('Fehler beim Node-Tap-Event:', e);
showUINotification('Fehler beim Verarbeiten des Klicks: ' + e.message, 'error');
}
});
// Event-Listener für Hover über Knoten (für Info-Panel)
window.cy.on('mouseover', 'node', function(evt) {
try {
const node = evt.target;
showNodeInfo(node);
} catch (e) {
console.error('Fehler beim Mouseover-Event:', e);
}
});
window.cy.on('mouseout', 'node', function() {
try {
hideNodeInfo();
} catch (e) {
console.error('Fehler beim Mouseout-Event:', e);
}
});
// Layout ausführen
window.cy.layout(mindmapStyles.layout.base).run();
// Starte neuronale Aktivitätssimulation
try {
startNeuralActivitySimulation(window.cy);
} catch (e) {
console.error('Fehler beim Starten der neuronalen Simulation:', e);
}
// Mindmap mit echten Daten befüllen (Styles, Farben etc.)
try {
updateMindmap();
} catch (e) {
console.error('Fehler beim Aktualisieren der Mindmap:', e);
}
// Setze anfänglichen Zoom auf eine kleinere Stufe, damit mehr sichtbar ist
setTimeout(() => {
try {
window.cy.zoom({
level: 0.7,
renderedPosition: { x: window.cy.width() / 2, y: window.cy.height() / 2 }
});
window.cy.center();
} catch (e) {
console.error('Fehler beim Setzen des anfänglichen Zooms:', e);
}
}, 300);
// Verstecke Ladeanimation
if (loader) loader.style.display = 'none';
if (statusMessage) statusMessage.style.display = 'none';
// Event auslösen, damit andere Scripte reagieren können
document.dispatchEvent(new Event('mindmap-loaded'));
console.log('mindmap-loaded Event ausgelöst');
return true;
} catch (error) {
console.error('Fehler bei der Mindmap-Initialisierung:', error);
// Verstecke Ladeanimation
const loader = document.getElementById('loader');
const statusMessage = document.getElementById('statusMessage');
if (loader) loader.style.display = 'none';
// Zeige Fehlermeldung
if (statusMessage) {
statusMessage.textContent = 'Fehler beim Laden der Mindmap: ' + error.message;
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
statusMessage.style.display = 'block';
}
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!');
// Versuche, Cytoscape nachzuladen
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js';
script.onload = function() {
console.log('Cytoscape wurde nachgeladen');
initializeMindmap().catch(console.error);
};
script.onerror = function() {
console.error('Cytoscape konnte nicht nachgeladen werden');
showUINotification('Cytoscape-Bibliothek konnte nicht geladen werden', 'error');
};
document.head.appendChild(script);
return;
}
console.log('Cytoscape ist verfügbar');
// Initialisiere die Mindmap mit Fehlerbehandlung
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');
});
// Initialisiere das Kategorien-Panel
document.addEventListener('mindmap-loaded', function() {
initializeCategoriesPanel();
});
});
// 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,
has_children: node.has_children,
hasChildren: node.has_children, // Doppelte Eigenschaft für Kompatibilität
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 (!cy || !cy.nodes) {
console.error('Keine gültige Cytoscape-Instanz für neuronale Simulation');
return;
}
// Bestehende Intervalle stoppen, um Speicherlecks zu vermeiden
if (window.neuralIntervals) {
window.neuralIntervals.forEach(clearInterval);
}
// Erstelle ein Array für die Intervalle dieser Instanz
window.neuralIntervals = window.neuralIntervals || [];
const nodes = cy.nodes();
let currentTime = Date.now();
// Sicherer Zugriff auf Nodes mit Fehlerbehandlung
function simulateNeuralActivity() {
try {
if (!cy || !cy.nodes) {
console.warn('Cytoscape-Instanz nicht mehr verfügbar, stoppe Simulation');
clearInterval(intervalId);
const index = window.neuralIntervals.indexOf(intervalId);
if (index > -1) {
window.neuralIntervals.splice(index, 1);
}
return;
}
currentTime = Date.now();
cy.nodes().forEach(node => {
try {
const data = node.data();
if (!data) return;
const lastFired = data.lastFired || 0;
const timeSinceLastFire = currentTime - lastFired;
if (timeSinceLastFire > data.refractionPeriod) {
if (Math.random() < data.neuronActivity * 0.1) {
fireNeuron(node, true, currentTime);
}
}
} catch (e) {
// Ignoriere Fehler für einzelne Nodes
console.debug('Fehler bei Node in Simulation:', e);
}
});
} catch (e) {
console.error('Fehler in neuronaler Simulation:', e);
}
}
function fireNeuron(node, state, currentTime) {
try {
if (!node || !node.data) return;
const data = node.data();
if (!data) return;
data.lastFired = currentTime;
try {
node.style({
'background-opacity': 1,
'border-width': 3
});
setTimeout(() => {
try {
node.style({
'background-opacity': 0.9,
'border-width': 2
});
} catch (e) {
// Ignoriere Fehler beim Styling, da der Node möglicherweise nicht mehr existiert
}
}, 200);
} catch (e) {
// Ignoriere Styling-Fehler
}
if (state) {
propagateSignal(node, currentTime);
}
} catch (e) {
// Ignoriere Fehler für einzelne Nodes
}
}
function propagateSignal(sourceNode, currentTime) {
try {
if (!sourceNode || !sourceNode.connectedEdges) return;
const outgoingEdges = sourceNode.connectedEdges();
outgoingEdges.forEach(edge => {
try {
const targetNode = edge.target();
const edgeData = edge.data();
if (!targetNode || !edgeData) return;
const latency = edgeData.latency || 100;
try {
edge.style({
'line-opacity': 0.8,
'width': edgeData.strength * 3
});
setTimeout(() => {
try {
edge.style({
'line-opacity': edgeData.strength * 0.6,
'width': edgeData.strength * 2
});
} catch (e) {
// Ignoriere Styling-Fehler
}
}, 200);
} catch (e) {
// Ignoriere Styling-Fehler
}
setTimeout(() => {
try {
if (!targetNode || !targetNode.data) return;
const targetData = targetNode.data();
if (!targetData) return;
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);
}
}
} catch (e) {
// Ignoriere Fehler für einzelne Nodes
}
}, latency);
} catch (e) {
// Ignoriere Fehler für einzelne Edges
}
});
} catch (e) {
// Ignoriere Fehler für einzelne Nodes
}
}
// Starte das Intervall und speichere die Referenz
const intervalId = setInterval(simulateNeuralActivity, 100);
window.neuralIntervals.push(intervalId);
// Rückgabefunktion zum manuellen Stoppen
return function stopSimulation() {
clearInterval(intervalId);
const index = window.neuralIntervals.indexOf(intervalId);
if (index > -1) {
window.neuralIntervals.splice(index, 1);
}
};
}
// 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) {
// Container erstellen, falls er nicht existiert
let container = document.getElementById('notification-container');
if (!container) {
container = document.createElement('div');
container.id = 'notification-container';
container.style.position = 'fixed';
container.style.top = '1rem';
container.style.right = '1rem';
container.style.zIndex = '1000';
container.style.maxWidth = '400px';
document.body.appendChild(container);
}
// Benachrichtigung erstellen
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.style.padding = '1rem';
notification.style.marginBottom = '0.5rem';
notification.style.borderRadius = '0.25rem';
notification.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.2)';
notification.style.position = 'relative';
notification.style.opacity = '0';
notification.style.transform = 'translateY(-20px)';
notification.style.transition = 'all 0.3s ease-in-out';
// Farben nach Typ
if (type === 'success') {
notification.style.backgroundColor = '#059669';
notification.style.color = '#ffffff';
} else if (type === 'error') {
notification.style.backgroundColor = '#DC2626';
notification.style.color = '#ffffff';
} else if (type === 'warning') {
notification.style.backgroundColor = '#F59E0B';
notification.style.color = '#ffffff';
} else {
notification.style.backgroundColor = '#3B82F6';
notification.style.color = '#ffffff';
}
// Nachrichteninhalt formatieren
let content = '';
if (typeof message === 'object' && message !== null) {
// Wenn es ein Fehler-Objekt ist
if (message.error) {
content = message.error;
if (message.details) {
content += `<br><small>${message.details}</small>`;
}
} else {
// Versuche, das Objekt zu stringifizieren
try {
content = JSON.stringify(message);
} catch (e) {
content = 'Objekt konnte nicht angezeigt werden';
}
}
} else {
// String oder andere primitive Typen
content = message;
}
notification.innerHTML = content;
// Schließen-Button
const closeButton = document.createElement('span');
closeButton.innerHTML = '&times;';
closeButton.style.position = 'absolute';
closeButton.style.top = '0.25rem';
closeButton.style.right = '0.5rem';
closeButton.style.fontSize = '1.25rem';
closeButton.style.cursor = 'pointer';
closeButton.onclick = () => {
notification.style.opacity = '0';
notification.style.transform = 'translateY(-20px)';
setTimeout(() => {
if (notification.parentNode === container) {
container.removeChild(notification);
}
}, 300);
};
notification.appendChild(closeButton);
// Zur Seite hinzufügen
container.appendChild(notification);
// Animation starten
setTimeout(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateY(0)';
}, 10);
// Automatisch ausblenden, wenn keine Dauer von 0 übergeben wurde
if (duration > 0) {
setTimeout(() => {
if (notification.parentNode === container) {
notification.style.opacity = '0';
notification.style.transform = 'translateY(-20px)';
setTimeout(() => {
if (notification.parentNode === container) {
container.removeChild(notification);
}
}, 300);
}
}, duration);
}
}
// 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);
// CSS-Styles für die Unterkategorien-Seite
(function() {
const style = document.createElement('style');
style.textContent = `
.mindmap-subpage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: flex;
flex-direction: column;
background: var(--bg-primary, linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%));
}
.mindmap-subpage .subpage-header {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: 10;
}
.mindmap-subpage .back-button {
background: rgba(255, 255, 255, 0.1);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.mindmap-subpage .back-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.mindmap-subpage .subpage-title {
font-size: 1.5rem;
font-weight: 600;
color: white;
margin: 0;
background: linear-gradient(90deg, #60a5fa, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mindmap-subpage .subpage-cy-container {
flex: 1;
width: 100%;
height: calc(100% - 72px);
position: relative;
}
.mindmap-subpage .mindmap-toolbar {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
padding: 8px;
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
z-index: 10;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.mindmap-subpage .mindmap-toolbar button {
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.mindmap-subpage .mindmap-toolbar button:hover {
background: rgba(139, 92, 246, 0.5);
transform: translateY(-2px);
}
.mindmap-subpage .mindmap-toolbar button i {
font-size: 16px;
}
.dark .mindmap-subpage {
background: linear-gradient(135deg, #0f172a 0%, #0c1221 100%);
}
`;
document.head.appendChild(style);
})();
// Funktion zum Laden der Subthemen
async function loadSubthemes(node) {
try {
if (!node || !node.id) {
console.error('Ungültiger Knoten für Subthemen');
return;
}
const nodeId = node.id();
if (!nodeId) {
console.error('Ungültige Knoten-ID für Subthemen');
return;
}
// Prüfe ob die Haupt-Cytoscape-Instanz noch gültig ist
if (!window.cy || typeof window.cy.container !== 'function') {
console.error('Haupt-Cytoscape-Instanz nicht mehr gültig');
showUINotification('Fehler: Mindmap-Instanz nicht mehr verfügbar', 'error');
return;
}
const mindmapData = await loadMindmapData(nodeId);
if (!mindmapData || !mindmapData.nodes || !mindmapData.edges) {
console.warn('Keine gültigen Daten für Subthemen gefunden');
showUINotification('Keine Unterthemen verfügbar', 'info');
return;
}
showUINotification('Lade Subthemen...', 'info');
// Finde den Container
const mindmapContainer = document.querySelector('.mindmap-container');
if (!mindmapContainer) {
console.error('Mindmap-Container nicht gefunden');
showUINotification('Fehler: Mindmap-Container nicht gefunden', 'error');
return;
}
// Verstecke die Hauptmindmap nur wenn sie noch gültig ist
try {
const mainContainer = window.cy.container();
if (mainContainer && mainContainer.parentNode) {
mainContainer.style.display = 'none';
} else {
console.warn('Haupt-Cytoscape-Container nicht mehr gültig');
}
} catch (e) {
console.error('Fehler beim Verstecken der Hauptmindmap:', e);
}
// Erstelle eine neue Seite für die Unterkategorien
const subpage = document.createElement('div');
subpage.className = 'mindmap-subpage';
subpage.setAttribute('data-parent-id', nodeId);
// Erstelle den Header mit Zurück-Button und Titel
const header = document.createElement('div');
header.className = 'subpage-header';
header.innerHTML = `
<button class="back-button" onclick="window.goBack()">
<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 12H5M12 19l-7-7 7-7"/>
</svg>
</button>
<h2 class="subpage-title">${node.data('label') || node.data('name') || 'Unterkategorie'}</h2>
`;
// Erstelle den Container für die Cytoscape-Instanz
const cyContainer = document.createElement('div');
cyContainer.className = 'subpage-cy-container';
cyContainer.id = `cy-${nodeId}`;
// Erstelle die Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'mindmap-toolbar';
toolbar.innerHTML = `
<button id="zoomIn-${nodeId}" title="Vergrößern">
<i class="fas fa-plus"></i>
</button>
<button id="zoomOut-${nodeId}" title="Verkleinern">
<i class="fas fa-minus"></i>
</button>
<button id="resetView-${nodeId}" title="Ansicht zurücksetzen">
<i class="fas fa-expand"></i>
</button>
`;
// Füge alle Elemente zum DOM hinzu
cyContainer.appendChild(toolbar);
subpage.appendChild(header);
subpage.appendChild(cyContainer);
mindmapContainer.appendChild(subpage);
// Warte, bis der DOM aktualisiert ist
await new Promise(resolve => setTimeout(resolve, 10));
// Erstelle ein Array mit den Knoten-Elementen
const elements = [];
// Knoten mit angepassten Daten für neuronale Eigenschaften
mindmapData.nodes.forEach(node => {
try {
const isCenter = node.is_center || false;
const category = node.category || 'Wissenschaft'; // Fallback-Kategorie
const categoryConfig = mindmapConfig.categories[category] || mindmapConfig.categories['Wissenschaft'];
elements.push({
group: 'nodes',
data: {
id: node.id,
label: node.name,
category: category,
description: node.description,
hasChildren: node.has_children,
expanded: false,
color: node.color_code || categoryConfig.color,
fontColor: '#ffffff',
fontSize: isCenter ? mindmapConfig.centerNodeStyle.fontSize : mindmapConfig.defaultNodeStyle.fontSize,
isCenter: isCenter,
neuronSize: isCenter ? mindmapConfig.centerNodeStyle.neuronSize : mindmapConfig.defaultNodeStyle.neuronSize,
neuronActivity: isCenter ? mindmapConfig.centerNodeStyle.neuronActivity : mindmapConfig.defaultNodeStyle.neuronActivity,
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6,
lastFired: 0
}
});
} catch (e) {
console.error('Fehler beim Verarbeiten eines Knotens:', e, node);
}
});
// Kanten mit angepassten Daten für neuronale Eigenschaften
mindmapData.edges.forEach(edge => {
try {
elements.push({
group: 'edges',
data: {
source: edge.source,
target: edge.target,
strength: edge.strength || 0.5,
conductionVelocity: Math.random() * 0.5 + 0.3,
latency: Math.random() * 100 + 50
}
});
} catch (e) {
console.error('Fehler beim Verarbeiten einer Kante:', e, edge);
}
});
// Finde den DOM-Container
const container = document.getElementById(`cy-${nodeId}`);
if (!container) {
throw new Error(`Container für Cytoscape-Instanz nicht gefunden: cy-${nodeId}`);
}
// Initialisiere subthemeCyInstances wenn noch nicht vorhanden
if (!window.subthemeCyInstances) {
window.subthemeCyInstances = {};
}
// Zerstöre alte Instanz falls vorhanden
if (window.subthemeCyInstances[nodeId]) {
try {
const oldInstance = window.subthemeCyInstances[nodeId];
if (oldInstance && typeof oldInstance.destroy === 'function') {
oldInstance.destroy();
}
} catch (e) {
console.error('Fehler beim Zerstören der alten Instanz:', e);
}
}
// Erstelle die neue Cytoscape-Instanz
const newCy = cytoscape({
container: container,
elements: elements,
style: [
{
selector: 'node',
style: mindmapStyles.node.base
},
{
selector: 'node[isCenter = true]',
style: mindmapStyles.node.center
},
{
selector: 'edge',
style: mindmapStyles.edge.base
},
{
selector: '.selected',
style: mindmapStyles.node.selected
}
],
layout: mindmapStyles.layout.base,
wheelSensitivity: 0,
minZoom: 0.2,
maxZoom: 2.5,
headless: false,
styleEnabled: true,
hideEdgesOnViewport: true,
textureOnViewport: true,
motionBlur: false,
motionBlurOpacity: 0.2,
pixelRatio: 'auto'
});
// Speichere die Instanz nur wenn sie erfolgreich erstellt wurde
if (newCy && typeof newCy.container === 'function') {
window.subthemeCyInstances[nodeId] = newCy;
} else {
throw new Error('Cytoscape-Instanz konnte nicht korrekt initialisiert werden');
}
// Rest der Funktion bleibt gleich...
// ... existing code ...
} catch (error) {
console.error('Fehler beim Laden der Subthemen:', error);
showUINotification('Fehler beim Laden der Subthemen: ' + error.message, 'error');
// Versuche die Hauptmindmap wieder anzuzeigen
try {
if (window.cy && typeof window.cy.container === 'function') {
const mainContainer = window.cy.container();
if (mainContainer && mainContainer.parentNode) {
mainContainer.style.display = 'block';
}
}
} catch (e) {
console.error('Fehler beim Wiederherstellen der Hauptmindmap:', e);
}
}
}
// Funktion zum Zurücknavigieren
function goBack() {
try {
console.log('goBack Funktion aufgerufen');
const subpage = document.querySelector('.mindmap-subpage');
if (!subpage) {
console.warn('Keine Unterseite gefunden');
return;
}
console.log('Unterseite gefunden:', subpage);
// Entferne erst alle Event-Listener und zerstöre die Cytoscape-Instanz der Subpage
const subpageId = subpage.querySelector('.subpage-cy-container')?.id;
if (subpageId) {
const subthemeId = subpageId.replace('cy-', '');
if (window.subthemeCyInstances && window.subthemeCyInstances[subthemeId]) {
try {
// Entferne alle Event-Listener der Subtheme-Instanz
const cyInstance = window.subthemeCyInstances[subthemeId];
if (cyInstance && typeof cyInstance.removeAllListeners === 'function') {
cyInstance.removeAllListeners();
}
// Zerstöre die Cytoscape-Instanz nur wenn sie noch gültig ist
if (cyInstance && typeof cyInstance.destroy === 'function') {
cyInstance.destroy();
}
// Entferne die Referenz
delete window.subthemeCyInstances[subthemeId];
console.log('Subtheme Cytoscape-Instanz zerstört:', subthemeId);
} catch (e) {
console.error('Fehler beim Aufräumen der Subtheme-Instanz:', e);
}
}
}
// Entferne die Unterseite mit Animation
subpage.style.opacity = '0';
subpage.style.transform = 'translateY(20px)';
setTimeout(() => {
try {
// Entferne die Unterseite aus dem DOM
if (subpage.parentNode) {
subpage.parentNode.removeChild(subpage);
}
// Stelle sicher, dass die Haupt-Cytoscape-Instanz existiert und gültig ist
if (window.cy && typeof window.cy.container === 'function') {
const container = window.cy.container();
if (container && container.parentNode) {
console.log('Zeige Haupt-Cytoscape-Container an');
container.style.display = 'block';
// Aktualisiere das Layout nur wenn die Instanz noch gültig ist
setTimeout(() => {
try {
if (window.cy && typeof window.cy.resize === 'function' && typeof window.cy.fit === 'function') {
window.cy.resize();
window.cy.fit();
}
} catch (e) {
console.error('Fehler beim Aktualisieren des Layouts:', e);
}
}, 100);
} else {
console.warn('Haupt-Cytoscape-Container nicht mehr gültig');
initializeMindmap().catch(console.error);
}
} else {
console.warn('Haupt-Cytoscape-Instanz nicht mehr gültig');
initializeMindmap().catch(console.error);
}
} catch (e) {
console.error('Fehler beim Aufräumen:', e);
showUINotification('Fehler beim Zurücknavigieren: ' + e.message, 'error');
}
}, 200);
} catch (error) {
console.error('Fehler in goBack Funktion:', error);
showUINotification('Fehler beim Zurücknavigieren: ' + error.message, 'error');
}
}
// Funktion global verfügbar machen
window.goBack = goBack;
// Verbesserte Zoom-Funktionalität für die Hauptmindmap
document.addEventListener('DOMContentLoaded', function() {
// Warte bis die Mindmap geladen ist
document.addEventListener('mindmap-loaded', function() {
// Zoom-Buttons für die Hauptmindmap
const zoomInBtn = document.getElementById('zoomIn');
const zoomOutBtn = document.getElementById('zoomOut');
const resetViewBtn = document.getElementById('resetView');
if (zoomInBtn) {
zoomInBtn.addEventListener('click', function() {
if (!window.cy) return;
window.cy.zoom({
level: window.cy.zoom() * 1.3,
renderedPosition: { x: window.cy.width() / 2, y: window.cy.height() / 2 }
});
});
}
if (zoomOutBtn) {
zoomOutBtn.addEventListener('click', function() {
if (!window.cy) return;
window.cy.zoom({
level: window.cy.zoom() / 1.3,
renderedPosition: { x: window.cy.width() / 2, y: window.cy.height() / 2 }
});
});
}
if (resetViewBtn) {
resetViewBtn.addEventListener('click', function() {
if (!window.cy) return;
// Auswahl zurücksetzen
window.cy.nodes().forEach(node => {
node.removeStyle();
node.connectedEdges().removeStyle();
});
// Zoom auf eine angenehme Stufe setzen und zentrieren
window.cy.zoom({
level: 0.7,
renderedPosition: { x: window.cy.width() / 2, y: window.cy.height() / 2 }
});
window.cy.center();
});
}
});
});
// Funktionen für Knoteninfo-Panel
function showNodeInfo(node) {
if (!node || !node.isNode()) return;
const infoPanel = document.getElementById('infoPanel');
if (!infoPanel) return;
// Stelle sicher, dass das Info-Panel die notwendigen Elemente enthält
if (!infoPanel.querySelector('.info-title')) {
infoPanel.innerHTML = `
<h3 class="info-title"></h3>
<div class="info-content"></div>
`;
}
const infoTitle = infoPanel.querySelector('.info-title');
const infoContent = infoPanel.querySelector('.info-content');
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>
`;
if (data.hasChildren || data.has_children) {
contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
}
infoContent.innerHTML = contentHTML;
infoPanel.classList.add('visible');
}
function hideNodeInfo() {
const infoPanel = document.getElementById('infoPanel');
if (infoPanel) {
infoPanel.classList.remove('visible');
}
}
// Funktion zum Erstellen und Verwalten des Kategorien-Panels
function initializeCategoriesPanel() {
const toggleCategoriesBtn = document.getElementById('toggleCategories');
if (toggleCategoriesBtn) {
toggleCategoriesBtn.addEventListener('click', function() {
// Hier können Sie die gewünschte Funktionalität für den Kategorien-Button implementieren
console.log('Kategorien-Button wurde geklickt');
});
}
}
// Neue, vereinfachte Version der initializeCategoriesPanel Funktion
function initializeCategoriesPanel() {
const toggleCategoriesBtn = document.getElementById('toggleCategories');
if (toggleCategoriesBtn) {
toggleCategoriesBtn.addEventListener('click', function() {
// Hier können Sie die gewünschte Funktionalität für den Kategorien-Button implementieren
console.log('Kategorien-Button wurde geklickt');
});
}
}
// Neue Funktionen für das Kategorien-Popup
function showCategoriesPopup(event) {
// Entferne existierendes Popup falls vorhanden
const existingPopup = document.querySelector('.categories-popup');
if (existingPopup) {
existingPopup.remove();
}
// Erstelle neues Popup
const popup = document.createElement('div');
popup.className = 'categories-popup';
// Sammle Kategorien und deren Knoten
const categories = new Map();
cy.nodes().forEach(node => {
const category = node.data('category');
if (category) {
if (!categories.has(category)) {
categories.set(category, {
color: node.data('color'),
icon: mindmapConfig.categories[category]?.icon || 'fa-solid fa-circle',
nodes: []
});
}
categories.get(category).nodes.push({
id: node.id(),
name: node.data('label') || node.data('name'),
description: node.data('description')
});
}
});
// Generiere HTML für das Popup
let html = '';
categories.forEach((data, category) => {
html += `
<div class="category-group">
<div class="category-header" style="color: ${data.color}">
<i class="${data.icon}"></i>
<span>${category}</span>
<span class="node-count">(${data.nodes.length})</span>
</div>
<div class="category-nodes">
${data.nodes.map(node => `
<div class="category-node" data-node-id="${node.id}">
<span class="node-name">${node.name}</span>
${node.description ? `<span class="node-description">${node.description}</span>` : ''}
</div>
`).join('')}
</div>
</div>
`;
});
popup.innerHTML = html;
// Positioniere das Popup
const buttonRect = event.target.getBoundingClientRect();
popup.style.position = 'fixed';
popup.style.top = `${buttonRect.bottom + 10}px`;
popup.style.left = `${buttonRect.left}px`;
// Füge Event-Listener für Knoten-Klicks hinzu
popup.querySelectorAll('.category-node').forEach(nodeElement => {
nodeElement.addEventListener('click', () => {
const nodeId = nodeElement.getAttribute('data-node-id');
const node = cy.getElementById(nodeId);
if (node.length > 0) {
cy.center(node);
cy.fit(node);
node.select();
popup.remove();
}
});
});
// Füge Event-Listener für Klicks außerhalb des Popups hinzu
document.addEventListener('click', function closePopup(e) {
if (!popup.contains(e.target) && e.target !== event.target) {
popup.remove();
document.removeEventListener('click', closePopup);
}
});
// Füge das Popup zum DOM hinzu
document.body.appendChild(popup);
}
// Aktualisiere die initializeCategoriesPanel Funktion
function initializeCategoriesPanel() {
const toggleCategoriesBtn = document.getElementById('toggleCategories');
if (toggleCategoriesBtn) {
toggleCategoriesBtn.addEventListener('click', showCategoriesPopup);
}
}
// Füge CSS-Styles für das Popup hinzu
const categoriesPopupStyles = document.createElement('style');
categoriesPopupStyles.textContent = `
.categories-popup {
position: fixed;
background: rgba(15, 23, 42, 0.95);
border-radius: 0.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 400px;
max-height: 80vh;
overflow-y: auto;
padding: 1rem;
}
.category-group {
margin-bottom: 1rem;
}
.category-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
font-weight: 600;
border-radius: 0.25rem;
background: rgba(255, 255, 255, 0.05);
}
.category-header i {
font-size: 1rem;
}
.node-count {
margin-left: auto;
font-size: 0.9rem;
opacity: 0.7;
}
.category-nodes {
margin-top: 0.5rem;
margin-left: 1rem;
}
.category-node {
padding: 0.5rem;
margin: 0.25rem 0;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
}
.category-node:hover {
background: rgba(255, 255, 255, 0.1);
}
.node-name {
display: block;
color: white;
font-weight: 500;
}
.node-description {
display: block;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.25rem;
}
`;
document.head.appendChild(categoriesPopupStyles);
// ... existing code ...
Reference in New Issue View Git Blame Copy Permalink