234 lines
8.3 KiB
JavaScript
234 lines
8.3 KiB
JavaScript
/**
|
|
* Mindmap-Funktionalitäten
|
|
* Diese Datei enthält die grundlegenden Funktionen für die Mindmap-Visualisierung
|
|
*/
|
|
|
|
// Globale Variable für das Cytoscape-Objekt
|
|
window.cy = null;
|
|
|
|
/**
|
|
* Initialisiert die Mindmap mit Standarddaten
|
|
*/
|
|
async function initializeMindmap() {
|
|
console.log('Initialisiere Mindmap...');
|
|
|
|
// Beispieldaten für die Mindmap (falls keine API-Daten verfügbar sind)
|
|
const fallbackData = {
|
|
nodes: [
|
|
{ id: 'wissen', name: 'Wissen', category: 'Zentral', description: 'Zentrum der Wissensdatenbank', has_children: true, is_center: true, color_code: '#f5f5f5' },
|
|
{ id: 'philosophie', name: 'Philosophie', category: 'Philosophie', description: 'Philosophisches Denken', has_children: true, is_center: false, color_code: '#9F7AEA' },
|
|
{ id: 'wissenschaft', name: 'Wissenschaft', category: 'Wissenschaft', description: 'Wissenschaftliche Erkenntnisse', has_children: true, is_center: false, color_code: '#60A5FA' },
|
|
{ id: 'technologie', name: 'Technologie', category: 'Technologie', description: 'Technologische Entwicklungen', has_children: true, is_center: false, color_code: '#10B981' },
|
|
{ id: 'kunst', name: 'Künste', category: 'Künste', description: 'Kreative Ausdrucksformen', has_children: true, is_center: false, color_code: '#F59E0B' },
|
|
{ id: 'psychologie', name: 'Psychologie', category: 'Psychologie', description: 'Menschliches Verhalten und Geist', has_children: true, is_center: false, color_code: '#EF4444' }
|
|
],
|
|
edges: [
|
|
{ source: 'wissen', target: 'philosophie', strength: 0.8 },
|
|
{ source: 'wissen', target: 'wissenschaft', strength: 0.8 },
|
|
{ source: 'wissen', target: 'technologie', strength: 0.7 },
|
|
{ source: 'wissen', target: 'kunst', strength: 0.6 },
|
|
{ source: 'wissen', target: 'psychologie', strength: 0.7 },
|
|
{ source: 'wissenschaft', target: 'technologie', strength: 0.9 },
|
|
{ source: 'wissenschaft', target: 'philosophie', strength: 0.5 },
|
|
{ source: 'philosophie', target: 'psychologie', strength: 0.6 }
|
|
]
|
|
};
|
|
|
|
try {
|
|
// Versuche, Daten von der API zu laden
|
|
const response = await fetch('/api/mindmap/root');
|
|
let data;
|
|
|
|
if (response.ok) {
|
|
data = await response.json();
|
|
|
|
// Prüfe, ob die API korrekte Daten zurückgegeben hat
|
|
if (!data.nodes || !data.edges) {
|
|
console.warn('API-Antwort hat ungültiges Format, verwende Fallback-Daten');
|
|
data = fallbackData;
|
|
}
|
|
} else {
|
|
console.warn('API-Anfrage fehlgeschlagen, verwende Fallback-Daten');
|
|
data = fallbackData;
|
|
}
|
|
|
|
// Cytoscape-Elemente 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,
|
|
isCenter: node.is_center || false
|
|
}
|
|
})),
|
|
// Kanten
|
|
...data.edges.map(edge => ({
|
|
data: {
|
|
source: edge.source,
|
|
target: edge.target,
|
|
strength: edge.strength || 0.5
|
|
}
|
|
}))
|
|
];
|
|
|
|
// Cytoscape initialisieren
|
|
const cyContainer = document.getElementById('cy');
|
|
|
|
if (!cyContainer) {
|
|
throw new Error('Container #cy nicht gefunden');
|
|
}
|
|
|
|
// Bestehende Cytoscape-Instanz zerstören, wenn vorhanden
|
|
if (window.cy) {
|
|
window.cy.destroy();
|
|
}
|
|
|
|
// Neue Cytoscape-Instanz erstellen
|
|
window.cy = cytoscape({
|
|
container: cyContainer,
|
|
elements: elements,
|
|
style: [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'background-color': 'data(color)',
|
|
'label': 'data(label)',
|
|
'color': '#ffffff',
|
|
'text-outline-color': 'black',
|
|
'text-outline-width': 1,
|
|
'text-valign': 'center',
|
|
'text-halign': 'center',
|
|
'font-size': 18,
|
|
'width': 50,
|
|
'height': 50,
|
|
'border-width': 2,
|
|
'border-color': '#ffffff',
|
|
'border-opacity': 0.6
|
|
}
|
|
},
|
|
{
|
|
selector: 'node[isCenter]',
|
|
style: {
|
|
'background-color': '#f5f5f5',
|
|
'color': '#222222',
|
|
'font-size': 24,
|
|
'width': 80,
|
|
'height': 80
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': function(ele) {
|
|
return ele.data('strength') * 5;
|
|
},
|
|
'line-color': 'rgba(255, 255, 255, 0.5)',
|
|
'opacity': 0.7,
|
|
'curve-style': 'bezier'
|
|
}
|
|
}
|
|
],
|
|
layout: {
|
|
name: 'cose',
|
|
idealEdgeLength: 100,
|
|
nodeOverlap: 20,
|
|
refresh: 20,
|
|
fit: true,
|
|
padding: 30,
|
|
randomize: false,
|
|
componentSpacing: 100,
|
|
nodeRepulsion: 400000,
|
|
edgeElasticity: 100,
|
|
nestingFactor: 5,
|
|
gravity: 80,
|
|
numIter: 1000,
|
|
initialTemp: 200,
|
|
coolingFactor: 0.95,
|
|
minTemp: 1.0
|
|
}
|
|
});
|
|
|
|
// Knoten sperren, damit sie nicht verschoben werden können
|
|
window.cy.nodes().lock();
|
|
|
|
console.log('Mindmap erfolgreich initialisiert');
|
|
return window.cy;
|
|
} catch (error) {
|
|
console.error('Fehler bei der Initialisierung der Mindmap:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Speichert Änderungen an der Mindmap
|
|
* @param {Object} cy - Die Cytoscape-Instanz
|
|
*/
|
|
function saveMindmapChanges(cy) {
|
|
console.log('Speichere Mindmap-Änderungen...');
|
|
|
|
if (!cy) {
|
|
console.error('Keine Cytoscape-Instanz übergeben');
|
|
return;
|
|
}
|
|
|
|
// Sammle alle Knoten und Kanten
|
|
const nodes = cy.nodes().map(node => ({
|
|
id: node.id(),
|
|
name: node.data('label'),
|
|
category: node.data('category'),
|
|
description: node.data('description'),
|
|
has_children: node.data('hasChildren'),
|
|
is_center: node.data('isCenter'),
|
|
color_code: node.data('color'),
|
|
position: node.position()
|
|
}));
|
|
|
|
const edges = cy.edges().map(edge => ({
|
|
source: edge.source().id(),
|
|
target: edge.target().id(),
|
|
strength: edge.data('strength')
|
|
}));
|
|
|
|
// Daten zum Speichern vorbereiten
|
|
const saveData = {
|
|
nodes: nodes,
|
|
edges: edges
|
|
};
|
|
|
|
console.log('Zu speichernde Daten:', saveData);
|
|
|
|
// API-Anfrage senden
|
|
fetch('/api/mindmap/save', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(saveData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Erfolg
|
|
console.log('Mindmap erfolgreich gespeichert:', data);
|
|
alert('Mindmap wurde erfolgreich gespeichert!');
|
|
} else {
|
|
// Fehler
|
|
console.error('Fehler beim Speichern der Mindmap:', data.error);
|
|
alert('Fehler beim Speichern: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Netzwerkfehler beim Speichern der Mindmap:', error);
|
|
alert('Netzwerkfehler beim Speichern: ' + error.message);
|
|
});
|
|
}
|
|
|
|
// Exportiere die Funktionen
|
|
window.initializeMindmap = initializeMindmap;
|
|
window.saveMindmapChanges = saveMindmapChanges;
|