420 lines
14 KiB
JavaScript
420 lines
14 KiB
JavaScript
/**
|
|
* Mindmap-Initialisierer
|
|
* Lädt und initialisiert die Mindmap-Visualisierung
|
|
*/
|
|
|
|
// Warte bis DOM geladen ist
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Prüfe, ob wir auf der Mindmap-Seite sind
|
|
const cyContainer = document.getElementById('cy');
|
|
|
|
if (!cyContainer) {
|
|
console.log('Kein Mindmap-Container gefunden, überspringe Initialisierung.');
|
|
return;
|
|
}
|
|
|
|
console.log('Initialisiere Mindmap-Visualisierung...');
|
|
|
|
// Prüfe, ob Cytoscape.js verfügbar ist
|
|
if (typeof cytoscape === 'undefined') {
|
|
loadScript('/static/js/cytoscape.min.js', initMindmap);
|
|
} else {
|
|
initMindmap();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Lädt ein Script dynamisch
|
|
* @param {string} src - Quelldatei
|
|
* @param {Function} callback - Callback nach dem Laden
|
|
*/
|
|
function loadScript(src, callback) {
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.onload = callback;
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
/**
|
|
* Initialisiert die Mindmap-Visualisierung
|
|
*/
|
|
function initMindmap() {
|
|
const cyContainer = document.getElementById('cy');
|
|
const fitBtn = document.getElementById('fit-btn');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
const toggleLabelsBtn = document.getElementById('toggle-labels-btn');
|
|
const nodeInfoPanel = document.getElementById('node-info-panel');
|
|
const nodeDescription = document.getElementById('node-description');
|
|
const connectedNodes = document.getElementById('connected-nodes');
|
|
|
|
let labelsVisible = true;
|
|
let selectedNode = null;
|
|
|
|
// Erstelle Cytoscape-Instanz
|
|
const cy = cytoscape({
|
|
container: cyContainer,
|
|
style: getDefaultStyles(),
|
|
layout: {
|
|
name: 'cose',
|
|
animate: true,
|
|
animationDuration: 800,
|
|
nodeDimensionsIncludeLabels: true,
|
|
padding: 50,
|
|
spacingFactor: 1.2,
|
|
randomize: true,
|
|
componentSpacing: 100,
|
|
nodeRepulsion: 8000,
|
|
edgeElasticity: 100,
|
|
nestingFactor: 1.2,
|
|
gravity: 80
|
|
},
|
|
wheelSensitivity: 0.3,
|
|
});
|
|
|
|
// Daten vom Server laden
|
|
loadMindmapData(cy);
|
|
|
|
// Event-Handler zuweisen
|
|
setupEventListeners(cy, fitBtn, resetBtn, toggleLabelsBtn, nodeInfoPanel, nodeDescription, connectedNodes);
|
|
}
|
|
|
|
/**
|
|
* Lädt die Mindmap-Daten vom Server
|
|
* @param {Object} cy - Cytoscape-Instanz
|
|
*/
|
|
function loadMindmapData(cy) {
|
|
fetch('/api/mindmap')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Fehler: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (!data.nodes || data.nodes.length === 0) {
|
|
console.log('Keine Daten gefunden, versuche Refresh-API...');
|
|
return fetch('/api/refresh-mindmap')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Fehler beim Refresh: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
});
|
|
}
|
|
return data;
|
|
})
|
|
.then(data => {
|
|
console.log('Mindmap-Daten geladen:', data);
|
|
|
|
// Cytoscape-Elemente vorbereiten
|
|
const elements = [];
|
|
|
|
// Prüfen, ob "Wissen"-Knoten existiert
|
|
let rootNode = data.nodes.find(node => node.name === "Wissen");
|
|
|
|
// Wenn nicht, Root-Knoten hinzufügen
|
|
if (!rootNode) {
|
|
rootNode = {
|
|
id: 'root',
|
|
name: 'Wissen',
|
|
description: 'Zentrale Wissensbasis',
|
|
color_code: '#4299E1'
|
|
};
|
|
data.nodes.unshift(rootNode);
|
|
}
|
|
|
|
// Knoten hinzufügen
|
|
data.nodes.forEach(node => {
|
|
elements.push({
|
|
group: 'nodes',
|
|
data: {
|
|
id: node.id.toString(),
|
|
name: node.name,
|
|
description: node.description || '',
|
|
color: node.color_code || '#8B5CF6',
|
|
isRoot: node.name === 'Wissen'
|
|
}
|
|
});
|
|
});
|
|
|
|
// Kanten hinzufügen, wenn vorhanden
|
|
if (data.edges && data.edges.length > 0) {
|
|
data.edges.forEach(edge => {
|
|
elements.push({
|
|
group: 'edges',
|
|
data: {
|
|
id: `${edge.source}-${edge.target}`,
|
|
source: edge.source.toString(),
|
|
target: edge.target.toString()
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
// Wenn keine Kanten definiert sind, verbinde alle Knoten mit dem Root-Knoten
|
|
const rootId = rootNode.id.toString();
|
|
|
|
data.nodes.forEach(node => {
|
|
if (node.id.toString() !== rootId) {
|
|
elements.push({
|
|
group: 'edges',
|
|
data: {
|
|
id: `${rootId}-${node.id}`,
|
|
source: rootId,
|
|
target: node.id.toString()
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Elemente zu Cytoscape hinzufügen
|
|
cy.elements().remove();
|
|
cy.add(elements);
|
|
|
|
// Layout anwenden
|
|
cy.layout({
|
|
name: 'cose',
|
|
animate: true,
|
|
animationDuration: 800,
|
|
nodeDimensionsIncludeLabels: true,
|
|
padding: 50,
|
|
spacingFactor: 1.5,
|
|
randomize: false,
|
|
fit: true
|
|
}).run();
|
|
|
|
// Nach dem Laden Event auslösen
|
|
document.dispatchEvent(new CustomEvent('mindmap-loaded'));
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler beim Laden der Mindmap-Daten:', error);
|
|
|
|
// Fallback mit Standard-Daten
|
|
const fallbackData = {
|
|
nodes: [
|
|
{ id: 1, name: 'Wissen', description: 'Zentrale Wissensbasis', color_code: '#4299E1' },
|
|
{ id: 2, name: 'Philosophie', description: 'Philosophisches Denken', color_code: '#9F7AEA' },
|
|
{ id: 3, name: 'Wissenschaft', description: 'Wissenschaftliche Erkenntnisse', color_code: '#48BB78' },
|
|
{ id: 4, name: 'Technologie', description: 'Technologische Entwicklungen', color_code: '#ED8936' },
|
|
{ id: 5, name: 'Künste', description: 'Künstlerische Ausdrucksformen', color_code: '#ED64A6' }
|
|
],
|
|
edges: [
|
|
{ source: 1, target: 2 },
|
|
{ source: 1, target: 3 },
|
|
{ source: 1, target: 4 },
|
|
{ source: 1, target: 5 }
|
|
]
|
|
};
|
|
|
|
const fallbackElements = [];
|
|
|
|
// Knoten hinzufügen
|
|
fallbackData.nodes.forEach(node => {
|
|
fallbackElements.push({
|
|
group: 'nodes',
|
|
data: {
|
|
id: node.id.toString(),
|
|
name: node.name,
|
|
description: node.description || '',
|
|
color: node.color_code || '#8B5CF6',
|
|
isRoot: node.name === 'Wissen'
|
|
}
|
|
});
|
|
});
|
|
|
|
// Kanten hinzufügen
|
|
fallbackData.edges.forEach(edge => {
|
|
fallbackElements.push({
|
|
group: 'edges',
|
|
data: {
|
|
id: `${edge.source}-${edge.target}`,
|
|
source: edge.source.toString(),
|
|
target: edge.target.toString()
|
|
}
|
|
});
|
|
});
|
|
|
|
// Elemente zu Cytoscape hinzufügen
|
|
cy.elements().remove();
|
|
cy.add(fallbackElements);
|
|
|
|
// Layout anwenden
|
|
cy.layout({ name: 'cose', animate: true }).run();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Richtet Event-Listener für die Mindmap ein
|
|
* @param {Object} cy - Cytoscape-Instanz
|
|
* @param {HTMLElement} fitBtn - Fit-Button
|
|
* @param {HTMLElement} resetBtn - Reset-Button
|
|
* @param {HTMLElement} toggleLabelsBtn - Toggle-Labels-Button
|
|
* @param {HTMLElement} nodeInfoPanel - Node-Info-Panel
|
|
* @param {HTMLElement} nodeDescription - Node-Description
|
|
* @param {HTMLElement} connectedNodes - Connected-Nodes-Container
|
|
*/
|
|
function setupEventListeners(cy, fitBtn, resetBtn, toggleLabelsBtn, nodeInfoPanel, nodeDescription, connectedNodes) {
|
|
let labelsVisible = true;
|
|
|
|
// Fit-Button
|
|
if (fitBtn) {
|
|
fitBtn.addEventListener('click', function() {
|
|
cy.fit();
|
|
});
|
|
}
|
|
|
|
// Reset-Button
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', function() {
|
|
cy.layout({ name: 'cose', animate: true }).run();
|
|
});
|
|
}
|
|
|
|
// Toggle-Labels-Button
|
|
if (toggleLabelsBtn) {
|
|
toggleLabelsBtn.addEventListener('click', function() {
|
|
labelsVisible = !labelsVisible;
|
|
cy.style()
|
|
.selector('node')
|
|
.style({
|
|
'text-opacity': labelsVisible ? 1 : 0
|
|
})
|
|
.update();
|
|
});
|
|
}
|
|
|
|
// Knoten-Klick
|
|
cy.on('tap', 'node', function(evt) {
|
|
const node = evt.target;
|
|
|
|
// Zuvor ausgewählten Knoten zurücksetzen
|
|
cy.nodes().removeClass('selected');
|
|
|
|
// Neuen Knoten auswählen
|
|
node.addClass('selected');
|
|
|
|
if (nodeInfoPanel && nodeDescription && connectedNodes) {
|
|
// Info-Panel aktualisieren
|
|
nodeDescription.textContent = node.data('description') || 'Keine Beschreibung verfügbar.';
|
|
|
|
// Verbundene Knoten anzeigen
|
|
connectedNodes.innerHTML = '';
|
|
|
|
// Verbundene Knoten sammeln
|
|
const connectedNodesList = node.neighborhood('node');
|
|
|
|
if (connectedNodesList.length > 0) {
|
|
connectedNodesList.forEach(connectedNode => {
|
|
// Nicht den ausgewählten Knoten selbst anzeigen
|
|
if (connectedNode.id() !== node.id()) {
|
|
const nodeLink = document.createElement('span');
|
|
nodeLink.className = 'node-link';
|
|
nodeLink.textContent = connectedNode.data('name');
|
|
nodeLink.style.backgroundColor = connectedNode.data('color');
|
|
|
|
// Klick-Ereignis, um zu diesem Knoten zu wechseln
|
|
nodeLink.addEventListener('click', function() {
|
|
connectedNode.select();
|
|
cy.animate({
|
|
center: { eles: connectedNode },
|
|
duration: 500,
|
|
easing: 'ease-in-out-cubic'
|
|
});
|
|
});
|
|
|
|
connectedNodes.appendChild(nodeLink);
|
|
}
|
|
});
|
|
} else {
|
|
connectedNodes.innerHTML = '<em>Keine verbundenen Knoten</em>';
|
|
}
|
|
|
|
// Panel anzeigen
|
|
nodeInfoPanel.classList.add('visible');
|
|
}
|
|
});
|
|
|
|
// Hintergrund-Klick
|
|
cy.on('tap', function(evt) {
|
|
if (evt.target === cy) {
|
|
// Klick auf den Hintergrund
|
|
cy.nodes().removeClass('selected');
|
|
|
|
// Info-Panel verstecken
|
|
if (nodeInfoPanel) {
|
|
nodeInfoPanel.classList.remove('visible');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Dark Mode-Änderungen
|
|
document.addEventListener('darkModeToggled', function(event) {
|
|
const isDark = event.detail.isDark;
|
|
cy.style(getDefaultStyles(isDark));
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Liefert die Standard-Stile für die Mindmap
|
|
* @param {boolean} darkMode - Ob der Dark Mode aktiv ist
|
|
* @returns {Array} Array von Cytoscape-Stilen
|
|
*/
|
|
function getDefaultStyles(darkMode = document.documentElement.classList.contains('dark')) {
|
|
return [
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'background-color': 'data(color)',
|
|
'label': 'data(name)',
|
|
'width': 40,
|
|
'height': 40,
|
|
'font-size': 12,
|
|
'text-valign': 'bottom',
|
|
'text-halign': 'center',
|
|
'text-margin-y': 8,
|
|
'color': darkMode ? '#f1f5f9' : '#334155',
|
|
'text-background-color': darkMode ? 'rgba(30, 41, 59, 0.8)' : 'rgba(241, 245, 249, 0.8)',
|
|
'text-background-opacity': 0.8,
|
|
'text-background-padding': '2px',
|
|
'text-background-shape': 'roundrectangle',
|
|
'text-wrap': 'ellipsis',
|
|
'text-max-width': '100px'
|
|
}
|
|
},
|
|
{
|
|
selector: 'node[?isRoot]',
|
|
style: {
|
|
'width': 60,
|
|
'height': 60,
|
|
'font-size': 14,
|
|
'font-weight': 'bold',
|
|
'text-background-opacity': 0.9,
|
|
'text-background-color': '#4299E1'
|
|
}
|
|
},
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 2,
|
|
'line-color': darkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
|
|
'target-arrow-color': darkMode ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
|
|
'curve-style': 'bezier',
|
|
'target-arrow-shape': 'triangle'
|
|
}
|
|
},
|
|
{
|
|
selector: 'node.selected',
|
|
style: {
|
|
'background-color': 'data(color)',
|
|
'border-width': 3,
|
|
'border-color': '#8b5cf6',
|
|
'width': 50,
|
|
'height': 50,
|
|
'font-size': 14,
|
|
'font-weight': 'bold',
|
|
'text-background-color': '#8b5cf6',
|
|
'text-background-opacity': 0.9
|
|
}
|
|
}
|
|
];
|
|
}
|