diff --git a/static/js/mindmap-interaction.js b/static/js/mindmap-interaction.js deleted file mode 100644 index 59a9028..0000000 --- a/static/js/mindmap-interaction.js +++ /dev/null @@ -1,219 +0,0 @@ -/** - * Mindmap Interaction Enhancement - * Verbessert die Interaktion mit der Mindmap und steuert die Seitenleisten-Anzeige - */ - -// Globale Variablen -let selectedNode = null; -let isLegendVisible = true; - -// Initialisierung der Mindmap -document.addEventListener('mindmap-loaded', function() { - const cy = window.cy; - if (!cy) return; - - // Event-Listener für Knoten-Klicks - cy.on('tap', 'node', function(evt) { - const node = evt.target; - - // Alle vorherigen Hervorhebungen zurücksetzen - cy.nodes().forEach(n => { - n.removeStyle(); - n.connectedEdges().removeStyle(); - }); - - // Speichere ausgewählten Knoten - selectedNode = node; - - // Aktiviere leuchtenden Effekt statt Umkreisung - node.style({ - 'background-opacity': 1, - 'background-color': node.data('color'), - 'shadow-color': node.data('color'), - 'shadow-opacity': 1, - 'shadow-blur': 15, - 'shadow-offset-x': 0, - 'shadow-offset-y': 0 - }); - - // Verbundene Kanten und Knoten hervorheben - const connectedEdges = node.connectedEdges(); - const connectedNodes = node.neighborhood('node'); - - connectedEdges.style({ - 'line-color': '#a78bfa', - 'target-arrow-color': '#a78bfa', - 'source-arrow-color': '#a78bfa', - 'line-opacity': 0.8, - 'width': 2 - }); - - connectedNodes.style({ - 'shadow-opacity': 0.7, - 'shadow-blur': 10, - 'shadow-color': '#a78bfa' - }); - - // Info-Panel aktualisieren - updateInfoPanel(node); - - // Seitenleiste aktualisieren - updateSidebar(node); - }); - - // Klick auf Hintergrund - Auswahl zurücksetzen - cy.on('tap', function(evt) { - if (evt.target === cy) { - resetSelection(cy); - } - }); - - // Zoom-Controls - document.getElementById('zoomIn')?.addEventListener('click', () => { - cy.zoom({ - level: cy.zoom() * 1.2, - renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } - }); - }); - - document.getElementById('zoomOut')?.addEventListener('click', () => { - cy.zoom({ - level: cy.zoom() / 1.2, - renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } - }); - }); - - document.getElementById('resetView')?.addEventListener('click', () => { - cy.fit(); - resetSelection(cy); - }); - - // Legend-Toggle - document.getElementById('toggleLegend')?.addEventListener('click', () => { - const legend = document.getElementById('categoryLegend'); - if (legend) { - isLegendVisible = !isLegendVisible; - legend.style.display = isLegendVisible ? 'block' : 'none'; - } - }); - - // Keyboard-Controls - document.addEventListener('keydown', (e) => { - if (e.key === '+' || e.key === '=') { - cy.zoom({ - level: cy.zoom() * 1.2, - renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } - }); - } else if (e.key === '-' || e.key === '_') { - cy.zoom({ - level: cy.zoom() / 1.2, - renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 } - }); - } else if (e.key === 'Escape') { - resetSelection(cy); - } - }); -}); - -/** - * Aktualisiert das Info-Panel mit Knoteninformationen - * @param {Object} node - Der ausgewählte Knoten - */ -function updateInfoPanel(node) { - const infoPanel = document.getElementById('infoPanel'); - if (!infoPanel) return; - - const data = node.data(); - const connectedNodes = node.neighborhood('node'); - - let html = ` -

${data.label || data.name}

-

${data.category || 'Keine Kategorie'}

- ${data.description ? `

${data.description}

` : ''} -
-

Verbindungen (${connectedNodes.length})

- -
- `; - - infoPanel.innerHTML = html; - infoPanel.style.display = 'block'; -} - -/** - * Aktualisiert die Seitenleiste mit Knoteninformationen - * @param {Object} node - Der ausgewählte Knoten - */ -function updateSidebar(node) { - const sidebar = document.getElementById('sidebar'); - if (!sidebar) return; - - const data = node.data(); - const connectedNodes = node.neighborhood('node'); - - let html = ` -
-

${data.label || data.name}

-

${data.category || 'Keine Kategorie'}

- ${data.description ? `

${data.description}

` : ''} -
-

Verbindungen (${connectedNodes.length})

