🎨 feat: update mindmap templates and JS module for improved UI design
This commit is contained in:
@@ -9,22 +9,12 @@ if (!window.MindMap) {
|
||||
}
|
||||
|
||||
// Registriere den Initialisierer im MindMap-Objekt
|
||||
if (window.MindMap) {
|
||||
window.MindMap.pageInitializers = window.MindMap.pageInitializers || {};
|
||||
window.MindMap.pageInitializers.mindmap = initMindmapPage;
|
||||
}
|
||||
|
||||
// Initialisiere die Mindmap-Seite nur, wenn alle Abhängigkeiten vorhanden sind
|
||||
if (window.MindMap && typeof MindMapVisualization !== 'undefined') {
|
||||
if (document.body && document.body.dataset && document.body.dataset.page === 'mindmap') {
|
||||
window.MindMap.pageInitializers = window.MindMap.pageInitializers || {};
|
||||
window.MindMap.pageInitializers.mindmap = initMindmapPage;
|
||||
initMindmapPage();
|
||||
}
|
||||
}
|
||||
window.MindMap.pageInitializers = window.MindMap.pageInitializers || {};
|
||||
window.MindMap.pageInitializers.mindmap = initMindmapPage;
|
||||
|
||||
// Event-Listener für DOMContentLoaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Prüfe, ob wir auf der Mindmap-Seite sind und initialisiere
|
||||
// Prüfe, ob wir auf der Mindmap-Seite sind
|
||||
if (document.body && document.body.dataset && document.body.dataset.page === 'mindmap') {
|
||||
initMindmapPage();
|
||||
}
|
||||
@@ -34,423 +24,415 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
* Initialisiert die Mindmap-Seite
|
||||
*/
|
||||
function initMindmapPage() {
|
||||
console.log('Mindmap-Seite Initialisierung startet...');
|
||||
console.log('D3 Bibliothek verfügbar:', typeof d3 !== 'undefined');
|
||||
console.log('MindMapVisualization verfügbar:', typeof MindMapVisualization !== 'undefined');
|
||||
console.log('Mindmap-Seite wird initialisiert...');
|
||||
|
||||
const mindmapContainer = document.getElementById('cy');
|
||||
const thoughtsContainer = document.getElementById('thoughts-container');
|
||||
const nodeDetailsContainer = document.getElementById('node-details');
|
||||
|
||||
if (!mindmapContainer) {
|
||||
console.error('Mindmap-Container nicht gefunden!');
|
||||
return;
|
||||
}
|
||||
console.log('Mindmap-Container gefunden:', mindmapContainer);
|
||||
|
||||
// Prüfe, ob D3.js geladen ist
|
||||
if (typeof d3 === 'undefined') {
|
||||
console.error('D3.js ist nicht geladen!');
|
||||
if (mindmapContainer) {
|
||||
mindmapContainer.innerHTML = `
|
||||
<div class="glass-effect p-6 text-center">
|
||||
<div class="text-red-500 mb-4">
|
||||
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
|
||||
</div>
|
||||
<p class="text-xl">D3.js konnte nicht geladen werden. Bitte laden Sie die Seite neu.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
// Hauptcontainer für die Mindmap
|
||||
const cyContainer = document.getElementById('cy');
|
||||
if (!cyContainer) {
|
||||
console.error('Mindmap-Container #cy nicht gefunden!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Prüfe, ob MindMapVisualization definiert ist
|
||||
if (typeof MindMapVisualization === 'undefined') {
|
||||
console.error('MindMapVisualization-Klasse ist nicht definiert!');
|
||||
if (mindmapContainer) {
|
||||
mindmapContainer.innerHTML = `
|
||||
<div class="glass-effect p-6 text-center">
|
||||
<div class="text-red-500 mb-4">
|
||||
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
|
||||
</div>
|
||||
<p class="text-xl">MindMap-Visualisierung konnte nicht geladen werden. Bitte laden Sie die Seite neu.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return;
|
||||
}
|
||||
// Info-Panel für Knotendetails
|
||||
const nodeInfoPanel = document.getElementById('node-info-panel');
|
||||
const nodeDescription = document.getElementById('node-description');
|
||||
const connectedNodes = document.getElementById('connected-nodes');
|
||||
|
||||
// Erstelle die Mindmap-Visualisierung
|
||||
let mindmap;
|
||||
// Toolbar-Buttons
|
||||
const fitButton = document.getElementById('fit-btn');
|
||||
const resetButton = document.getElementById('reset-btn');
|
||||
const toggleLabelsButton = document.getElementById('toggle-labels-btn');
|
||||
|
||||
// Mindmap-Instanz
|
||||
let mindmap = null;
|
||||
|
||||
// Cytoscape.js für die Visualisierung initialisieren
|
||||
try {
|
||||
console.log('Versuche, MindMapVisualization zu erstellen...');
|
||||
mindmap = new MindMapVisualization('#cy', {
|
||||
height: 600,
|
||||
onNodeClick: handleNodeClick
|
||||
});
|
||||
|
||||
// Globale Referenz für die Zoom-Buttons erstellen
|
||||
window.mindmapInstance = mindmap;
|
||||
|
||||
// Lade die Mindmap-Daten
|
||||
mindmap.loadData();
|
||||
console.log('MindMapVisualization erfolgreich erstellt und geladen');
|
||||
|
||||
// Dark Mode Listener registrieren
|
||||
registerDarkModeListener(mindmap);
|
||||
// Cytoscape.js-Bibliothek überprüfen
|
||||
if (typeof cytoscape === 'undefined') {
|
||||
loadExternalScript('https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js')
|
||||
.then(() => {
|
||||
initCytoscape();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Laden von Cytoscape.js:', error);
|
||||
showErrorMessage(cyContainer, 'Cytoscape.js konnte nicht geladen werden.');
|
||||
});
|
||||
} else {
|
||||
initCytoscape();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Erstellen der MindMapVisualization:', error);
|
||||
if (mindmapContainer) {
|
||||
mindmapContainer.innerHTML = `
|
||||
<div class="glass-effect p-6 text-center">
|
||||
<div class="text-red-500 mb-4">
|
||||
<i class="fa-solid fa-triangle-exclamation text-4xl"></i>
|
||||
</div>
|
||||
<p class="text-xl">Fehler beim Erstellen der Mindmap-Visualisierung:</p>
|
||||
<p class="text-md mt-2">${error.message}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
return;
|
||||
console.error('Fehler bei der Initialisierung der Mindmap:', error);
|
||||
showErrorMessage(cyContainer, 'Die Mindmap konnte nicht initialisiert werden: ' + error.message);
|
||||
}
|
||||
|
||||
// Suchfunktion für die Mindmap
|
||||
const searchInput = document.getElementById('search-mindmap');
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener('input', function(e) {
|
||||
mindmap.filterBySearchTerm(e.target.value);
|
||||
/**
|
||||
* Lädt ein externes Script asynchron
|
||||
*/
|
||||
function loadExternalScript(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = url;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
// UI-Elemente initialisieren
|
||||
initializeMindmapButtons(mindmap);
|
||||
|
||||
/**
|
||||
* Behandelt Klicks auf Mindmap-Knoten
|
||||
* Zeigt eine Fehlermeldung im Container an
|
||||
*/
|
||||
async function handleNodeClick(node) {
|
||||
// Details im Detailbereich anzeigen
|
||||
if (nodeDetailsContainer) {
|
||||
updateNodeDetails(node);
|
||||
}
|
||||
|
||||
if (!thoughtsContainer) return;
|
||||
|
||||
// Zeige Lade-Animation
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="flex justify-center items-center p-4">
|
||||
<div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-500"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
// Lade Gedanken für den ausgewählten Knoten
|
||||
const response = await fetch(`/api/nodes/${node.id}/thoughts`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const thoughts = await response.json();
|
||||
|
||||
// Gedanken anzeigen
|
||||
renderThoughts(thoughts, node.name);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Gedanken:', error);
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="p-4">
|
||||
<div class="text-red-500 mb-2">
|
||||
<i class="fa-solid fa-triangle-exclamation text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm">Fehler beim Laden der Gedanken.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Aktualisiert den Node-Details-Bereich mit Informationen zum ausgewählten Knoten
|
||||
*/
|
||||
function updateNodeDetails(node) {
|
||||
if (!nodeDetailsContainer) return;
|
||||
|
||||
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||
const textClass = isDarkMode ? 'text-gray-300' : 'text-gray-600';
|
||||
|
||||
nodeDetailsContainer.innerHTML = `
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold mb-2 ${isDarkMode ? 'text-white' : 'text-gray-800'}">
|
||||
${node.name}
|
||||
</h3>
|
||||
<div class="mb-3">
|
||||
<span class="px-2 py-1 text-xs rounded-full ${getCategoryBadgeClass(node.category)}">
|
||||
${node.category || 'Keine Kategorie'}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm ${textClass}">
|
||||
${node.description || 'Keine Beschreibung verfügbar.'}
|
||||
</p>
|
||||
|
||||
<div class="mt-4 text-sm">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<span class="${textClass}">Erstellt:</span>
|
||||
<span class="${textClass}">${formatDate(node.created_at || new Date())}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="${textClass}">Verbindungen:</span>
|
||||
<span class="${textClass}">${node.connections || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
function showErrorMessage(container, message) {
|
||||
container.innerHTML = `
|
||||
<div class="p-8 text-center bg-red-50 dark:bg-red-900/20 rounded-lg">
|
||||
<i class="fa-solid fa-triangle-exclamation text-4xl text-red-500 mb-4"></i>
|
||||
<p class="text-lg text-red-600 dark:text-red-400">${message}</p>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Bitte laden Sie die Seite neu oder kontaktieren Sie den Support.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Formatiert ein Datum in ein lesbares Format
|
||||
* Initialisiert Cytoscape mit den Mindmap-Daten
|
||||
*/
|
||||
function formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Liefert eine CSS-Klasse für die Kategorie-Badge basierend auf der Kategorie
|
||||
*/
|
||||
function getCategoryBadgeClass(category) {
|
||||
if (!category) return 'bg-gray-500 text-white';
|
||||
function initCytoscape() {
|
||||
console.log('Cytoscape.js wird initialisiert...');
|
||||
|
||||
const categories = {
|
||||
'Konzept': 'bg-blue-500 text-white',
|
||||
'Theorie': 'bg-purple-500 text-white',
|
||||
'Methode': 'bg-green-500 text-white',
|
||||
'Person': 'bg-yellow-500 text-black',
|
||||
'Ereignis': 'bg-red-500 text-white',
|
||||
'Referenz': 'bg-indigo-500 text-white'
|
||||
};
|
||||
|
||||
return categories[category] || 'bg-gray-500 text-white';
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendert die Gedanken in den Container
|
||||
*/
|
||||
function renderThoughts(thoughts, nodeName) {
|
||||
const isDarkMode = document.documentElement.classList.contains('dark');
|
||||
|
||||
// Wenn keine Gedanken vorhanden sind
|
||||
if (thoughts.length === 0) {
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="text-center py-4">
|
||||
<div class="text-blue-400 mb-2">
|
||||
<i class="fa-solid fa-info-circle text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}">
|
||||
Keine Gedanken zu "${nodeName}" vorhanden.
|
||||
</p>
|
||||
<button id="add-thought-btn" class="mt-3 px-3 py-1.5 text-xs rounded-lg transition-colors duration-200"
|
||||
${isDarkMode ?
|
||||
'class="bg-primary-600 hover:bg-primary-700 text-white"' :
|
||||
'class="bg-primary-500 hover:bg-primary-600 text-white"'}>
|
||||
<i class="fa-solid fa-plus mr-1"></i> Gedanke hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event-Listener für den Button
|
||||
document.getElementById('add-thought-btn')?.addEventListener('click', () => {
|
||||
openAddThoughtModal(nodeName);
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Gedanken anzeigen
|
||||
thoughtsContainer.innerHTML = `
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h3 class="text-sm font-semibold ${isDarkMode ? 'text-white' : 'text-gray-800'}">
|
||||
Gedanken zu "${nodeName}"
|
||||
</h3>
|
||||
<button id="add-thought-btn" class="px-2 py-1 text-xs rounded-lg transition-colors duration-200"
|
||||
${isDarkMode ?
|
||||
'class="bg-primary-600 hover:bg-primary-700 text-white"' :
|
||||
'class="bg-primary-500 hover:bg-primary-600 text-white"'}>
|
||||
<i class="fa-solid fa-plus mr-1"></i> Neu
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-3 max-h-80 overflow-y-auto pr-1" id="thoughts-grid"></div>
|
||||
`;
|
||||
|
||||
// Button-Event-Listener
|
||||
document.getElementById('add-thought-btn')?.addEventListener('click', () => {
|
||||
openAddThoughtModal(nodeName);
|
||||
});
|
||||
|
||||
// Gedanken-Karten rendern
|
||||
const thoughtsGrid = document.getElementById('thoughts-grid');
|
||||
thoughts.forEach((thought, index) => {
|
||||
const card = createThoughtCard(thought, isDarkMode);
|
||||
|
||||
// Animation verzögern für gestaffeltes Erscheinen
|
||||
setTimeout(() => {
|
||||
card.classList.add('opacity-100');
|
||||
card.classList.remove('opacity-0', 'translate-y-4');
|
||||
}, index * 100);
|
||||
|
||||
thoughtsGrid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Erstellt eine Gedanken-Karte
|
||||
*/
|
||||
function createThoughtCard(thought, isDarkMode) {
|
||||
const card = document.createElement('div');
|
||||
card.className = `relative transition-all duration-300 opacity-0 translate-y-4 transform rounded-lg overflow-hidden p-3 border-l-4 ${isDarkMode ? 'bg-gray-800/70' : 'bg-white/90'} border-l-[${thought.color_code || '#4080ff'}]`;
|
||||
|
||||
// Karten-Inhalt
|
||||
card.innerHTML = `
|
||||
<div class="flex justify-between items-start mb-1">
|
||||
<h4 class="text-sm font-semibold ${isDarkMode ? 'text-white' : 'text-gray-800'}">${thought.title}</h4>
|
||||
<div class="text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}">${formatDate(thought.timestamp)}</div>
|
||||
</div>
|
||||
<div class="prose dark:prose-invert prose-sm">
|
||||
<p class="text-xs line-clamp-2 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}">${thought.content}</p>
|
||||
</div>
|
||||
${thought.keywords ? `
|
||||
<div class="flex flex-wrap gap-1 mt-2">
|
||||
${thought.keywords.split(',').slice(0, 2).map(keyword =>
|
||||
`<span class="px-2 py-0.5 text-[10px] rounded-full ${isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}">${keyword.trim()}</span>`
|
||||
).join('')}
|
||||
${thought.keywords.split(',').length > 2 ?
|
||||
`<span class="px-2 py-0.5 text-[10px] rounded-full ${isDarkMode ? 'bg-gray-700 text-gray-300' : 'bg-gray-200 text-gray-700'}">+${thought.keywords.split(',').length - 2}</span>` :
|
||||
''}
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="mt-2 flex justify-between items-center">
|
||||
<div class="text-xs ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}">
|
||||
<i class="fa-solid fa-user text-xs mr-1"></i> ${thought.author}
|
||||
</div>
|
||||
<button class="viewThought-btn text-xs px-2 py-1 rounded ${isDarkMode ? 'hover:bg-white/10' : 'hover:bg-gray-200'} transition-colors"
|
||||
data-thought-id="${thought.id}">
|
||||
<i class="fa-solid fa-eye mr-1"></i> Ansehen
|
||||
</button>
|
||||
// Zeige Ladeanimation
|
||||
cyContainer.innerHTML = `
|
||||
<div class="flex justify-center items-center h-full">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event-Listener für die Detailansicht
|
||||
card.querySelector('.viewThought-btn').addEventListener('click', function() {
|
||||
const thoughtId = this.getAttribute('data-thought-id');
|
||||
showThoughtDetail(thoughtId);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Event-Listener für Dark-Mode-Änderungen registrieren
|
||||
*/
|
||||
function registerDarkModeListener(mindmap) {
|
||||
document.addEventListener('darkModeToggled', function(event) {
|
||||
const isDark = event.detail.isDark;
|
||||
console.log('Dark mode changed to:', isDark);
|
||||
|
||||
// Mindmap-Styling aktualisieren
|
||||
if (mindmap && mindmap.updateColorScheme) {
|
||||
mindmap.updateColorScheme(isDark);
|
||||
}
|
||||
|
||||
// UI-Elemente aktualisieren, falls notwendig
|
||||
if (nodeDetailsContainer) {
|
||||
const selectedNode = mindmap.getSelectedNode();
|
||||
if (selectedNode) {
|
||||
updateNodeDetails(selectedNode);
|
||||
// Lade Daten vom Backend
|
||||
fetch('/api/mindmap')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Netzwerkfehler beim Laden der Mindmap-Daten');
|
||||
}
|
||||
}
|
||||
|
||||
if (thoughtsContainer) {
|
||||
const thoughts = thoughtsContainer.querySelector('#thoughts-grid');
|
||||
if (thoughts) {
|
||||
// Einfache Aktualisierung - im Produktionscode würde man das komplexer machen
|
||||
const selectedNode = mindmap.getSelectedNode();
|
||||
if (selectedNode) {
|
||||
handleNodeClick(selectedNode);
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Mindmap-Daten erfolgreich geladen');
|
||||
renderMindmap(data);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Laden der Mindmap-Daten:', error);
|
||||
|
||||
// Verwende Standarddaten als Fallback
|
||||
console.log('Verwende Standarddaten als Fallback...');
|
||||
const defaultData = generateDefaultData();
|
||||
renderMindmap(defaultData);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Generiert Standarddaten für die Mindmap als Fallback
|
||||
*/
|
||||
function generateDefaultData() {
|
||||
return {
|
||||
nodes: [
|
||||
{ id: 'root', name: 'Wissen', description: 'Zentrale Wissensbasis', category: 'Zentral', color_code: '#4299E1' },
|
||||
{ id: 'philosophy', name: 'Philosophie', description: 'Philosophisches Denken', category: 'Philosophie', color_code: '#9F7AEA', parent_id: 'root' },
|
||||
{ id: 'science', name: 'Wissenschaft', description: 'Wissenschaftliche Erkenntnisse', category: 'Wissenschaft', color_code: '#48BB78', parent_id: 'root' },
|
||||
{ id: 'technology', name: 'Technologie', description: 'Technologische Entwicklungen', category: 'Technologie', color_code: '#ED8936', parent_id: 'root' },
|
||||
{ id: 'arts', name: 'Künste', description: 'Künstlerische Ausdrucksformen', category: 'Künste', color_code: '#ED64A6', parent_id: 'root' },
|
||||
{ id: 'psychology', name: 'Psychologie', description: 'Menschliches Verhalten und Geist', category: 'Psychologie', color_code: '#4299E1', parent_id: 'root' }
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Rendert die Mindmap mit Cytoscape.js
|
||||
*/
|
||||
function renderMindmap(data) {
|
||||
console.log('Rendere Mindmap mit Daten:', data);
|
||||
|
||||
// Konvertiere Backend-Daten in Cytoscape-Format
|
||||
const elements = convertToCytoscapeFormat(data);
|
||||
|
||||
// Leere den Container
|
||||
cyContainer.innerHTML = '';
|
||||
|
||||
// Erstelle Cytoscape-Instanz
|
||||
mindmap = cytoscape({
|
||||
container: cyContainer,
|
||||
elements: elements,
|
||||
style: [
|
||||
{
|
||||
selector: 'node',
|
||||
style: {
|
||||
'background-color': 'data(color)',
|
||||
'label': 'data(name)',
|
||||
'width': 30,
|
||||
'height': 30,
|
||||
'font-size': 12,
|
||||
'text-valign': 'bottom',
|
||||
'text-halign': 'center',
|
||||
'text-margin-y': 8,
|
||||
'color': document.documentElement.classList.contains('dark') ? '#f1f5f9' : '#334155',
|
||||
'text-background-color': document.documentElement.classList.contains('dark') ? '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: 'edge',
|
||||
style: {
|
||||
'width': 2,
|
||||
'line-color': document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
|
||||
'target-arrow-color': document.documentElement.classList.contains('dark') ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)',
|
||||
'curve-style': 'bezier'
|
||||
}
|
||||
},
|
||||
{
|
||||
selector: 'node:selected',
|
||||
style: {
|
||||
'background-color': 'data(color)',
|
||||
'border-width': 3,
|
||||
'border-color': '#8b5cf6',
|
||||
'width': 40,
|
||||
'height': 40,
|
||||
'font-size': 14,
|
||||
'font-weight': 'bold',
|
||||
'text-background-color': '#8b5cf6',
|
||||
'text-background-opacity': 0.9
|
||||
}
|
||||
}
|
||||
],
|
||||
layout: {
|
||||
name: 'cose',
|
||||
animate: true,
|
||||
animationDuration: 800,
|
||||
nodeDimensionsIncludeLabels: true,
|
||||
refresh: 30,
|
||||
randomize: true,
|
||||
componentSpacing: 100,
|
||||
nodeRepulsion: 8000,
|
||||
nodeOverlap: 20,
|
||||
idealEdgeLength: 200,
|
||||
edgeElasticity: 100,
|
||||
nestingFactor: 1.2,
|
||||
gravity: 80,
|
||||
fit: true,
|
||||
padding: 30
|
||||
}
|
||||
});
|
||||
|
||||
// Event-Listener für Knoteninteraktionen
|
||||
mindmap.on('tap', 'node', function(evt) {
|
||||
const node = evt.target;
|
||||
const nodeData = node.data();
|
||||
|
||||
// Update Info-Panel
|
||||
updateNodeInfoPanel(nodeData);
|
||||
|
||||
// Lade verbundene Knoten
|
||||
updateConnectedNodes(node);
|
||||
});
|
||||
|
||||
// Toolbar-Buttons aktivieren
|
||||
if (fitButton) {
|
||||
fitButton.addEventListener('click', () => {
|
||||
mindmap.fit();
|
||||
mindmap.center();
|
||||
});
|
||||
}
|
||||
|
||||
if (resetButton) {
|
||||
resetButton.addEventListener('click', () => {
|
||||
mindmap.layout({
|
||||
name: 'cose',
|
||||
animate: true,
|
||||
randomize: true,
|
||||
fit: true
|
||||
}).run();
|
||||
});
|
||||
}
|
||||
|
||||
if (toggleLabelsButton) {
|
||||
let labelsVisible = true;
|
||||
toggleLabelsButton.addEventListener('click', () => {
|
||||
labelsVisible = !labelsVisible;
|
||||
|
||||
if (labelsVisible) {
|
||||
mindmap.style()
|
||||
.selector('node')
|
||||
.style('label', 'data(name)')
|
||||
.update();
|
||||
} else {
|
||||
mindmap.style()
|
||||
.selector('node')
|
||||
.style('label', '')
|
||||
.update();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Dark Mode-Änderungen überwachen
|
||||
document.addEventListener('darkModeToggled', function(event) {
|
||||
updateDarkModeStyles(event.detail.isDark);
|
||||
});
|
||||
|
||||
// Initial fit und center
|
||||
setTimeout(() => {
|
||||
mindmap.fit();
|
||||
mindmap.center();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialisiert die Buttons für die Mindmap
|
||||
* Konvertiert die Backend-Daten ins Cytoscape-Format
|
||||
*/
|
||||
function initializeMindmapButtons(mindmap) {
|
||||
// Zoom-Buttons
|
||||
document.getElementById('zoomIn')?.addEventListener('click', () => mindmap.zoomIn());
|
||||
document.getElementById('zoomOut')?.addEventListener('click', () => mindmap.zoomOut());
|
||||
document.getElementById('zoomReset')?.addEventListener('click', () => mindmap.zoomReset());
|
||||
function convertToCytoscapeFormat(data) {
|
||||
const elements = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
|
||||
// Layout-Button
|
||||
document.getElementById('reLayout')?.addEventListener('click', () => mindmap.reLayout());
|
||||
// Nodes hinzufügen
|
||||
if (data.nodes && data.nodes.length > 0) {
|
||||
data.nodes.forEach(node => {
|
||||
elements.nodes.push({
|
||||
data: {
|
||||
id: String(node.id),
|
||||
name: node.name,
|
||||
description: node.description || 'Keine Beschreibung verfügbar',
|
||||
category: node.category || 'Allgemein',
|
||||
color: node.color_code || getRandomColor()
|
||||
}
|
||||
});
|
||||
|
||||
// Kante zum Elternknoten hinzufügen (falls vorhanden)
|
||||
if (node.parent_id) {
|
||||
elements.edges.push({
|
||||
data: {
|
||||
id: `edge-${node.parent_id}-${node.id}`,
|
||||
source: String(node.parent_id),
|
||||
target: String(node.id)
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Zusätzliche Kanten zwischen Knoten hinzufügen (falls in den Daten vorhanden)
|
||||
if (data.edges && data.edges.length > 0) {
|
||||
data.edges.forEach(edge => {
|
||||
elements.edges.push({
|
||||
data: {
|
||||
id: `edge-${edge.source}-${edge.target}`,
|
||||
source: String(edge.source),
|
||||
target: String(edge.target)
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Export-Button
|
||||
document.getElementById('exportMindmap')?.addEventListener('click', () => mindmap.exportMindmap());
|
||||
|
||||
// Bearbeitungs-Buttons
|
||||
document.getElementById('addNode')?.addEventListener('click', () => openAddNodeModal(mindmap));
|
||||
document.getElementById('addEdge')?.addEventListener('click', () => mindmap.startAddEdgeMode());
|
||||
document.getElementById('editNode')?.addEventListener('click', () => {
|
||||
const selectedNode = mindmap.getSelectedNode();
|
||||
if (selectedNode) {
|
||||
openEditNodeModal(selectedNode, mindmap);
|
||||
} else {
|
||||
showNotification('Bitte wählen Sie zuerst einen Knoten aus.', 'warning');
|
||||
}
|
||||
});
|
||||
document.getElementById('deleteNode')?.addEventListener('click', () => {
|
||||
const selectedNode = mindmap.getSelectedNode();
|
||||
if (selectedNode) {
|
||||
confirmDeleteNode(selectedNode, mindmap);
|
||||
} else {
|
||||
showNotification('Bitte wählen Sie zuerst einen Knoten aus.', 'warning');
|
||||
}
|
||||
});
|
||||
document.getElementById('deleteEdge')?.addEventListener('click', () => {
|
||||
const selectedEdge = mindmap.getSelectedEdge();
|
||||
if (selectedEdge) {
|
||||
confirmDeleteEdge(selectedEdge, mindmap);
|
||||
} else {
|
||||
showNotification('Bitte wählen Sie zuerst eine Verbindung aus.', 'warning');
|
||||
}
|
||||
});
|
||||
return elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeigt eine Benachrichtigung an
|
||||
* Aktualisiert das Informations-Panel mit den Knotendaten
|
||||
*/
|
||||
function showNotification(message, type = 'info') {
|
||||
console.log(`Benachrichtigung (${type}): ${message}`);
|
||||
// Implementiere eine Toast-Benachrichtigung
|
||||
// ...
|
||||
function updateNodeInfoPanel(nodeData) {
|
||||
if (nodeInfoPanel && nodeDescription) {
|
||||
// Panel anzeigen
|
||||
nodeInfoPanel.style.display = 'block';
|
||||
|
||||
// Titel und Beschreibung aktualisieren
|
||||
const titleElement = nodeInfoPanel.querySelector('.info-panel-title');
|
||||
if (titleElement) {
|
||||
titleElement.textContent = nodeData.name;
|
||||
}
|
||||
|
||||
if (nodeDescription) {
|
||||
nodeDescription.textContent = nodeData.description || 'Keine Beschreibung verfügbar';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ... Weitere Funktionen wie openAddThoughtModal, openAddNodeModal usw. ...
|
||||
}
|
||||
|
||||
/**
|
||||
* Öffnet das Modal zum Hinzufügen eines Gedankens
|
||||
*/
|
||||
function openAddThoughtModal(nodeName) {
|
||||
// Modal-Implementierung...
|
||||
}
|
||||
|
||||
/**
|
||||
* Zeigt die Detailansicht eines Gedankens
|
||||
*/
|
||||
function showThoughtDetail(thoughtId) {
|
||||
// Detailansicht-Implementierung...
|
||||
/**
|
||||
* Aktualisiert die Liste der verbundenen Knoten
|
||||
*/
|
||||
function updateConnectedNodes(node) {
|
||||
if (connectedNodes) {
|
||||
// Leere den Container
|
||||
connectedNodes.innerHTML = '';
|
||||
|
||||
// Hole verbundene Knoten
|
||||
const connectedEdges = node.connectedEdges();
|
||||
|
||||
if (connectedEdges.length === 0) {
|
||||
connectedNodes.innerHTML = '<div class="text-sm italic">Keine verbundenen Knoten</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Füge alle verbundenen Knoten hinzu
|
||||
connectedEdges.forEach(edge => {
|
||||
const targetNode = edge.target().id() === node.id() ? edge.source() : edge.target();
|
||||
const targetData = targetNode.data();
|
||||
|
||||
const nodeLink = document.createElement('div');
|
||||
nodeLink.className = 'node-link';
|
||||
nodeLink.innerHTML = `
|
||||
<span class="w-2 h-2 rounded-full" style="background-color: ${targetData.color}"></span>
|
||||
${targetData.name}
|
||||
`;
|
||||
|
||||
// Klick-Event zum Fokussieren des Knotens
|
||||
nodeLink.addEventListener('click', () => {
|
||||
mindmap.center(targetNode);
|
||||
targetNode.select();
|
||||
updateNodeInfoPanel(targetData);
|
||||
updateConnectedNodes(targetNode);
|
||||
});
|
||||
|
||||
connectedNodes.appendChild(nodeLink);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Aktualisiert die Styles bei Dark Mode-Änderungen
|
||||
*/
|
||||
function updateDarkModeStyles(isDark) {
|
||||
if (!mindmap) return;
|
||||
|
||||
const textColor = isDark ? '#f1f5f9' : '#334155';
|
||||
const textBgColor = isDark ? 'rgba(30, 41, 59, 0.8)' : 'rgba(241, 245, 249, 0.8)';
|
||||
const edgeColor = isDark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(30, 41, 59, 0.15)';
|
||||
|
||||
mindmap.style()
|
||||
.selector('node')
|
||||
.style({
|
||||
'color': textColor,
|
||||
'text-background-color': textBgColor
|
||||
})
|
||||
.selector('edge')
|
||||
.style({
|
||||
'line-color': edgeColor,
|
||||
'target-arrow-color': edgeColor
|
||||
})
|
||||
.update();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generiert eine zufällige Farbe
|
||||
*/
|
||||
function getRandomColor() {
|
||||
const colors = [
|
||||
'#4299E1', // Blau
|
||||
'#9F7AEA', // Lila
|
||||
'#48BB78', // Grün
|
||||
'#ED8936', // Orange
|
||||
'#ED64A6', // Pink
|
||||
'#F56565' // Rot
|
||||
];
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user