- -
-
- `; - - sidebar.innerHTML = html; -} - -/** - * Setzt die Auswahl zurück - * @param {Object} cy - Cytoscape-Instanz - */ -function resetSelection(cy) { - selectedNode = null; - - // Alle Hervorhebungen zurücksetzen - cy.nodes().forEach(node => { - node.removeStyle(); - node.connectedEdges().removeStyle(); - }); - - // Info-Panel ausblenden - const infoPanel = document.getElementById('infoPanel'); - if (infoPanel) { - infoPanel.style.display = 'none'; - } - - // Seitenleiste leeren - const sidebar = document.getElementById('sidebar'); - if (sidebar) { - sidebar.innerHTML = ''; - } -} \ No newline at end of file diff --git a/static/js/mindmap.html b/static/js/mindmap.html deleted file mode 100644 index b17eb06..0000000 --- a/static/js/mindmap.html +++ /dev/null @@ -1,234 +0,0 @@ - - - - - - Interaktive Mindmap - - - - - - - - - - - - - -
-
-

Interaktive Mindmap

-
- -
-
- -
- - - - - - - -
- -
- -
- -
- - -
- - - - - - - - \ No newline at end of file diff --git a/static/js/mindmap.js b/static/js/mindmap.js deleted file mode 100644 index b6c441d..0000000 --- a/static/js/mindmap.js +++ /dev/null @@ -1,690 +0,0 @@ -/** - * Mindmap.js - Interaktive Mind-Map Implementierung - * - Event-Listener und Interaktionslogik - * - Fetch API für REST-Zugriffe - * - Socket.IO für Echtzeit-Synchronisation - * - Lazy Loading & Progressive Disclosure - */ - -(async () => { - /* 1. Event-Listener und Interaktionslogik */ - - // Warte auf die Cytoscape-Instanz - document.addEventListener('mindmap-loaded', function() { - const cy = window.cy; - if (!cy) return; - - // Tooltip-Funktionalität - cy.nodes().unbind('mouseover').bind('mouseover', (event) => { - const node = event.target; - const description = node.data('description'); - - if (description) { - const tooltip = document.getElementById('node-tooltip') || - document.createElement('div'); - - if (!tooltip.id) { - tooltip.id = 'node-tooltip'; - tooltip.style.position = 'absolute'; - tooltip.style.backgroundColor = '#333'; - tooltip.style.color = '#fff'; - tooltip.style.padding = '8px'; - tooltip.style.borderRadius = '4px'; - tooltip.style.maxWidth = '250px'; - tooltip.style.zIndex = 10; - tooltip.style.pointerEvents = 'none'; - tooltip.style.transition = 'opacity 0.2s'; - tooltip.style.boxShadow = '0 2px 10px rgba(0,0,0,0.3)'; - document.body.appendChild(tooltip); - } - - const renderedPosition = node.renderedPosition(); - const containerRect = cy.container().getBoundingClientRect(); - - tooltip.innerHTML = description; - tooltip.style.left = (containerRect.left + renderedPosition.x + 25) + 'px'; - tooltip.style.top = (containerRect.top + renderedPosition.y - 15) + 'px'; - tooltip.style.opacity = '1'; - } - }); - - // Mouseout-Event für Tooltip - cy.nodes().unbind('mouseout').bind('mouseout', () => { - const tooltip = document.getElementById('node-tooltip'); - if (tooltip) { - tooltip.style.opacity = '0'; - } - }); - - // Kontextmenü - setupContextMenu(cy); - }); -})(); - -/** - * Richtet das Kontextmenü ein - * @param {Object} cy - Cytoscape-Instanz - */ -function setupContextMenu(cy) { - cy.on('cxttap', 'node', function(e) { - const node = e.target; - const nodeData = node.data(); - - // Position des Kontextmenüs berechnen - const renderedPosition = node.renderedPosition(); - const containerRect = cy.container().getBoundingClientRect(); - const menuX = containerRect.left + renderedPosition.x; - const menuY = containerRect.top + renderedPosition.y; - - // Kontextmenü erstellen oder aktualisieren - let contextMenu = document.getElementById('context-menu'); - if (!contextMenu) { - contextMenu = document.createElement('div'); - contextMenu.id = 'context-menu'; - contextMenu.style.position = 'absolute'; - contextMenu.style.backgroundColor = '#fff'; - contextMenu.style.border = '1px solid #ccc'; - contextMenu.style.borderRadius = '4px'; - contextMenu.style.padding = '5px 0'; - contextMenu.style.boxShadow = '0 2px 10px rgba(0,0,0,0.2)'; - contextMenu.style.zIndex = 1000; - document.body.appendChild(contextMenu); - } - - // Menüinhalte - contextMenu.innerHTML = ` -
Knoten bearbeiten
-
Verbindung erstellen
-
Knoten löschen
- `; - - // Styling für Menüpunkte - const menuItems = contextMenu.querySelectorAll('.menu-item'); - menuItems.forEach(item => { - item.style.padding = '8px 16px'; - item.style.cursor = 'pointer'; - item.style.transition = 'background-color 0.2s'; - - item.addEventListener('mouseover', () => { - item.style.backgroundColor = '#f0f0f0'; - }); - - item.addEventListener('mouseout', () => { - item.style.backgroundColor = ''; - }); - - item.addEventListener('click', () => { - const action = item.dataset.action; - handleContextMenuAction(action, node); - contextMenu.style.display = 'none'; - }); - }); - - // Menü positionieren - contextMenu.style.left = menuX + 'px'; - contextMenu.style.top = menuY + 'px'; - contextMenu.style.display = 'block'; - - // Klick außerhalb schließt Menü - document.addEventListener('click', function closeMenu(e) { - if (!contextMenu.contains(e.target)) { - contextMenu.style.display = 'none'; - document.removeEventListener('click', closeMenu); - } - }); - }); -} - -/** - * Behandelt Aktionen aus dem Kontextmenü - * @param {string} action - Die ausgewählte Aktion - * @param {Object} node - Der betroffene Knoten - */ -function handleContextMenuAction(action, node) { - switch (action) { - case 'edit': - // Implementiere Bearbeitungslogik - console.log('Bearbeite Knoten:', node.id()); - break; - case 'connect': - // Implementiere Verbindungslogik - console.log('Erstelle Verbindung für:', node.id()); - break; - case 'delete': - // Implementiere Löschlogik - console.log('Lösche Knoten:', node.id()); - break; - } -} - - /* 2. Hilfs-Funktionen für API-Zugriffe */ - const get = async endpoint => { - try { - const response = await fetch(endpoint); - if (!response.ok) { - console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`); - return []; // Leeres Array zurückgeben bei Fehlern - } - return await response.json(); - } catch (error) { - console.error(`Fehler beim Abrufen von ${endpoint}:`, error); - return []; // Leeres Array zurückgeben bei Netzwerkfehlern - } - }; - - const post = async (endpoint, body) => { - try { - const response = await fetch(endpoint, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(body) - }); - if (!response.ok) { - console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`); - return {}; // Leeres Objekt zurückgeben bei Fehlern - } - return await response.json(); - } catch (error) { - console.error(`Fehler beim POST zu ${endpoint}:`, error); - return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern - } - }; - - const del = async endpoint => { - try { - const response = await fetch(endpoint, { method: 'DELETE' }); - if (!response.ok) { - console.error(`API-Fehler: ${endpoint} antwortet mit Status ${response.status}`); - return {}; // Leeres Objekt zurückgeben bei Fehlern - } - return await response.json(); - } catch (error) { - console.error(`Fehler beim DELETE zu ${endpoint}:`, error); - return {}; // Leeres Objekt zurückgeben bei Netzwerkfehlern - } - }; - - /* 3. Kategorien laden für Style-Informationen */ - let categories = await get('/api/categories'); - - /* 4. Daten laden und Rendering */ - const loadMindmap = async () => { - try { - // Initial nur die oberste Ebene laden - const rootNodes = await get('/api/mind_map_nodes?level=root'); - - // Graph leeren (für Reload-Fälle) - cy.elements().remove(); - - // Überprüfen, ob nodes ein Array ist, wenn nicht, setze es auf ein leeres Array - const nodesArray = Array.isArray(rootNodes) ? rootNodes : []; - - // Root-Knoten zum Graph hinzufügen - cy.add( - nodesArray.map(node => { - // Kategorie-Informationen für Styling abrufen - const category = categories.find(c => c.id === node.category_id) || {}; - - return { - data: { - id: node.id.toString(), - name: node.name, - description: node.description, - color: node.color_code || category.color_code || '#6b7280', - icon: node.icon || category.icon, - category_id: node.category_id, - hasChildren: node.has_children || false, // Neue Eigenschaft - expanded: false // Neue Eigenschaft für den Expansionsstatus - }, - position: node.x && node.y ? { x: node.x, y: node.y } : undefined - }; - }) - ); - - // Überprüfen, ob relationships ein Array ist, wenn nicht, setze es auf ein leeres Array - const relationshipsArray = Array.isArray(relationships) ? relationships : []; - - // Kanten zum Graph hinzufügen - cy.add( - relationshipsArray.map(rel => ({ - data: { - id: `${rel.parent_id}_${rel.child_id}`, - source: rel.parent_id.toString(), - target: rel.child_id.toString() - } - })) - ); - - // Wenn keine Knoten geladen wurden, Fallback-Knoten erstellen - if (nodesArray.length === 0) { - // Mindestens einen Standardknoten hinzufügen - cy.add({ - data: { - id: 'fallback-1', - name: 'Mindmap', - description: 'Erstellen Sie hier Ihre eigene Mindmap', - color: '#3b82f6', - icon: 'help-circle' - }, - position: { x: 300, y: 200 } - }); - - // Erfolgsmeldung anzeigen - console.log('Mindmap erfolgreich initialisiert mit Fallback-Knoten'); - - // Info-Meldung für Benutzer anzeigen - const infoBox = document.createElement('div'); - infoBox.classList.add('info-message'); - infoBox.style.position = 'absolute'; - infoBox.style.top = '50%'; - infoBox.style.left = '50%'; - infoBox.style.transform = 'translate(-50%, -50%)'; - infoBox.style.padding = '15px 20px'; - infoBox.style.backgroundColor = 'rgba(59, 130, 246, 0.9)'; - infoBox.style.color = 'white'; - infoBox.style.borderRadius = '8px'; - infoBox.style.zIndex = '5'; - infoBox.style.maxWidth = '80%'; - infoBox.style.textAlign = 'center'; - infoBox.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; - infoBox.innerHTML = 'Mindmap erfolgreich initialisiert.
Verwenden Sie die Werkzeugleiste, um Knoten hinzuzufügen.'; - - document.getElementById('cy').appendChild(infoBox); - - // Meldung nach 5 Sekunden ausblenden - setTimeout(() => { - infoBox.style.opacity = '0'; - infoBox.style.transition = 'opacity 0.5s ease'; - setTimeout(() => { - if (infoBox.parentNode) { - infoBox.parentNode.removeChild(infoBox); - } - }, 500); - }, 5000); - } - - // Layout anwenden wenn keine Positionsdaten vorhanden - const nodesWithoutPosition = cy.nodes().filter(node => - !node.position() || (node.position().x === 0 && node.position().y === 0) - ); - - if (nodesWithoutPosition.length > 0) { - cy.layout({ - name: 'breadthfirst', - directed: true, - padding: 30, - spacingFactor: 1.2 - }).run(); - } - } catch (error) { - console.error('Fehler beim Laden der Mindmap:', error); - alert('Die Mindmap konnte nicht geladen werden. Bitte prüfen Sie die Konsole für Details.'); - } - }; - - // Initial laden - await loadMindmap(); - - /* 5. Socket.IO für Echtzeit-Synchronisation */ - const socket = io(); - - socket.on('node_added', async (node) => { - // Kategorie-Informationen für Styling abrufen - const category = categories.find(c => c.id === node.category_id) || {}; - - cy.add({ - data: { - id: node.id.toString(), - name: node.name, - description: node.description, - color: node.color_code || category.color_code || '#6b7280', - icon: node.icon || category.icon, - category_id: node.category_id - } - }); - - // Layout neu anwenden, wenn nötig - if (!node.x || !node.y) { - cy.layout({ name: 'breadthfirst', directed: true, padding: 30 }).run(); - } - }); - - socket.on('node_updated', (node) => { - const cyNode = cy.$id(node.id.toString()); - if (cyNode.length > 0) { - // Kategorie-Informationen für Styling abrufen - const category = categories.find(c => c.id === node.category_id) || {}; - - cyNode.data({ - name: node.name, - description: node.description, - color: node.color_code || category.color_code || '#6b7280', - icon: node.icon || category.icon, - category_id: node.category_id - }); - - if (node.x && node.y) { - cyNode.position({ x: node.x, y: node.y }); - } - } - }); - - socket.on('node_deleted', (nodeId) => { - const cyNode = cy.$id(nodeId.toString()); - if (cyNode.length > 0) { - cy.remove(cyNode); - } - }); - - socket.on('relationship_added', (rel) => { - cy.add({ - data: { - id: `${rel.parent_id}_${rel.child_id}`, - source: rel.parent_id.toString(), - target: rel.child_id.toString() - } - }); - }); - - socket.on('relationship_deleted', (rel) => { - const edgeId = `${rel.parent_id}_${rel.child_id}`; - const cyEdge = cy.$id(edgeId); - if (cyEdge.length > 0) { - cy.remove(cyEdge); - } - }); - - socket.on('category_updated', async () => { - // Kategorien neu laden - categories = await get('/api/categories'); - // Nodes aktualisieren, die diese Kategorie verwenden - cy.nodes().forEach(node => { - const categoryId = node.data('category_id'); - if (categoryId) { - const category = categories.find(c => c.id === categoryId); - if (category) { - node.data('color', node.data('color_code') || category.color_code); - node.data('icon', node.data('icon') || category.icon); - } - } - }); - }); - - /* 6. UI-Interaktionen */ - // Knoten hinzufügen - const btnAddNode = document.getElementById('addNode'); - if (btnAddNode) { - btnAddNode.addEventListener('click', async () => { - const name = prompt('Knotenname eingeben:'); - if (!name) return; - - const description = prompt('Beschreibung (optional):'); - - // Kategorie auswählen - let categoryId = null; - if (categories.length > 0) { - const categoryOptions = categories.map((c, i) => `${i}: ${c.name}`).join('\n'); - const categoryChoice = prompt( - `Kategorie auswählen (Nummer eingeben):\n${categoryOptions}`, - '0' - ); - - if (categoryChoice !== null) { - const index = parseInt(categoryChoice, 10); - if (!isNaN(index) && index >= 0 && index < categories.length) { - categoryId = categories[index].id; - } - } - } - - // Knoten erstellen - await post('/api/mind_map_node', { - name, - description, - category_id: categoryId - }); - // Darstellung wird durch Socket.IO Event übernommen - }); - } - - // Verbindung hinzufügen - const btnAddEdge = document.getElementById('addEdge'); - if (btnAddEdge) { - btnAddEdge.addEventListener('click', async () => { - const sel = cy.$('node:selected'); - if (sel.length !== 2) { - alert('Bitte genau zwei Knoten auswählen (Parent → Child)'); - return; - } - - const [parent, child] = sel.map(node => node.id()); - await post('/api/node_relationship', { - parent_id: parent, - child_id: child - }); - // Darstellung wird durch Socket.IO Event übernommen - }); - } - - // Knoten bearbeiten - const btnEditNode = document.getElementById('editNode'); - if (btnEditNode) { - btnEditNode.addEventListener('click', async () => { - const sel = cy.$('node:selected'); - if (sel.length !== 1) { - alert('Bitte genau einen Knoten auswählen'); - return; - } - - const node = sel[0]; - const nodeData = node.data(); - - const name = prompt('Knotenname:', nodeData.name); - if (!name) return; - - const description = prompt('Beschreibung:', nodeData.description || ''); - - // Kategorie auswählen - let categoryId = nodeData.category_id; - if (categories.length > 0) { - const categoryOptions = categories.map((c, i) => `${i}: ${c.name}`).join('\n'); - const categoryChoice = prompt( - `Kategorie auswählen (Nummer eingeben):\n${categoryOptions}`, - categories.findIndex(c => c.id === categoryId).toString() - ); - - if (categoryChoice !== null) { - const index = parseInt(categoryChoice, 10); - if (!isNaN(index) && index >= 0 && index < categories.length) { - categoryId = categories[index].id; - } - } - } - - // Knoten aktualisieren - await post(`/api/mind_map_node/${nodeData.id}`, { - name, - description, - category_id: categoryId - }); - // Darstellung wird durch Socket.IO Event übernommen - }); - } - - // Knoten löschen - const btnDeleteNode = document.getElementById('deleteNode'); - if (btnDeleteNode) { - btnDeleteNode.addEventListener('click', async () => { - const sel = cy.$('node:selected'); - if (sel.length !== 1) { - alert('Bitte genau einen Knoten auswählen'); - return; - } - - if (confirm('Sind Sie sicher, dass Sie diesen Knoten löschen möchten?')) { - const nodeId = sel[0].id(); - await del(`/api/mind_map_node/${nodeId}`); - // Darstellung wird durch Socket.IO Event übernommen - } - }); - } - - // Verbindung löschen - const btnDeleteEdge = document.getElementById('deleteEdge'); - if (btnDeleteEdge) { - btnDeleteEdge.addEventListener('click', async () => { - const sel = cy.$('edge:selected'); - if (sel.length !== 1) { - alert('Bitte genau eine Verbindung auswählen'); - return; - } - - if (confirm('Sind Sie sicher, dass Sie diese Verbindung löschen möchten?')) { - const edge = sel[0]; - const parentId = edge.source().id(); - const childId = edge.target().id(); - - await del(`/api/node_relationship/${parentId}/${childId}`); - // Darstellung wird durch Socket.IO Event übernommen - } - }); - } - - // Layout aktualisieren - const btnReLayout = document.getElementById('reLayout'); - if (btnReLayout) { - btnReLayout.addEventListener('click', () => { - cy.layout({ - name: 'breadthfirst', - directed: true, - padding: 30, - spacingFactor: 1.2 - }).run(); - }); - } - - /* 7. Position speichern bei Drag & Drop */ - cy.on('dragfree', 'node', async (e) => { - const node = e.target; - const position = node.position(); - - await post(`/api/mind_map_node/${node.id()}/position`, { - x: Math.round(position.x), - y: Math.round(position.y) - }); - - // Andere Benutzer erhalten die Position über den node_updated Event - }); - -/* 8. Export-Funktion (optional) */ - const btnExport = document.getElementById('exportMindmap'); - if (btnExport) { - btnExport.addEventListener('click', () => { - const elements = cy.json().elements; - const exportData = { - nodes: elements.nodes.map(n => ({ - id: n.data.id, - name: n.data.name, - description: n.data.description, - category_id: n.data.category_id, - x: Math.round(n.position?.x || 0), - y: Math.round(n.position?.y || 0) - })), - relationships: elements.edges.map(e => ({ - parent_id: e.data.source, - child_id: e.data.target - })) - }; - - const blob = new Blob([JSON.stringify(exportData, null, 2)], {type: 'application/json'}); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'mindmap_export.json'; - document.body.appendChild(a); - a.click(); - document.body.removeChild(a); - URL.revokeObjectURL(url); - }); - } - - /* 10. Filter-Funktion nach Kategorien (optional) */ - const setupCategoryFilters = () => { - const filterContainer = document.getElementById('category-filters'); - if (!filterContainer || !categories.length) return; - - filterContainer.innerHTML = ''; - - // "Alle anzeigen" Option - const allBtn = document.createElement('button'); - allBtn.innerText = 'Alle Kategorien'; - allBtn.className = 'category-filter active'; - allBtn.onclick = () => { - document.querySelectorAll('.category-filter').forEach(btn => btn.classList.remove('active')); - allBtn.classList.add('active'); - cy.nodes().removeClass('filtered').show(); - cy.edges().show(); - }; - filterContainer.appendChild(allBtn); - - // Filter-Button pro Kategorie - categories.forEach(category => { - const btn = document.createElement('button'); - btn.innerText = category.name; - btn.className = 'category-filter'; - btn.style.backgroundColor = category.color_code; - btn.style.color = '#fff'; - btn.onclick = () => { - document.querySelectorAll('.category-filter').forEach(btn => btn.classList.remove('active')); - btn.classList.add('active'); - - const matchingNodes = cy.nodes().filter(node => node.data('category_id') === category.id); - cy.nodes().addClass('filtered').hide(); - matchingNodes.removeClass('filtered').show(); - - // Verbindungen zu/von diesen Knoten anzeigen - cy.edges().hide(); - matchingNodes.connectedEdges().show(); - }; - filterContainer.appendChild(btn); - }); - }; - - // Filter-Funktionalität aktivieren (optional) - // setupCategoryFilters(); - - /* 11. Suchfunktion (optional) */ - const searchInput = document.getElementById('search-mindmap'); - if (searchInput) { - searchInput.addEventListener('input', (e) => { - const searchTerm = e.target.value.toLowerCase(); - - if (!searchTerm) { - cy.nodes().removeClass('search-hidden').show(); - cy.edges().show(); - return; - } - - cy.nodes().forEach(node => { - const name = node.data('name').toLowerCase(); - const description = (node.data('description') || '').toLowerCase(); - - if (name.includes(searchTerm) || description.includes(searchTerm)) { - node.removeClass('search-hidden').show(); - node.connectedEdges().show(); - } else { - node.addClass('search-hidden').hide(); - // Kanten nur verstecken, wenn beide verbundenen Knoten versteckt sind - node.connectedEdges().forEach(edge => { - const otherNode = edge.source().id() === node.id() ? edge.target() : edge.source(); - if (otherNode.hasClass('search-hidden')) { - edge.hide(); - } - }); - } - }); - }); - } - - console.log('Mindmap erfolgreich initialisiert'); -})(); \ No newline at end of file diff --git a/static/js/modules/mindmap.js b/static/js/modules/mindmap.js deleted file mode 100644 index e5eba3a..0000000 Binary files a/static/js/modules/mindmap.js and /dev/null differ diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index 5281e7b..335c5a7 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -2,8 +2,144 @@ * Update Mindmap * Dieses Skript fügt Knoten zur Mindmap hinzu und stellt sicher, * dass sie im neuronalen Netzwerk-Design angezeigt werden. + * Implementiert Lazy Loading & Progressive Disclosure */ +// Mock-Datenbank für Subthemen (später durch echte DB-Abfragen ersetzen) +const subthemesDatabase = { + 'philosophy': [ + { + id: 'epistemology', + label: 'Erkenntnistheorie', + category: 'Philosophie', + description: 'Untersuchung der Natur und Grenzen menschlicher Erkenntnis', + hasChildren: true + }, + { + id: 'ethics', + label: 'Ethik', + category: 'Philosophie', + description: 'Lehre vom moralisch richtigen Handeln', + hasChildren: true + }, + { + id: 'metaphysics', + label: 'Metaphysik', + category: 'Philosophie', + description: 'Grundfragen des Seins und der Wirklichkeit', + hasChildren: true + } + ], + 'science': [ + { + id: 'physics', + label: 'Physik', + category: 'Wissenschaft', + description: 'Lehre von der Materie und ihren Wechselwirkungen', + hasChildren: true + }, + { + id: 'biology', + label: 'Biologie', + category: 'Wissenschaft', + description: 'Lehre von den Lebewesen und ihren Lebensprozessen', + hasChildren: true + }, + { + id: 'chemistry', + label: 'Chemie', + category: 'Wissenschaft', + description: 'Wissenschaft von den Stoffen und ihren Reaktionen', + hasChildren: true + } + ], + 'technology': [ + { + id: 'ai', + label: 'Künstliche Intelligenz', + category: 'Technologie', + description: 'Maschinelles Lernen und intelligente Systeme', + hasChildren: true + }, + { + id: 'robotics', + label: 'Robotik', + category: 'Technologie', + description: 'Entwicklung und Steuerung von Robotern', + hasChildren: true + }, + { + id: 'quantum_computing', + label: 'Quantencomputing', + category: 'Technologie', + description: 'Computer basierend auf Quantenmechanik', + hasChildren: true + } + ], + 'arts': [ + { + id: 'visual_arts', + label: 'Bildende Kunst', + category: 'Künste', + description: 'Malerei, Bildhauerei und andere visuelle Kunstformen', + hasChildren: true + }, + { + id: 'music', + label: 'Musik', + category: 'Künste', + description: 'Tonkunst und musikalische Komposition', + hasChildren: true + }, + { + id: 'literature', + label: 'Literatur', + category: 'Künste', + description: 'Schriftliche Kunstwerke und Poesie', + hasChildren: true + } + ] +}; + +// Initiale Mindmap-Daten (nur oberste Ebene) +const mindmapData = { + nodes: [ + { + id: 'philosophy', + label: 'Philosophie', + category: 'Philosophie', + description: 'Die Lehre vom Denken und der Erkenntnis', + hasChildren: true, + expanded: false + }, + { + id: 'science', + label: 'Wissenschaft', + category: 'Wissenschaft', + description: 'Systematische Erforschung der Natur und Gesellschaft', + hasChildren: true, + expanded: false + }, + { + id: 'technology', + label: 'Technologie', + category: 'Technologie', + description: 'Anwendung wissenschaftlicher Erkenntnisse', + hasChildren: true, + expanded: false + }, + { + id: 'arts', + label: 'Künste', + category: 'Künste', + description: 'Kreativer Ausdruck und künstlerische Gestaltung', + hasChildren: true, + expanded: false + } + ], + edges: [] +}; + // Warte bis DOM geladen ist document.addEventListener('DOMContentLoaded', function() { console.log('DOMContentLoaded Event ausgelöst'); @@ -127,144 +263,15 @@ document.addEventListener('DOMContentLoaded', function() { // Event auslösen, damit andere Scripte reagieren können document.dispatchEvent(new Event('mindmap-loaded')); console.log('mindmap-loaded Event ausgelöst'); -}); -// Mindmap-Daten -const mindmapData = { - nodes: [ - // Philosophie - { - id: 'philosophy', - label: 'Philosophie', - category: 'Philosophie', - description: 'Die Lehre vom Denken und der Erkenntnis' - }, - { - id: 'epistemology', - label: 'Erkenntnistheorie', - category: 'Philosophie', - description: 'Untersuchung der Natur und Grenzen menschlicher Erkenntnis' - }, - { - id: 'ethics', - label: 'Ethik', - category: 'Philosophie', - description: 'Lehre vom moralisch richtigen Handeln' - }, - - // Wissenschaft - { - id: 'science', - label: 'Wissenschaft', - category: 'Wissenschaft', - description: 'Systematische Erforschung der Natur und Gesellschaft' - }, - { - id: 'physics', - label: 'Physik', - category: 'Wissenschaft', - description: 'Lehre von der Materie und ihren Wechselwirkungen' - }, - { - id: 'biology', - label: 'Biologie', - category: 'Wissenschaft', - description: 'Lehre von den Lebewesen und ihren Lebensprozessen' - }, - - // Technologie - { - id: 'technology', - label: 'Technologie', - category: 'Technologie', - description: 'Anwendung wissenschaftlicher Erkenntnisse' - }, - { - id: 'ai', - label: 'Künstliche Intelligenz', - category: 'Technologie', - description: 'Maschinelles Lernen und intelligente Systeme' - }, - { - id: 'robotics', - label: 'Robotik', - category: 'Technologie', - description: 'Entwicklung und Steuerung von Robotern' - }, - - // Künste - { - id: 'arts', - label: 'Künste', - category: 'Künste', - description: 'Kreativer Ausdruck und künstlerische Gestaltung' - }, - { - id: 'music', - label: 'Musik', - category: 'Künste', - description: 'Kunst der Töne und Klänge' - }, - { - id: 'literature', - label: 'Literatur', - category: 'Künste', - description: 'Schriftliche Werke und Dichtkunst' - }, - - // Psychologie - { - id: 'psychology', - label: 'Psychologie', - category: 'Psychologie', - description: 'Wissenschaft vom Erleben und Verhalten' - }, - { - id: 'cognitive', - label: 'Kognitive Psychologie', - category: 'Psychologie', - description: 'Studium mentaler Prozesse' - }, - { - id: 'behavioral', - label: 'Verhaltenspsychologie', - category: 'Psychologie', - description: 'Analyse von Verhaltensmustern' - } - ], - - edges: [ - // Philosophie-Verbindungen - { source: 'philosophy', target: 'epistemology', label: 'umfasst' }, - { source: 'philosophy', target: 'ethics', label: 'umfasst' }, - { source: 'philosophy', target: 'science', label: 'beeinflusst' }, - - // Wissenschaft-Verbindungen - { source: 'science', target: 'physics', label: 'umfasst' }, - { source: 'science', target: 'biology', label: 'umfasst' }, - { source: 'science', target: 'technology', label: 'fördert' }, - - // Technologie-Verbindungen - { source: 'technology', target: 'ai', label: 'umfasst' }, - { source: 'technology', target: 'robotics', label: 'umfasst' }, - { source: 'ai', target: 'cognitive', label: 'beeinflusst' }, - - // Künste-Verbindungen - { source: 'arts', target: 'music', label: 'umfasst' }, - { source: 'arts', target: 'literature', label: 'umfasst' }, - { source: 'arts', target: 'psychology', label: 'beeinflusst' }, - - // Psychologie-Verbindungen - { source: 'psychology', target: 'cognitive', label: 'umfasst' }, - { source: 'psychology', target: 'behavioral', label: 'umfasst' }, - { source: 'psychology', target: 'ethics', label: 'beeinflusst' }, - - // Interdisziplinäre Verbindungen - { source: 'cognitive', target: 'ai', label: 'inspiriert' }, - { source: 'physics', target: 'technology', label: 'ermöglicht' }, - { source: 'literature', target: 'philosophy', label: 'reflektiert' } - ] -}; + // Event-Listener für Knoten-Klicks hinzufügen + cy.on('tap', 'node', async function(evt) { + const node = evt.target; + if (node.data('hasChildren') && !node.data('expanded')) { + await loadSubthemes(node); + } + }); +}); // Kategorie-Farben definieren const categoryColors = { @@ -652,4 +659,58 @@ function createFlashContainer() { container.className = 'fixed top-4 right-4 z-50 w-64'; document.body.appendChild(container); return container; +} + +// Funktion zum Laden der Subthemen +async function loadSubthemes(node) { + try { + // Simuliere Datenbankabfrage (später durch echte API ersetzen) + const subthemes = subthemesDatabase[node.id()]; + + if (!subthemes) return; + + // Animation starten + showFlash('Lade Subthemen...', 'info'); + + // Neue Knoten hinzufügen + subthemes.forEach(subtheme => { + cy.add({ + group: 'nodes', + data: { + ...subtheme, + expanded: false + } + }); + + // Kante zum Elternknoten hinzufügen + cy.add({ + group: 'edges', + data: { + id: `${node.id()}_${subtheme.id}`, + source: node.id(), + target: subtheme.id + } + }); + }); + + // Node als expandiert markieren + node.data('expanded', true); + + // Layout neu berechnen mit Animation + cy.layout({ + name: 'cose', + animate: true, + animationDuration: 500, + refresh: 20, + fit: true, + padding: 30 + }).run(); + + // Erfolgsmeldung anzeigen + showFlash('Subthemen erfolgreich geladen', 'success'); + + } catch (error) { + console.error('Fehler beim Laden der Subthemen:', error); + showFlash('Fehler beim Laden der Subthemen', 'error'); + } } \ No newline at end of file diff --git a/static/mindmap.js b/static/mindmap.js deleted file mode 100644 index f6a2257..0000000 --- a/static/mindmap.js +++ /dev/null @@ -1,2061 +0,0 @@ -/** - * MindMap D3.js Modul - * Visualisiert die Mindmap mit D3.js - */ - -class MindMapVisualization { - constructor(containerSelector, options = {}) { - this.containerSelector = containerSelector; - this.container = d3.select(containerSelector); - this.width = options.width || this.container.node().clientWidth || 800; - this.height = options.height || 800; // Erhöhung der Standardhöhe für bessere Sichtbarkeit - this.nodeRadius = options.nodeRadius || 22; - this.selectedNodeRadius = options.selectedNodeRadius || 28; - this.linkDistance = options.linkDistance || 150; - this.chargeStrength = options.chargeStrength || -1000; - this.centerForce = options.centerForce || 0.15; - this.onNodeClick = options.onNodeClick || ((node) => console.log('Node clicked:', node)); - - this.nodes = []; - this.links = []; - this.simulation = null; - this.svg = null; - this.linkElements = null; - this.nodeElements = null; - this.textElements = null; - this.tooltipEnabled = options.tooltipEnabled !== undefined ? options.tooltipEnabled : true; - - this.mouseoverNode = null; - this.selectedNode = null; - - this.zoomFactor = 1; - this.tooltipDiv = null; - this.isLoading = true; - - // Flash-Nachrichten-Container - this.flashContainer = null; - - // Authentischere Farbpalette mit dezenten, professionellen Farben - this.colorPalette = { - 'default': '#6b7280', // Grau - 'root': '#4f46e5', // Indigo - 'philosophy': '#3b82f6', // Blau - 'science': '#10b981', // Smaragdgrün - 'technology': '#6366f1', // Indigo - 'arts': '#8b5cf6', // Violett - 'ai': '#7c3aed', // Violett - 'ethics': '#475569', // Slate - 'math': '#0369a1', // Dunkelblau - 'psychology': '#0284c7', // Hellblau - 'biology': '#059669', // Grün - 'literature': '#4338ca', // Indigo - 'history': '#0f766e', // Teal - 'economics': '#374151', // Dunkelgrau - 'sociology': '#4f46e5', // Indigo - 'design': '#0891b2', // Cyan - 'languages': '#2563eb' // Blau - }; - - // Sicherstellen, dass der Container bereit ist - if (this.container.node()) { - this.init(); - this.setupDefaultNodes(); - this.setupFlashMessages(); - - // Sofortige Datenladung - window.setTimeout(() => { - this.loadData(); - }, 100); - } else { - console.error('Mindmap-Container nicht gefunden:', containerSelector); - } - } - - // Flash-Nachrichten-System einrichten - setupFlashMessages() { - // Flash-Container erstellen, falls er noch nicht existiert - if (!document.getElementById('mindmap-flash-container')) { - this.flashContainer = document.createElement('div'); - this.flashContainer.id = 'mindmap-flash-container'; - this.flashContainer.className = 'mindmap-flash-container'; - this.flashContainer.style.position = 'fixed'; - this.flashContainer.style.top = '20px'; - this.flashContainer.style.right = '20px'; - this.flashContainer.style.zIndex = '1000'; - this.flashContainer.style.maxWidth = '350px'; - this.flashContainer.style.display = 'flex'; - this.flashContainer.style.flexDirection = 'column'; - this.flashContainer.style.gap = '10px'; - document.body.appendChild(this.flashContainer); - } else { - this.flashContainer = document.getElementById('mindmap-flash-container'); - } - - // Prüfen, ob Server-seitige Flash-Nachrichten existieren und anzeigen - this.checkForServerFlashMessages(); - } - - // Prüft auf Server-seitige Flash-Nachrichten - async checkForServerFlashMessages() { - try { - const response = await fetch('/api/get_flash_messages'); - if (response.ok) { - const messages = await response.json(); - messages.forEach(message => { - this.showFlash(message.message, message.category); - }); - } - } catch (err) { - console.error('Fehler beim Abrufen der Flash-Nachrichten:', err); - } - } - - // Zeigt eine Flash-Nachricht an - showFlash(message, type = 'info', duration = 5000) { - if (!this.flashContainer) return; - - const flashElement = document.createElement('div'); - flashElement.className = `mindmap-flash flash-${type}`; - flashElement.style.padding = '12px 18px'; - flashElement.style.borderRadius = '8px'; - flashElement.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)'; - flashElement.style.display = 'flex'; - flashElement.style.alignItems = 'center'; - flashElement.style.justifyContent = 'space-between'; - flashElement.style.fontSize = '14px'; - flashElement.style.fontWeight = '500'; - flashElement.style.backdropFilter = 'blur(10px)'; - flashElement.style.opacity = '0'; - flashElement.style.transform = 'translateY(-20px)'; - flashElement.style.transition = 'all 0.3s ease'; - - // Spezifische Stile je nach Nachrichtentyp - switch(type) { - case 'success': - flashElement.style.backgroundColor = 'rgba(34, 197, 94, 0.9)'; - flashElement.style.borderLeft = '5px solid #16a34a'; - flashElement.style.color = 'white'; - break; - case 'error': - flashElement.style.backgroundColor = 'rgba(239, 68, 68, 0.9)'; - flashElement.style.borderLeft = '5px solid #dc2626'; - flashElement.style.color = 'white'; - break; - case 'warning': - flashElement.style.backgroundColor = 'rgba(245, 158, 11, 0.9)'; - flashElement.style.borderLeft = '5px solid #d97706'; - flashElement.style.color = 'white'; - break; - default: // info - flashElement.style.backgroundColor = 'rgba(59, 130, 246, 0.9)'; - flashElement.style.borderLeft = '5px solid #2563eb'; - flashElement.style.color = 'white'; - } - - // Icon je nach Nachrichtentyp - let icon = ''; - switch(type) { - case 'success': - icon = ''; - break; - case 'error': - icon = ''; - break; - case 'warning': - icon = ''; - break; - default: - icon = ''; - } - - // Inhalt der Nachricht mit Icon - const contentWrapper = document.createElement('div'); - contentWrapper.style.display = 'flex'; - contentWrapper.style.alignItems = 'center'; - contentWrapper.style.gap = '12px'; - - const iconElement = document.createElement('div'); - iconElement.className = 'flash-icon'; - iconElement.innerHTML = icon; - - const textElement = document.createElement('div'); - textElement.className = 'flash-text'; - textElement.textContent = message; - - contentWrapper.appendChild(iconElement); - contentWrapper.appendChild(textElement); - - // Schließen-Button - const closeButton = document.createElement('button'); - closeButton.className = 'flash-close'; - closeButton.innerHTML = ''; - closeButton.style.background = 'none'; - closeButton.style.border = 'none'; - closeButton.style.color = 'currentColor'; - closeButton.style.cursor = 'pointer'; - closeButton.style.marginLeft = '15px'; - closeButton.style.padding = '3px'; - closeButton.style.fontSize = '14px'; - closeButton.style.opacity = '0.7'; - closeButton.style.transition = 'opacity 0.2s'; - - closeButton.addEventListener('mouseover', () => { - closeButton.style.opacity = '1'; - }); - - closeButton.addEventListener('mouseout', () => { - closeButton.style.opacity = '0.7'; - }); - - closeButton.addEventListener('click', () => { - this.removeFlash(flashElement); - }); - - // Zusammenfügen - flashElement.appendChild(contentWrapper); - flashElement.appendChild(closeButton); - - // Zum Container hinzufügen - this.flashContainer.appendChild(flashElement); - - // Animation einblenden - setTimeout(() => { - flashElement.style.opacity = '1'; - flashElement.style.transform = 'translateY(0)'; - }, 10); - - // Automatisches Ausblenden nach der angegebenen Zeit - if (duration > 0) { - setTimeout(() => { - this.removeFlash(flashElement); - }, duration); - } - - return flashElement; - } - - // Entfernt eine Flash-Nachricht mit Animation - removeFlash(flashElement) { - if (!flashElement) return; - - flashElement.style.opacity = '0'; - flashElement.style.transform = 'translateY(-20px)'; - - setTimeout(() => { - if (flashElement.parentNode) { - flashElement.parentNode.removeChild(flashElement); - } - }, 300); - } - - // Standardknoten als Fallback einrichten, falls die API nicht reagiert - setupDefaultNodes() { - // Basis-Mindmap mit Hauptthemen - const defaultNodes = [ - { id: "root", name: "Wissen", description: "Zentrale Wissensbasis", thought_count: 3 }, - { id: "philosophy", name: "Philosophie", description: "Philosophisches Denken", thought_count: 2 }, - { id: "science", name: "Wissenschaft", description: "Wissenschaftliche Erkenntnisse", thought_count: 5 }, - { id: "technology", name: "Technologie", description: "Technologische Entwicklungen", thought_count: 7 }, - { id: "arts", name: "Künste", description: "Künstlerische Ausdrucksformen", thought_count: 4 }, - { id: "ai", name: "Künstliche Intelligenz", description: "KI-Forschung und Anwendungen", thought_count: 6 }, - { id: "ethics", name: "Ethik", description: "Moralische Grundsätze", thought_count: 2 }, - { id: "math", name: "Mathematik", description: "Mathematische Konzepte", thought_count: 3 }, - { id: "psychology", name: "Psychologie", description: "Menschliches Verhalten und Kognition", thought_count: 4 }, - { id: "biology", name: "Biologie", description: "Lebenswissenschaften", thought_count: 3 }, - { id: "literature", name: "Literatur", description: "Literarische Werke und Analysen", thought_count: 2 } - ]; - - const defaultLinks = [ - { source: "root", target: "philosophy" }, - { source: "root", target: "science" }, - { source: "root", target: "technology" }, - { source: "root", target: "arts" }, - { source: "science", target: "math" }, - { source: "science", target: "biology" }, - { source: "technology", target: "ai" }, - { source: "philosophy", target: "ethics" }, - { source: "philosophy", target: "psychology" }, - { source: "arts", target: "literature" }, - { source: "ai", target: "ethics" }, - { source: "psychology", target: "biology" } - ]; - - // Als Fallback verwenden, falls die API fehlschlägt - this.defaultNodes = defaultNodes; - this.defaultLinks = defaultLinks; - } - - init() { - // SVG erstellen, wenn noch nicht vorhanden - if (!this.svg) { - // Container zuerst leeren und Loading-State ausblenden - const loadingOverlay = this.container.select('.mindmap-loading'); - if (loadingOverlay) { - loadingOverlay.style('opacity', 0.8); - } - - this.svg = this.container - .append('svg') - .attr('width', '100%') - .attr('height', this.height) - .attr('viewBox', `0 0 ${this.width} ${this.height}`) - .attr('class', 'mindmap-svg') - .call( - d3.zoom() - .scaleExtent([0.1, 5]) - .on('zoom', (event) => { - this.handleZoom(event.transform); - }) - ); - - // Hauptgruppe für alles, was zoom-transformierbar ist - this.g = this.svg.append('g'); - - // SVG-Definitionen für Filter und Effekte - const defs = this.g.append('defs'); - - // Verbesserte Glasmorphismus- und Glow-Effekte - - // Basis Glow-Effekt - D3Extensions.createGlowFilter(defs, 'glow-effect', '#b38fff', 8); - - // Spezifische Effekte für verschiedene Zustände - D3Extensions.createGlowFilter(defs, 'hover-glow', '#58a9ff', 6); - D3Extensions.createGlowFilter(defs, 'selected-glow', '#b38fff', 10); - - // Schatten für alle Knoten - D3Extensions.createShadowFilter(defs, 'shadow-effect'); - - // Glasmorphismus-Effekt für Knoten - D3Extensions.createGlassMorphismFilter(defs, 'glass-effect'); - - // Erweiterte Effekte - this.createAdvancedNodeEffects(defs); - - // Tooltip initialisieren mit verbessertem Glasmorphism-Stil - if (!d3.select('body').select('.node-tooltip').size()) { - this.tooltipDiv = d3.select('body') - .append('div') - .attr('class', 'node-tooltip') - .style('opacity', 0) - .style('position', 'absolute') - .style('pointer-events', 'none') - .style('background', 'rgba(24, 28, 45, 0.85)') - .style('color', '#ffffff') - .style('border', '1px solid rgba(179, 143, 255, 0.3)') - .style('border-radius', '16px') - .style('padding', '12px 16px') - .style('font-size', '14px') - .style('font-weight', '500') - .style('line-height', '1.5') - .style('max-width', '280px') - .style('box-shadow', '0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(179, 143, 255, 0.25)') - .style('backdrop-filter', 'blur(20px)') - .style('-webkit-backdrop-filter', 'blur(20px)') - .style('z-index', '1000'); - } else { - this.tooltipDiv = d3.select('body').select('.node-tooltip'); - } - - // Initialisierung abgeschlossen - Loading-Overlay ausblenden - setTimeout(() => { - if (loadingOverlay) { - loadingOverlay.transition() - .duration(500) - .style('opacity', 0) - .on('end', function() { - loadingOverlay.style('display', 'none'); - }); - } - }, 1000); - } - - // Force-Simulation initialisieren - this.simulation = d3.forceSimulation() - .force('link', d3.forceLink().id(d => d.id).distance(this.linkDistance)) - .force('charge', d3.forceManyBody().strength(this.chargeStrength)) - .force('center', d3.forceCenter(this.width / 2, this.height / 2).strength(this.centerForce)) - .force('collision', d3.forceCollide().radius(this.nodeRadius * 2.5)); - - // Globale Mindmap-Instanz für externe Zugriffe setzen - window.mindmapInstance = this; - } - - // Erstellt erweiterte Effekte für die Knoten - createAdvancedNodeEffects(defs) { - // Verbesserte innere Leuchteffekte für Knoten - const innerGlow = defs.append('filter') - .attr('id', 'inner-glow') - .attr('x', '-50%') - .attr('y', '-50%') - .attr('width', '200%') - .attr('height', '200%'); - - // Farbiger innerer Glühen - innerGlow.append('feGaussianBlur') - .attr('in', 'SourceAlpha') - .attr('stdDeviation', 2) - .attr('result', 'blur'); - - innerGlow.append('feOffset') - .attr('in', 'blur') - .attr('dx', 0) - .attr('dy', 0) - .attr('result', 'offsetBlur'); - - innerGlow.append('feFlood') - .attr('flood-color', 'rgba(179, 143, 255, 0.8)') - .attr('result', 'glowColor'); - - innerGlow.append('feComposite') - .attr('in', 'glowColor') - .attr('in2', 'offsetBlur') - .attr('operator', 'in') - .attr('result', 'innerGlow'); - - // Verbinden der Filter - const innerGlowMerge = innerGlow.append('feMerge'); - innerGlowMerge.append('feMergeNode') - .attr('in', 'innerGlow'); - innerGlowMerge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - // 3D-Glaseffekt mit verbesserter Tiefe - D3Extensions.create3DGlassEffect(defs, '3d-glass'); - - // Pulseffekt für Hervorhebung - const pulseFilter = defs.append('filter') - .attr('id', 'pulse-effect') - .attr('x', '-50%') - .attr('y', '-50%') - .attr('width', '200%') - .attr('height', '200%'); - - // Animation definieren - const pulseAnimation = pulseFilter.append('feComponentTransfer') - .append('feFuncA') - .attr('type', 'linear') - .attr('slope', '1.5'); - } - - // Behandelt die Zoom-Transformation für die SVG mit verbesserter Anpassung - handleZoom(transform) { - this.g.attr('transform', transform); - this.zoomFactor = transform.k; - - // Knotengröße dynamisch an Zoom anpassen für bessere Lesbarkeit - if (this.nodeElements) { - // Berechne relativen Radius basierend auf Zoom - const nodeScaleFactor = 1 / Math.sqrt(transform.k); - const minRadiusFactor = 0.6; // Minimale Größe beim Herauszoomen - const maxRadiusFactor = 1.2; // Maximale Größe beim Hineinzoomen - - // Beschränke den Skalierungsfaktor in sinnvollen Grenzen - const cappedScaleFactor = Math.max(minRadiusFactor, Math.min(nodeScaleFactor, maxRadiusFactor)); - - this.nodeElements.selectAll('circle') - .attr('r', d => { - return d === this.selectedNode - ? this.selectedNodeRadius * cappedScaleFactor - : this.nodeRadius * cappedScaleFactor; - }) - .attr('stroke-width', 2 * cappedScaleFactor); // Strichstärke anpassen - - // Schriftgröße dynamisch anpassen - this.nodeElements.selectAll('text') - .style('font-size', `${14 * cappedScaleFactor}px`) - .attr('dy', 4 * cappedScaleFactor); - - // Verbindungslinien anpassen - this.linkElements - .attr('stroke-width', 1.5 * cappedScaleFactor) - .attr('marker-end', transform.k < 0.6 ? 'none' : 'url(#arrowhead)'); // Pfeile bei starkem Zoom ausblenden - } - } - - // Lädt die Mindmap-Daten - async loadData() { - try { - // Zeige Lade-Animation - this.showLoading(); - - // API-Aufruf durchführen, um die Kategorien und ihre Knoten zu laden - const response = await fetch('/api/mindmap/public'); - if (!response.ok) { - throw new Error('API-Fehler: ' + response.statusText); - } - - const data = await response.json(); - console.log('Geladene Mindmap-Daten:', data); - - // Verarbeite die hierarchischen Daten in flache Knoten und Links - const processed = this.processApiData(data); - this.nodes = processed.nodes; - this.links = processed.links; - - // Verbindungszählungen aktualisieren - this.updateConnectionCounts(); - - // Visualisierung aktualisieren - this.updateVisualization(); - - // Lade-Animation ausblenden - this.hideLoading(); - - // Erfolgreiche Ladung melden - this.showFlash('Mindmap-Daten erfolgreich geladen', 'success'); - } catch (error) { - console.error('Fehler beim Laden der Mindmap-Daten:', error); - - // Bei einem Fehler die Fallback-Daten verwenden - this.nodes = this.defaultNodes; - this.links = this.defaultLinks; - - // Verbindungszählungen auch für Fallback-Daten aktualisieren - this.updateConnectionCounts(); - - // Fehler anzeigen - this.showError('Mindmap-Daten konnten nicht geladen werden. Verwende Standarddaten.'); - this.showFlash('Fehler beim Laden der Mindmap-Daten. Standarddaten werden angezeigt.', 'error'); - - // Visualisierung auch im Fehlerfall aktualisieren - this.updateVisualization(); - this.hideLoading(); - } - } - - // Verarbeitet die API-Daten in das benötigte Format - processApiData(apiData) { - // Erstelle einen Root-Knoten, der alle Kategorien verbindet - const rootNode = { - id: "root", - name: "Wissen", - description: "Zentrale Wissensbasis", - thought_count: 0 - }; - - let nodes = [rootNode]; - let links = []; - - // Für jede Kategorie Knoten und Verbindungen erstellen - apiData.forEach(category => { - // Kategorie als Knoten hinzufügen - const categoryNode = { - id: `category_${category.id}`, - name: category.name, - description: category.description, - color_code: category.color_code, - icon: category.icon, - thought_count: 0, - type: 'category' - }; - - nodes.push(categoryNode); - - // Mit Root-Knoten verbinden - links.push({ - source: "root", - target: categoryNode.id - }); - - // Alle Knoten aus dieser Kategorie hinzufügen - if (category.nodes && category.nodes.length > 0) { - category.nodes.forEach(node => { - // Zähle die Gedanken für die Kategorie - categoryNode.thought_count += node.thought_count || 0; - - const mindmapNode = { - id: `node_${node.id}`, - name: node.name, - description: node.description || '', - color_code: node.color_code || category.color_code, - thought_count: node.thought_count || 0, - type: 'node', - categoryId: category.id - }; - - nodes.push(mindmapNode); - - // Mit Kategorie-Knoten verbinden - links.push({ - source: categoryNode.id, - target: mindmapNode.id - }); - }); - } - - // Rekursiv Unterkategorien verarbeiten - if (category.children && category.children.length > 0) { - this.processSubcategories(category.children, nodes, links, categoryNode.id); - } - }); - - // Root-Knoten-Gedankenzähler aktualisieren - rootNode.thought_count = nodes.reduce((sum, node) => sum + (node.thought_count || 0), 0); - - return { nodes, links }; - } - - // Verarbeitet Unterkategorien rekursiv - processSubcategories(subcategories, nodes, links, parentId) { - subcategories.forEach(category => { - // Kategorie als Knoten hinzufügen - const categoryNode = { - id: `category_${category.id}`, - name: category.name, - description: category.description, - color_code: category.color_code, - icon: category.icon, - thought_count: 0, - type: 'subcategory' - }; - - nodes.push(categoryNode); - - // Mit Eltern-Kategorie verbinden - links.push({ - source: parentId, - target: categoryNode.id - }); - - // Alle Knoten aus dieser Kategorie hinzufügen - if (category.nodes && category.nodes.length > 0) { - category.nodes.forEach(node => { - // Zähle die Gedanken für die Kategorie - categoryNode.thought_count += node.thought_count || 0; - - const mindmapNode = { - id: `node_${node.id}`, - name: node.name, - description: node.description || '', - color_code: node.color_code || category.color_code, - thought_count: node.thought_count || 0, - type: 'node', - categoryId: category.id - }; - - nodes.push(mindmapNode); - - // Mit Kategorie-Knoten verbinden - links.push({ - source: categoryNode.id, - target: mindmapNode.id - }); - }); - } - - // Rekursiv Unterkategorien verarbeiten - if (category.children && category.children.length > 0) { - this.processSubcategories(category.children, nodes, links, categoryNode.id); - } - }); - } - - // Zeigt den Ladebildschirm an - showLoading() { - const loadingOverlay = this.container.select('.mindmap-loading'); - - if (loadingOverlay && !loadingOverlay.empty()) { - loadingOverlay - .style('display', 'flex') - .style('opacity', 1); - - // Ladebalken-Animation - const progressBar = loadingOverlay.select('.loading-progress'); - if (!progressBar.empty()) { - let progress = 0; - const progressInterval = setInterval(() => { - progress += Math.random() * 15; - if (progress > 90) { - progress = 90 + Math.random() * 5; - clearInterval(progressInterval); - } - updateProgress(progress); - }, 200); - - function updateProgress(progress) { - progressBar.style('width', `${Math.min(progress, 95)}%`); - } - } - } - } - - // Blendet den Ladebildschirm aus - hideLoading() { - const loadingOverlay = this.container.select('.mindmap-loading'); - - if (loadingOverlay && !loadingOverlay.empty()) { - // Lade-Fortschritt auf 100% setzen - const progressBar = loadingOverlay.select('.loading-progress'); - if (!progressBar.empty()) { - progressBar.transition() - .duration(300) - .style('width', '100%'); - } - - // Overlay ausblenden - setTimeout(() => { - loadingOverlay.transition() - .duration(500) - .style('opacity', 0) - .on('end', function() { - loadingOverlay.style('display', 'none'); - }); - }, 400); - } - } - - // Verarbeitet hierarchische Daten in flache Knoten und Links - processHierarchicalData(hierarchicalNodes, parentId = null) { - let nodes = []; - let links = []; - - for (const node of hierarchicalNodes) { - nodes.push({ - id: node.id, - name: node.name, - description: node.description || '', - thought_count: node.thought_count || 0 - }); - - if (parentId) { - links.push({ - source: parentId, - target: node.id - }); - } - - if (node.children && node.children.length > 0) { - const { nodes: childNodes, links: childLinks } = this.processHierarchicalData(node.children, node.id); - nodes = [...nodes, ...childNodes]; - links = [...links, ...childLinks]; - } - } - - return { nodes, links }; - } - - // Generiert eine konsistente Farbe basierend auf dem Knotennamen - generateColorFromString(str) { - // Authentischere, dezente Farben für wissenschaftliche Darstellung - const colors = [ - '#4f46e5', '#0369a1', '#0f766e', '#374151', '#4338ca', - '#0284c7', '#059669', '#475569', '#6366f1', '#0891b2' - ]; - - let hash = 0; - for (let i = 0; i < str.length; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - } - - return colors[Math.abs(hash) % colors.length]; - } - - /** - * Aktualisiert die Visualisierung basierend auf den aktuellen Daten - */ - updateVisualization() { - if (!this.g || !this.nodes.length) return; - - // Daten für Simulation vorbereiten - // Kopieren der Knoten und Links, um Referenzen zu erhalten - const nodes = this.nodes.map(d => Object.assign({}, d)); - const links = this.links.map(d => Object.assign({}, d)); - - // Links erstellen oder aktualisieren - this.linkElements = this.g.selectAll('.link') - .data(links, d => `${d.source.id || d.source}-${d.target.id || d.target}`); - - // Links entfernen, die nicht mehr existieren - this.linkElements.exit().remove(); - - // Neue Links erstellen - const linkEnter = this.linkElements - .enter().append('path') - .attr('class', 'link') - .attr('stroke-width', 2) - .attr('stroke', 'rgba(255, 255, 255, 0.3)') - .attr('fill', 'none') - .attr('marker-end', 'url(#arrowhead)'); - - // Alle Links aktualisieren - this.linkElements = linkEnter.merge(this.linkElements); - - // Pfeilspitzen für die Links definieren - if (!this.g.select('#arrowhead').size()) { - this.g.append('defs').append('marker') - .attr('id', 'arrowhead') - .attr('viewBox', '0 -5 10 10') - .attr('refX', 28) // Abstand vom Ende des Links zum Knoten - .attr('refY', 0) - .attr('orient', 'auto') - .attr('markerWidth', 6) - .attr('markerHeight', 6) - .attr('xoverflow', 'visible') - .append('path') - .attr('d', 'M 0,-3 L 8,0 L 0,3') - .attr('fill', 'rgba(255, 255, 255, 0.6)'); - } - - // Knoten erstellen oder aktualisieren - this.nodeElements = this.g.selectAll('.node') - .data(nodes, d => d.id); - - // Knoten entfernen, die nicht mehr existieren - this.nodeElements.exit().remove(); - - // Container für neue Knoten erstellen - const nodeEnter = this.nodeElements - .enter().append('g') - .attr('class', 'node') - .call(d3.drag() - .on('start', (event, d) => this.dragStarted(event, d)) - .on('drag', (event, d) => this.dragged(event, d)) - .on('end', (event, d) => this.dragEnded(event, d)) - ) - .on('mouseover', (event, d) => this.nodeMouseover(event, d)) - .on('mouseout', (event, d) => this.nodeMouseout(event, d)) - .on('click', (event, d) => this.nodeClicked(event, d)); - - // Kreisformen für die Knoten hinzufügen - nodeEnter.append('circle') - .attr('r', d => this.nodeRadius) - .attr('fill', d => this.getNodeColor(d)) - .attr('stroke', 'rgba(255, 255, 255, 0.12)') - .attr('stroke-width', 2) - .style('filter', 'url(#glass-effect)'); - - // Label für die Knoten hinzufügen - nodeEnter.append('text') - .attr('class', 'node-label') - .attr('dy', 4) - .attr('text-anchor', 'middle') - .text(d => this.truncateNodeLabel(d.name)) - .style('font-size', d => D3Extensions.getAdaptiveFontSize(d.name, 16, 10) + 'px'); - - // Alle Knoten aktualisieren - this.nodeElements = nodeEnter.merge(this.nodeElements); - - // Simulation mit den neuen Daten aktualisieren - this.simulation - .nodes(nodes) - .force('link', d3.forceLink(links).id(d => d.id).distance(this.linkDistance)); - - // Simulation-Tick-Funktion setzen - this.simulation.on('tick', () => this.ticked()); - - // Simulation neustarten - this.simulation.alpha(1).restart(); - - // Nach kurzer Verzögerung die Knoten mit zusätzlichen Effekten versehen - setTimeout(() => { - this.nodeElements.selectAll('circle') - .transition() - .duration(500) - .attr('r', d => { - // Größe abhängig von der Anzahl der Gedanken - const baseRadius = this.nodeRadius; - const bonus = d.thought_count ? Math.min(d.thought_count / 3, 6) : 0; - return baseRadius + bonus; - }); - }, 300); - } - - // Lange Knotenbeschriftungen abkürzen - truncateNodeLabel(label) { - if (!label) return ''; - - const maxLength = 18; // Maximale Zeichenlänge - - if (label.length <= maxLength) { - return label; - } else { - return label.substring(0, maxLength - 3) + '...'; - } - } - - // Bestimmt die Farbe eines Knotens basierend auf seinem Typ oder direkt angegebener Farbe - getNodeColor(node) { - // Direkt angegebene Farbe verwenden, wenn vorhanden - if (node.color_code) { - return node.color_code; - } - - // Kategorietyp-basierte Färbung mit dezenten, wissenschaftlichen Farben - if (node.type === 'category') { - return this.colorPalette.root; - } else if (node.type === 'subcategory') { - return this.colorPalette.science; - } - - // Fallback für verschiedene Knotentypen - return this.colorPalette[node.id] || this.colorPalette.default; - } - - // Aktualisiert die Positionen in jedem Simulationsschritt - ticked() { - if (!this.linkElements || !this.nodeElements) return; - - // Aktualisierung der Linkpositionen mit gebogenem Pfad - this.linkElements - .attr('d', d => { - const dx = d.target.x - d.source.x; - const dy = d.target.y - d.source.y; - const dr = Math.sqrt(dx * dx + dy * dy) * 1.5; // Kurvenstärke - return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`; - }); - - // Aktualisierung der Knotenpositionen - this.nodeElements - .attr('transform', d => `translate(${d.x},${d.y})`); - } - - // D3.js Drag-Funktionen - dragStarted(event, d) { - if (!event.active) this.simulation.alphaTarget(0.3).restart(); - d.fx = d.x; - d.fy = d.y; - } - - dragged(event, d) { - d.fx = event.x; - d.fy = event.y; - } - - dragEnded(event, d) { - if (!event.active) this.simulation.alphaTarget(0); - d.fx = null; - d.fy = null; - } - - // Hover-Effekte für Knoten - nodeMouseover(event, d) { - if (this.tooltipEnabled) { - // Tooltip-Inhalt erstellen - const tooltipContent = ` -
${d.name}
-
${d.description || 'Keine Beschreibung verfügbar'}
- ${d.thought_count > 0 ? `
${d.thought_count} Gedanken verknüpft
` : ''} - `; - - this.tooltipDiv.html(tooltipContent) - .style('opacity', 0.95); - - // Tooltip positionieren (oberhalb des Nodes) - const nodeRect = event.target.getBoundingClientRect(); - const tooltipWidth = 250; - const tooltipHeight = 100; // Ungefähre Höhe des Tooltips - - const leftPos = nodeRect.left + (nodeRect.width / 2) - (tooltipWidth / 2); - const topPos = nodeRect.top - tooltipHeight - 10; // 10px Abstand - - this.tooltipDiv - .style('left', `${leftPos}px`) - .style('top', `${topPos}px`) - .style('width', `${tooltipWidth}px`); - } - - // Speichern des aktuellen Hover-Nodes - this.mouseoverNode = d; - - // Highlights für verbundene Nodes und Links hinzufügen - if (this.g) { - // Verbundene Nodes identifizieren - const connectedNodes = this.getConnectedNodesById(d.id); - const connectedNodeIds = connectedNodes.map(node => node.id); - - // Alle Nodes etwas transparenter machen - this.g.selectAll('.node') - .transition() - .duration(200) - .style('opacity', node => { - if (node.id === d.id || connectedNodeIds.includes(node.id)) { - return 1.0; - } else { - return 0.5; - } - }); - - // Den Hover-Node hervorheben mit größerem Radius - this.g.selectAll('.node') - .filter(node => node.id === d.id) - .select('circle') - .transition() - .duration(200) - .attr('r', this.nodeRadius * 1.2) - .style('filter', 'url(#hover-glow)') - .style('stroke', 'rgba(255, 255, 255, 0.25)'); - - // Verbundene Links hervorheben - this.g.selectAll('.link') - .transition() - .duration(200) - .style('opacity', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === d.id || targetId === d.id) { - return 0.9; - } else { - return 0.3; - } - }) - .style('stroke-width', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === d.id || targetId === d.id) { - return 3; - } else { - return 2; - } - }) - .style('stroke', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === d.id || targetId === d.id) { - return 'rgba(179, 143, 255, 0.7)'; - } else { - return 'rgba(255, 255, 255, 0.3)'; - } - }); - } - } - - nodeMouseout(event, d) { - if (this.tooltipEnabled) { - this.tooltipDiv.transition() - .duration(200) - .style('opacity', 0); - } - - this.mouseoverNode = null; - - // Highlights zurücksetzen, falls kein Node ausgewählt ist - if (!this.selectedNode && this.g) { - // Alle Nodes wieder auf volle Deckkraft setzen - this.g.selectAll('.node') - .transition() - .duration(200) - .style('opacity', 1.0); - - // Hover-Node-Radius zurücksetzen - this.g.selectAll('.node') - .filter(node => node.id === d.id) - .select('circle') - .transition() - .duration(200) - .attr('r', this.nodeRadius) - .style('filter', 'none') - .style('stroke', 'rgba(255, 255, 255, 0.12)'); - - // Links zurücksetzen - this.g.selectAll('.link') - .transition() - .duration(200) - .style('opacity', 0.7) - .style('stroke-width', 2) - .style('stroke', 'rgba(255, 255, 255, 0.3)'); - } - // Falls ein Node ausgewählt ist, den Highlight-Status für diesen beibehalten - else if (this.selectedNode && this.g) { - const connectedNodes = this.getConnectedNodesById(this.selectedNode.id); - const connectedNodeIds = connectedNodes.map(node => node.id); - - // Alle Nodes auf den richtigen Highlight-Status setzen - this.g.selectAll('.node') - .transition() - .duration(200) - .style('opacity', node => { - if (node.id === this.selectedNode.id || connectedNodeIds.includes(node.id)) { - return 1.0; - } else { - return 0.5; - } - }); - - // Hover-Node zurücksetzen, wenn er nicht der ausgewählte ist - if (d.id !== this.selectedNode.id) { - this.g.selectAll('.node') - .filter(node => node.id === d.id) - .select('circle') - .transition() - .duration(200) - .attr('r', this.nodeRadius) - .style('filter', 'none') - .style('stroke', 'rgba(255, 255, 255, 0.12)'); - } - - // Links auf den richtigen Highlight-Status setzen - this.g.selectAll('.link') - .transition() - .duration(200) - .style('opacity', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) { - return 0.9; - } else { - return 0.3; - } - }) - .style('stroke-width', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) { - return 3; - } else { - return 2; - } - }) - .style('stroke', link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - - if (sourceId === this.selectedNode.id || targetId === this.selectedNode.id) { - return 'rgba(179, 143, 255, 0.7)'; - } else { - return 'rgba(255, 255, 255, 0.3)'; - } - }); - } - } - - // Findet alle verbundenen Knoten zu einem gegebenen Knoten - getConnectedNodes(node) { - if (!this.links || !this.nodes || !node) return []; - - // Sicherstellen, dass der Knoten eine ID hat - const nodeId = node.id || node; - - return this.nodes.filter(n => - this.links.some(link => { - const sourceId = link.source?.id || link.source; - const targetId = link.target?.id || link.target; - return (sourceId === nodeId && targetId === n.id) || - (targetId === nodeId && sourceId === n.id); - }) - ); - } - - // Prüft, ob zwei Knoten verbunden sind - isConnected(a, b) { - if (!this.links || !a || !b) return false; - - // Sicherstellen, dass die Knoten IDs haben - const aId = a.id || a; - const bId = b.id || b; - - return this.links.some(link => { - const sourceId = link.source?.id || link.source; - const targetId = link.target?.id || link.target; - return (sourceId === aId && targetId === bId) || - (targetId === aId && sourceId === bId); - }); - } - - // Überprüft, ob ein Link zwischen zwei Knoten existiert - hasLink(source, target) { - if (!this.links || !source || !target) return false; - - // Sicherstellen, dass die Knoten IDs haben - const sourceId = source.id || source; - const targetId = target.id || target; - - return this.links.some(link => { - const linkSourceId = link.source?.id || link.source; - const linkTargetId = link.target?.id || link.target; - return (linkSourceId === sourceId && linkTargetId === targetId) || - (linkTargetId === sourceId && linkSourceId === targetId); - }); - } - - // Sicherere Methode zum Abrufen verbundener Knoten, die Prüfungen enthält - getConnectedNodesById(nodeId) { - if (!this.links || !this.nodes || !nodeId) return []; - - return this.nodes.filter(n => - this.links.some(link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - return (sourceId === nodeId && targetId === n.id) || - (targetId === nodeId && sourceId === n.id); - }) - ); - } - - // Aktualisiert die Verbindungszählungen für alle Knoten - updateConnectionCounts() { - if (!this.nodes || !this.links) return; - - // Für jeden Knoten die Anzahl der Verbindungen berechnen - this.nodes.forEach(node => { - // Sichere Methode, um verbundene Knoten zu zählen - const connectedNodes = this.nodes.filter(n => - n.id !== node.id && this.links.some(link => { - const sourceId = link.source.id || link.source; - const targetId = link.target.id || link.target; - return (sourceId === node.id && targetId === n.id) || - (targetId === node.id && sourceId === n.id); - }) - ); - - // Speichere die Anzahl als Eigenschaft des Knotens - node.connectionCount = connectedNodes.length; - }); - } - - // Klick-Handler für Knoten mit verbesserter Seitenleisten-Interaktion - nodeClicked(event, d) { - event.preventDefault(); - event.stopPropagation(); - - // Selection-Handling: Knoten auswählen/abwählen - if (this.selectedNode === d) { - // Wenn der gleiche Knoten geklickt wird, Selektion aufheben - this.selectedNode = null; - this.nodeElements.classed('selected', false); - - this.nodeElements - .select('circle:not(.node-background):not(.thought-indicator)') - .transition() - .duration(300) - .attr('r', this.nodeRadius) - .style('filter', 'url(#glass-with-reflection)') - .attr('stroke-width', 2); - - // Event auslösen: Knoten abgewählt - document.dispatchEvent(new CustomEvent('mindmap-node-deselected')); - - // Standardinformationspanels wieder anzeigen - this.showDefaultSidebar(); - - // Gedankenbereich ausblenden, wenn vorhanden - const thoughtContainer = document.getElementById('thought-container'); - if (thoughtContainer) { - // Sanfte Ausblendanimation - thoughtContainer.style.transition = 'all 0.3s ease-out'; - thoughtContainer.style.opacity = '0'; - thoughtContainer.style.transform = 'translateY(10px)'; - - setTimeout(() => { - // Gedankenbereich komplett ausblenden - thoughtContainer.style.display = 'none'; - - // "Empty state" anzeigen oder andere UI-Anpassungen vornehmen - const emptyStateEl = document.getElementById('mindmap-empty-state'); - if (emptyStateEl) { - emptyStateEl.style.display = 'flex'; - emptyStateEl.style.opacity = '0'; - setTimeout(() => { - emptyStateEl.style.transition = 'all 0.5s ease'; - emptyStateEl.style.opacity = '1'; - }, 50); - } - }, 300); - } - - // Alle Kanten zurücksetzen - this.linkElements - .classed('highlighted', false) - .transition() - .duration(300) - .style('stroke', 'rgba(75, 85, 99, 0.4)') - .style('stroke-width', 2) - .style('opacity', 0.7); - - // Interface-Callback für Knoten-Abwahl - if (typeof window.onNodeDeselected === 'function') { - window.onNodeDeselected(); - } - - // Flash-Nachricht für abgewählten Knoten - this.showFlash('Knotenauswahl aufgehoben', 'info', 2000); - - return; - } - - // Bisher ausgewählten Knoten zurücksetzen - if (this.selectedNode) { - this.nodeElements - .filter(n => n === this.selectedNode) - .classed('selected', false) - .select('circle:not(.node-background):not(.thought-indicator)') - .transition() - .duration(300) - .attr('r', this.nodeRadius) - .style('filter', 'url(#glass-with-reflection)') - .attr('stroke-width', 2); - } - - // Neuen Knoten auswählen - this.selectedNode = d; - - // Selected-Klasse für den Knoten setzen - this.nodeElements - .classed('selected', n => n === d); - - // Event auslösen: Knoten ausgewählt - document.dispatchEvent(new CustomEvent('mindmap-node-selected', { - detail: d - })); - - // Visuelles Feedback für Auswahl - this.nodeElements - .filter(n => n === d) - .select('circle:not(.node-background):not(.thought-indicator)') - .transition() - .duration(300) - .attr('r', this.selectedNodeRadius) - .style('filter', 'url(#selected-glow)') - .attr('stroke-width', 3) - .attr('stroke', 'rgba(79, 70, 229, 0.6)'); - - // Verbundene Kanten hervorheben - const connectedLinks = this.links.filter(link => - link.source === d || link.source.id === d.id || - link.target === d || link.target.id === d.id - ); - - // Alle Kanten zurücksetzen und dann verbundene hervorheben - this.linkElements - .classed('highlighted', false) - .transition() - .duration(300) - .style('stroke', 'rgba(75, 85, 99, 0.4)') - .style('stroke-width', 2) - .style('opacity', 0.7); - - this.linkElements - .filter(link => - connectedLinks.some(l => - (l.source === link.source || l.source.id === link.source.id) && - (l.target === link.target || l.target.id === link.target.id) - ) - ) - .classed('highlighted', true) - .transition() - .duration(300) - .style('stroke', 'rgba(79, 70, 229, 0.7)') - .style('stroke-width', 3) - .style('opacity', 0.9); - - // Knoten zentrieren - this.centerNodeInView(d); - - // Gedanken laden - this.loadThoughtsForNode(d); - - // Callback für UI-Integration - if (typeof this.onNodeClick === 'function') { - this.onNodeClick(d); - } - - // Interface-Callback für externe Verwendung - if (typeof window.onNodeSelected === 'function') { - window.onNodeSelected(d); - } - } - - // Neue Methode: Zeigt die Standardseitenleiste an (Über die Mindmap und Kategorien) - showDefaultSidebar() { - // Finde die Seitenleistenelemente - const aboutMindmapPanel = document.querySelector('[data-sidebar="about-mindmap"]'); - const categoriesPanel = document.querySelector('[data-sidebar="categories"]'); - const nodeDescriptionPanel = document.querySelector('[data-sidebar="node-description"]'); - - if (aboutMindmapPanel && categoriesPanel && nodeDescriptionPanel) { - // Beschreibungspanel ausblenden - nodeDescriptionPanel.style.display = 'none'; - - // Standardpanels einblenden mit Animation - aboutMindmapPanel.style.display = 'block'; - categoriesPanel.style.display = 'block'; - - setTimeout(() => { - aboutMindmapPanel.style.opacity = '1'; - aboutMindmapPanel.style.transform = 'translateY(0)'; - - categoriesPanel.style.opacity = '1'; - categoriesPanel.style.transform = 'translateY(0)'; - }, 50); - } - } - - // Neue Methode: Zeigt die Knotenbeschreibung in der Seitenleiste an - showNodeDescriptionSidebar(node) { - // Finde die Seitenleistenelemente - const aboutMindmapPanel = document.querySelector('[data-sidebar="about-mindmap"]'); - const categoriesPanel = document.querySelector('[data-sidebar="categories"]'); - const nodeDescriptionPanel = document.querySelector('[data-sidebar="node-description"]'); - - if (aboutMindmapPanel && categoriesPanel && nodeDescriptionPanel) { - // Standardpanels ausblenden - aboutMindmapPanel.style.transition = 'all 0.3s ease'; - categoriesPanel.style.transition = 'all 0.3s ease'; - - aboutMindmapPanel.style.opacity = '0'; - aboutMindmapPanel.style.transform = 'translateY(10px)'; - - categoriesPanel.style.opacity = '0'; - categoriesPanel.style.transform = 'translateY(10px)'; - - setTimeout(() => { - aboutMindmapPanel.style.display = 'none'; - categoriesPanel.style.display = 'none'; - - // Beschreibungspanel vorbereiten - const titleElement = nodeDescriptionPanel.querySelector('[data-node-title]'); - const descriptionElement = nodeDescriptionPanel.querySelector('[data-node-description]'); - - if (titleElement && descriptionElement) { - titleElement.textContent = node.name || 'Unbenannter Knoten'; - - // Beschreibung setzen oder Standardbeschreibung generieren - let description = node.description; - if (!description || description.trim() === '') { - description = this.generateNodeDescription(node); - } - - descriptionElement.textContent = description; - } - - // Beschreibungspanel einblenden mit Animation - nodeDescriptionPanel.style.display = 'block'; - nodeDescriptionPanel.style.opacity = '0'; - nodeDescriptionPanel.style.transform = 'translateY(10px)'; - - setTimeout(() => { - nodeDescriptionPanel.style.transition = 'all 0.4s ease'; - nodeDescriptionPanel.style.opacity = '1'; - nodeDescriptionPanel.style.transform = 'translateY(0)'; - }, 50); - }, 300); - } - } - - // Neue Methode: Generiert automatisch eine Beschreibung für einen Knoten ohne Beschreibung - generateNodeDescription(node) { - const descriptions = { - "Wissen": "Der zentrale Knotenpunkt der Mindmap, der alle wissenschaftlichen Disziplinen und Wissensgebiete verbindet. Hier finden sich grundlegende Erkenntnisse und Verbindungen zu spezifischeren Fachgebieten.", - - "Quantenphysik": "Ein Zweig der Physik, der sich mit dem Verhalten und den Interaktionen von Materie und Energie auf der kleinsten Skala beschäftigt. Quantenmechanische Phänomene wie Superposition und Verschränkung bilden die Grundlage für moderne Technologien wie Quantencomputer und -kommunikation.", - - "Neurowissenschaften": "Interdisziplinäres Forschungsgebiet, das die Struktur, Funktion und Entwicklung des Nervensystems und des Gehirns untersucht. Die Erkenntnisse beeinflussen unser Verständnis von Bewusstsein, Kognition, Verhalten und neurologischen Erkrankungen.", - - "Künstliche Intelligenz": "Forschungsgebiet der Informatik, das sich mit der Entwicklung von Systemen befasst, die menschliche Intelligenzformen simulieren können. KI umfasst maschinelles Lernen, neuronale Netze und verschiedene Ansätze zur Problemlösung und Mustererkennung.", - - "Klimaforschung": "Wissenschaftliche Disziplin, die sich mit der Untersuchung des Erdklimas, seinen Veränderungen und den zugrundeliegenden physikalischen Prozessen beschäftigt. Sie liefert wichtige Erkenntnisse zu Klimawandel, Wettermuster und globalen Umweltveränderungen.", - - "Genetik": "Wissenschaft der Gene, Vererbung und der Variation von Organismen. Moderne genetische Forschung umfasst Genomik, Gentechnologie und das Verständnis der molekularen Grundlagen des Lebens sowie ihrer Anwendungen in Medizin und Biotechnologie.", - - "Astrophysik": "Zweig der Astronomie, der die physikalischen Eigenschaften und Prozesse von Himmelskörpern und des Universums untersucht. Sie erforscht Phänomene wie Schwarze Löcher, Galaxien, kosmische Strahlung und die Entstehung und Entwicklung des Universums.", - - "Philosophie": "Disziplin, die sich mit fundamentalen Fragen des Wissens, der Realität und der Existenz auseinandersetzt. Sie umfasst Bereiche wie Metaphysik, Erkenntnistheorie, Ethik und Logik und bildet die Grundlage für kritisches Denken und wissenschaftliche Methodik.", - - "Wissenschaft": "Systematische Erforschung der Natur und der materiellen Welt durch Beobachtung, Experimente und die Formulierung überprüfbarer Theorien. Sie umfasst Naturwissenschaften, Sozialwissenschaften und angewandte Wissenschaften.", - - "Technologie": "Anwendung wissenschaftlicher Erkenntnisse für praktische Zwecke. Sie umfasst die Entwicklung von Werkzeugen, Maschinen, Materialien und Prozessen zur Lösung von Problemen und zur Verbesserung der menschlichen Lebensbedingungen.", - - "Künste": "Ausdruck menschlicher Kreativität und Imagination in verschiedenen Formen wie Malerei, Musik, Literatur, Theater und Film. Die Künste erforschen ästhetische, emotionale und intellektuelle Dimensionen der menschlichen Erfahrung.", - - "Biologie": "Wissenschaft des Lebens und der lebenden Organismen. Sie umfasst Bereiche wie Molekularbiologie, Evolutionsbiologie, Ökologie und beschäftigt sich mit der Struktur, Funktion, Entwicklung und Evolution lebender Systeme.", - - "Mathematik": "Wissenschaft der Muster, Strukturen und Beziehungen. Sie ist die Sprache der Naturwissenschaften und bildet die Grundlage für quantitative Analysen, logisches Denken und Problemlösung in allen wissenschaftlichen Disziplinen.", - - "Psychologie": "Wissenschaftliche Untersuchung des menschlichen Verhaltens und der mentalen Prozesse. Sie erforscht Bereiche wie Kognition, Emotion, Persönlichkeit, soziale Interaktionen und die Behandlung psychischer Störungen.", - - "Ethik": "Teilgebiet der Philosophie, das sich mit moralischen Prinzipien, Werten und der Frage nach richtigem und falschem Handeln beschäftigt. Sie bildet die Grundlage für moralische Entscheidungsfindung in allen Lebensbereichen." - }; - - // Verwende vordefinierte Beschreibung, wenn verfügbar - if (node.name && descriptions[node.name]) { - return descriptions[node.name]; - } - - // Generische Beschreibung basierend auf dem Knotentyp - switch (node.type) { - case 'category': - return `Dieser Knoten repräsentiert die Kategorie "${node.name}", die verschiedene verwandte Konzepte und Ideen zusammenfasst. Wählen Sie einen der verbundenen Unterthemen, um mehr Details zu erfahren.`; - case 'subcategory': - return `"${node.name}" ist eine Unterkategorie, die spezifische Aspekte eines größeren Themenbereichs beleuchtet. Die verbundenen Knoten zeigen wichtige Konzepte und Ideen innerhalb dieses Bereichs.`; - default: - return `Dieser Knoten repräsentiert das Konzept "${node.name}". Erforschen Sie die verbundenen Knoten, um Zusammenhänge und verwandte Ideen zu entdecken.`; - } - } - - // Lädt die Gedanken für einen Knoten und zeigt sie an - loadThoughtsForNode(node) { - // UI-Element für Gedanken finden - const thoughtContainer = document.getElementById('thought-container'); - const loadingIndicator = document.getElementById('thoughts-loading'); - const thoughtsList = document.getElementById('thoughts-list'); - const thoughtsTitle = document.getElementById('thoughts-title'); - const emptyStateEl = document.getElementById('mindmap-empty-state'); - - if (!thoughtContainer || !thoughtsList) { - console.error('Gedanken-Container nicht gefunden'); - this.showFlash('Fehler: Gedanken-Container nicht gefunden', 'error'); - return; - } - - // "Empty state" ausblenden - if (emptyStateEl) { - emptyStateEl.style.transition = 'all 0.3s ease'; - emptyStateEl.style.opacity = '0'; - setTimeout(() => { - emptyStateEl.style.display = 'none'; - }, 300); - } - - // Container anzeigen mit Animation - thoughtContainer.style.display = 'block'; - setTimeout(() => { - thoughtContainer.style.transition = 'all 0.4s ease'; - thoughtContainer.style.opacity = '1'; - thoughtContainer.style.transform = 'translateY(0)'; - }, 50); - - // Titel setzen - if (thoughtsTitle) { - thoughtsTitle.textContent = `Gedanken zu "${node.name}"`; - } - - // Ladeanimation anzeigen - if (loadingIndicator) { - loadingIndicator.style.display = 'flex'; - } - - // Bisherige Gedanken leeren - if (thoughtsList) { - thoughtsList.innerHTML = ''; - } - - // Flash-Nachricht über ausgewählten Knoten - this.showFlash(`Knoten "${node.name}" ausgewählt`, 'info'); - - // Verzögerung für Animation - setTimeout(() => { - // API-Aufruf für echte Daten aus der Datenbank - this.fetchThoughtsForNode(node.id) - .then(thoughts => { - // Ladeanimation ausblenden - if (loadingIndicator) { - loadingIndicator.style.display = 'none'; - } - - // Gedanken anzeigen oder "leer"-Zustand - if (thoughts && thoughts.length > 0) { - this.renderThoughts(thoughts, thoughtsList); - } else { - this.renderEmptyThoughts(thoughtsList, node); - this.showFlash(`Keine Gedanken zu "${node.name}" gefunden`, 'warning'); - } - }) - .catch(error => { - console.error('Fehler beim Laden der Gedanken:', error); - if (loadingIndicator) { - loadingIndicator.style.display = 'none'; - } - this.renderErrorState(thoughtsList); - this.showFlash('Fehler beim Laden der Gedanken. Bitte versuche es später erneut.', 'error'); - }); - }, 600); // Verzögerung für bessere UX - } - - // Holt Gedanken für einen Knoten aus der Datenbank - async fetchThoughtsForNode(nodeId) { - try { - // Extrahiere die tatsächliche ID aus dem nodeId Format (z.B. "node_123" oder "category_456") - const id = nodeId.toString().split('_')[1]; - if (!id) { - console.warn('Ungültige Node-ID: ', nodeId); - this.showFlash('Ungültige Knoten-ID: ' + nodeId, 'warning'); - return []; - } - - // API-Aufruf an den entsprechenden Endpunkt - const response = await fetch(`/api/nodes/${id}/thoughts`); - - if (!response.ok) { - throw new Error(`API-Fehler: ${response.statusText}`); - } - - const thoughts = await response.json(); - console.log('Geladene Gedanken für Knoten:', thoughts); - - if (thoughts.length > 0) { - this.showFlash(`${thoughts.length} Gedanken zum Thema geladen`, 'info'); - } else { - this.showFlash('Keine Gedanken für diesen Knoten gefunden', 'info'); - } - - return thoughts; - } catch (error) { - console.error('Fehler beim Laden der Gedanken für Knoten:', error); - this.showFlash('Fehler beim Laden der Gedanken', 'error'); - return []; - } - } - - // Rendert die Gedanken in der UI - renderThoughts(thoughts, container) { - if (!container) return; - - container.innerHTML = ''; - - thoughts.forEach(thought => { - const thoughtCard = document.createElement('div'); - thoughtCard.className = 'thought-card'; - thoughtCard.setAttribute('data-id', thought.id); - - const cardColor = thought.color_code || this.colorPalette.default; - - thoughtCard.innerHTML = ` -
-

${thought.title}

-
- ${new Date(thought.created_at).toLocaleDateString('de-DE')} - ${thought.author ? `von ${thought.author.username}` : ''} -
-
-
-

${thought.abstract || thought.content.substring(0, 150) + '...'}

-
-
-
- ${thought.keywords ? thought.keywords.split(',').map(kw => - `${kw.trim()}`).join('') : ''} -
- Mehr lesen → -
- `; - - // Event-Listener für Klick auf Gedanken - thoughtCard.addEventListener('click', (e) => { - // Verhindern, dass der Link-Klick den Kartenklick auslöst - if (e.target.tagName === 'A') return; - window.location.href = `/thoughts/${thought.id}`; - }); - - container.appendChild(thoughtCard); - }); - } - - // Rendert eine Leermeldung, wenn keine Gedanken vorhanden sind - renderEmptyThoughts(container, node) { - if (!container) return; - - const emptyState = document.createElement('div'); - emptyState.className = 'empty-thoughts-state'; - - emptyState.innerHTML = ` -
- -
-

Keine Gedanken verknüpft

-

Zu "${node.name}" sind noch keine Gedanken verknüpft.

-
- - Gedanken hinzufügen - -
- `; - - container.appendChild(emptyState); - } - - // Rendert einen Fehlerzustand - renderErrorState(container) { - if (!container) return; - - const errorState = document.createElement('div'); - errorState.className = 'error-thoughts-state'; - - errorState.innerHTML = ` -
- -
-

Fehler beim Laden

-

Die Gedanken konnten nicht geladen werden. Bitte versuche es später erneut.

- - `; - - // Event-Listener für Retry-Button - const retryButton = errorState.querySelector('.retry-button'); - if (retryButton && this.selectedNode) { - retryButton.addEventListener('click', () => { - this.loadThoughtsForNode(this.selectedNode); - }); - } - - container.appendChild(errorState); - } - - // Zentriert einen Knoten in der Ansicht - centerNodeInView(node) { - // Sanfter Übergang zur Knotenzentrierüng - const transform = d3.zoomTransform(this.svg.node()); - const scale = transform.k; - - const x = -node.x * scale + this.width / 2; - const y = -node.y * scale + this.height / 2; - - this.svg.transition() - .duration(750) - .call( - d3.zoom().transform, - d3.zoomIdentity.translate(x, y).scale(scale) - ); - - // Flash-Nachricht für Zentrierung - if (node && node.name) { - this.showFlash(`Ansicht auf "${node.name}" zentriert`, 'info', 2000); - } - } - - // Fehlermeldung anzeigen - showError(message) { - // Standard-Fehlermeldung als Banner - const errorBanner = d3.select('body').selectAll('.error-banner').data([0]); - - const errorEnter = errorBanner.enter() - .append('div') - .attr('class', 'error-banner') - .style('position', 'fixed') - .style('bottom', '-100px') - .style('left', '50%') - .style('transform', 'translateX(-50%)') - .style('background', 'rgba(220, 38, 38, 0.9)') - .style('color', 'white') - .style('padding', '12px 20px') - .style('border-radius', '8px') - .style('z-index', '1000') - .style('box-shadow', '0 10px 25px rgba(0, 0, 0, 0.3)') - .style('font-weight', '500') - .style('max-width', '90%') - .style('text-align', 'center'); - - const banner = errorEnter.merge(errorBanner); - banner.html(` ${message}`) - .transition() - .duration(500) - .style('bottom', '20px') - .transition() - .delay(5000) - .duration(500) - .style('bottom', '-100px'); - - // Auch als Flash-Nachricht anzeigen - this.showFlash(message, 'error'); - } - - // Fokussieren auf einen bestimmten Knoten per ID - focusNode(nodeId) { - const targetNode = this.nodes.find(n => n.id === nodeId); - if (!targetNode) { - this.showFlash(`Knoten mit ID "${nodeId}" nicht gefunden`, 'error'); - return; - } - - // Ausgewählten Zustand zurücksetzen - this.selectedNode = null; - - // Node-Klick simulieren - this.nodeClicked(null, targetNode); - - // Fokussieren mit einer Animation - if (targetNode.x && targetNode.y) { - const transform = d3.zoomIdentity - .translate(this.width / 2 - targetNode.x * 1.2, this.height / 2 - targetNode.y * 1.2) - .scale(1.2); - - this.svg.transition() - .duration(750) - .call( - d3.zoom().transform, - transform - ); - - this.showFlash(`Fokus auf Knoten "${targetNode.name}" gesetzt`, 'success'); - } - } - - // Filtert Knoten nach Suchbegriff - filterBySearchTerm(searchTerm) { - if (!searchTerm || searchTerm.trim() === '') { - // Alle Knoten anzeigen, wenn kein Suchbegriff - this.nodeElements - .style('display', 'block') - .selectAll('circle') - .style('opacity', 1); - - this.textElements - .style('opacity', 1); - - this.linkElements - .style('display', 'block') - .style('stroke-opacity', 0.5); - - this.showFlash('Suchfilter zurückgesetzt', 'info', 2000); - - return; - } - - searchTerm = searchTerm.toLowerCase().trim(); - - // Knoten finden, die dem Suchbegriff entsprechen - const matchingNodes = this.nodes.filter(node => - node.name.toLowerCase().includes(searchTerm) || - (node.description && node.description.toLowerCase().includes(searchTerm)) - ); - - const matchingNodeIds = matchingNodes.map(n => n.id); - - // Nur passende Knoten und ihre Verbindungen anzeigen - this.nodeElements - .style('display', d => matchingNodeIds.includes(d.id) ? 'block' : 'none') - .selectAll('circle') - .style('opacity', 1); - - this.textElements - .style('opacity', d => matchingNodeIds.includes(d.id) ? 1 : 0.2); - - this.linkElements - .style('display', link => - matchingNodeIds.includes(link.source.id) && matchingNodeIds.includes(link.target.id) ? 'block' : 'none') - .style('stroke-opacity', 0.7); - - // Wenn nur ein Knoten gefunden wurde, darauf fokussieren - if (matchingNodes.length === 1) { - this.focusNode(matchingNodes[0].id); - } - - // Wenn mehr als ein Knoten gefunden wurde, Simulation mit reduzierter Stärke neu starten - if (matchingNodes.length > 1) { - this.simulation.alpha(0.3).restart(); - this.showFlash(`${matchingNodes.length} Knoten für "${searchTerm}" gefunden`, 'success'); - } else if (matchingNodes.length === 0) { - this.showFlash(`Keine Knoten für "${searchTerm}" gefunden`, 'warning'); - } - } -} - -// D3-Erweiterungen für spezielle Effekte -class D3Extensions { - static createGlowFilter(defs, id, color = '#b38fff', strength = 5) { - const filter = defs.append('filter') - .attr('id', id) - .attr('height', '300%') - .attr('width', '300%') - .attr('x', '-100%') - .attr('y', '-100%'); - - // Farbe und Sättigung - const colorMatrix = filter.append('feColorMatrix') - .attr('type', 'matrix') - .attr('values', ` - 1 0 0 0 ${color === '#b38fff' ? 0.7 : 0.35} - 0 1 0 0 ${color === '#58a9ff' ? 0.7 : 0.35} - 0 0 1 0 ${color === '#58a9ff' ? 0.7 : 0.55} - 0 0 0 1 0 - `) - .attr('result', 'colored'); - - // Weichzeichner für Glühen - const blur = filter.append('feGaussianBlur') - .attr('in', 'colored') - .attr('stdDeviation', strength) - .attr('result', 'blur'); - - // Kombination von Original und Glühen - const merge = filter.append('feMerge'); - - merge.append('feMergeNode') - .attr('in', 'blur'); - - merge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - return filter; - } - - static createShadowFilter(defs, id) { - const filter = defs.append('filter') - .attr('id', id) - .attr('height', '200%') - .attr('width', '200%') - .attr('x', '-50%') - .attr('y', '-50%'); - - // Offset der Lichtquelle - const offset = filter.append('feOffset') - .attr('in', 'SourceAlpha') - .attr('dx', 3) - .attr('dy', 4) - .attr('result', 'offset'); - - // Weichzeichnung für Schatten - const blur = filter.append('feGaussianBlur') - .attr('in', 'offset') - .attr('stdDeviation', 5) - .attr('result', 'blur'); - - // Schatten-Opazität - const opacity = filter.append('feComponentTransfer'); - - opacity.append('feFuncA') - .attr('type', 'linear') - .attr('slope', 0.3); - - // Zusammenführen - const merge = filter.append('feMerge'); - - merge.append('feMergeNode'); - merge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - return filter; - } - - static createGlassMorphismFilter(defs, id) { - const filter = defs.append('filter') - .attr('id', id) - .attr('width', '300%') - .attr('height', '300%') - .attr('x', '-100%') - .attr('y', '-100%'); - - // Basis-Hintergrundfarbe - const bgColor = filter.append('feFlood') - .attr('flood-color', 'rgba(24, 28, 45, 0.75)') - .attr('result', 'bgColor'); - - // Weichzeichnung des Originalelements - const blur = filter.append('feGaussianBlur') - .attr('in', 'SourceGraphic') - .attr('stdDeviation', '3') - .attr('result', 'blur'); - - // Komposition des Glaseffekts mit Original - const composite1 = filter.append('feComposite') - .attr('in', 'bgColor') - .attr('in2', 'blur') - .attr('operator', 'in') - .attr('result', 'glass'); - - // Leichter Farbakzent - const colorMatrix = filter.append('feColorMatrix') - .attr('in', 'glass') - .attr('type', 'matrix') - .attr('values', '1 0 0 0 0.1 0 1 0 0 0.1 0 0 1 0 0.3 0 0 0 1 0') - .attr('result', 'coloredGlass'); - - // Leichte Transparenz an den Rändern - const specLight = filter.append('feSpecularLighting') - .attr('in', 'blur') - .attr('surfaceScale', '3') - .attr('specularConstant', '0.75') - .attr('specularExponent', '20') - .attr('lighting-color', '#ffffff') - .attr('result', 'specLight'); - - specLight.append('fePointLight') - .attr('x', '-20') - .attr('y', '-30') - .attr('z', '120'); - - // Lichtkombination - const composite2 = filter.append('feComposite') - .attr('in', 'specLight') - .attr('in2', 'coloredGlass') - .attr('operator', 'in') - .attr('result', 'lightedGlass'); - - // Alle Effekte kombinieren - const merge = filter.append('feMerge') - .attr('result', 'glassMerge'); - - merge.append('feMergeNode') - .attr('in', 'coloredGlass'); - - merge.append('feMergeNode') - .attr('in', 'lightedGlass'); - - merge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - return filter; - } - - // Erstellt einen erweiterten 3D-Glaseffekt mit Lichtreflexion - static create3DGlassEffect(defs, id) { - const filter = defs.append('filter') - .attr('id', id) - .attr('width', '300%') - .attr('height', '300%') - .attr('x', '-100%') - .attr('y', '-100%'); - - // Hintergrund-Färbung mit Transparenz - const bgColor = filter.append('feFlood') - .attr('flood-color', 'rgba(24, 28, 45, 0.7)') - .attr('result', 'bgColor'); - - // Alpha-Kanal modifizieren - const composite1 = filter.append('feComposite') - .attr('in', 'bgColor') - .attr('in2', 'SourceAlpha') - .attr('operator', 'in') - .attr('result', 'shape'); - - // Leichte Unschärfe hinzufügen - const blur = filter.append('feGaussianBlur') - .attr('in', 'shape') - .attr('stdDeviation', '2') - .attr('result', 'blurredShape'); - - // Lichtquelle für 3D-Effekt - const specLight = filter.append('feSpecularLighting') - .attr('in', 'blurredShape') - .attr('surfaceScale', '5') - .attr('specularConstant', '1') - .attr('specularExponent', '20') - .attr('lighting-color', '#ffffff') - .attr('result', 'specLight'); - - specLight.append('fePointLight') - .attr('x', '50') - .attr('y', '-50') - .attr('z', '200'); - - // Farbmatrix für Lichttönung - const colorMatrix = filter.append('feColorMatrix') - .attr('in', 'specLight') - .attr('type', 'matrix') - .attr('values', '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0') - .attr('result', 'coloredLight'); - - // Alle Effekte kombinieren - const merge = filter.append('feMerge'); - - merge.append('feMergeNode') - .attr('in', 'blurredShape'); - - merge.append('feMergeNode') - .attr('in', 'coloredLight'); - - merge.append('feMergeNode') - .attr('in', 'SourceGraphic'); - - return filter; - } -} - -// Globales Objekt für Zugriff außerhalb des Moduls -window.MindMapVisualization = MindMapVisualization; \ No newline at end of file