From 412dabd5c13caebf4eb19ab2f0aa3c6322e2000d Mon Sep 17 00:00:00 2001 From: marwin Date: Fri, 9 May 2025 20:18:45 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mindmap):=20f=C3=BCge=20Icons?= =?UTF-8?q?=20und=20Farben=20f=C3=BCr=20Kategorien=20hinzu,=20verbessere?= =?UTF-8?q?=20das=20Layout=20und=20die=20Darstellung=20der=20Mindmap=20in?= =?UTF-8?q?=20update=5Fmindmap.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/update_mindmap.js | 278 ++++++++++++++++++++++-------------- 1 file changed, 168 insertions(+), 110 deletions(-) diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index ceb1dbc..08e6063 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -101,9 +101,36 @@ const subthemesDatabase = { ] }; -// Initiale Mindmap-Daten (nur oberste Ebene) +// Icon-Definitionen für Kategorien (FontAwesome oder SVG-URL) +const categoryIcons = { + 'Philosophie': 'fa-solid fa-lightbulb', + 'Wissenschaft': 'fa-solid fa-atom', + 'Technologie': 'fa-solid fa-microchip', + 'Künste': 'fa-solid fa-palette', + 'Psychologie': 'fa-solid fa-brain' +}; + +// Farben für Kategorien (wie im Bild) +const categoryColors = { + 'Philosophie': '#b71c1c', // Rot + 'Wissenschaft': '#f4b400', // Gelb + 'Technologie': '#0d47a1', // Blau + 'Künste': '#c2185b', // Pink + 'Psychologie': '#009688' // Türkis +}; + +// Initiale Mindmap-Daten (nur oberste Ebene, mit Icon und Farbe) const mindmapData = { nodes: [ + { + id: 'center', + label: 'Wissenskarte', + isCenter: true, + color: '#f5f5f5', + icon: 'fa-solid fa-circle', + fontColor: '#222', + fontSize: 22 + }, { id: 'philosophy', label: 'Philosophie', @@ -112,7 +139,11 @@ const mindmapData = { hasChildren: true, expanded: false, neuronSize: 8, - neuronActivity: 0.8 + neuronActivity: 0.8, + color: categoryColors['Philosophie'], + icon: categoryIcons['Philosophie'], + fontColor: '#fff', + fontSize: 18 }, { id: 'science', @@ -122,7 +153,11 @@ const mindmapData = { hasChildren: true, expanded: false, neuronSize: 8, - neuronActivity: 0.8 + neuronActivity: 0.8, + color: categoryColors['Wissenschaft'], + icon: categoryIcons['Wissenschaft'], + fontColor: '#fff', + fontSize: 18 }, { id: 'technology', @@ -132,7 +167,11 @@ const mindmapData = { hasChildren: true, expanded: false, neuronSize: 8, - neuronActivity: 0.8 + neuronActivity: 0.8, + color: categoryColors['Technologie'], + icon: categoryIcons['Technologie'], + fontColor: '#fff', + fontSize: 18 }, { id: 'arts', @@ -142,16 +181,18 @@ const mindmapData = { hasChildren: true, expanded: false, neuronSize: 8, - neuronActivity: 0.8 + neuronActivity: 0.8, + color: categoryColors['Künste'], + icon: categoryIcons['Künste'], + fontColor: '#fff', + fontSize: 18 } ], edges: [ - { source: 'philosophy', target: 'science', strength: 0.8 }, - { source: 'science', target: 'technology', strength: 0.8 }, - { source: 'technology', target: 'arts', strength: 0.6 }, - { source: 'arts', target: 'philosophy', strength: 0.6 }, - { source: 'philosophy', target: 'technology', strength: 0.4 }, - { source: 'science', target: 'arts', strength: 0.4 } + { source: 'center', target: 'philosophy', strength: 0.9 }, + { source: 'center', target: 'science', strength: 0.9 }, + { source: 'center', target: 'technology', strength: 0.9 }, + { source: 'center', target: 'arts', strength: 0.9 } ] }; @@ -187,7 +228,11 @@ document.addEventListener('DOMContentLoaded', function() { hasChildren: node.hasChildren, expanded: node.expanded, neuronSize: node.neuronSize, - neuronActivity: node.neuronActivity + neuronActivity: node.neuronActivity, + color: node.color, + icon: node.icon, + fontColor: node.fontColor, + fontSize: node.fontSize } })), // Kanten @@ -203,7 +248,7 @@ document.addEventListener('DOMContentLoaded', function() { console.log('Initialisiere Cytoscape...'); - // Initialisiere Cytoscape mit neuronalem Design + // Initialisiere Cytoscape mit concentric/circle Layout und Icon-Overlay window.cy = cytoscape({ container: cyContainer, elements: elements, @@ -213,90 +258,71 @@ document.addEventListener('DOMContentLoaded', function() { style: { 'background-color': 'data(color)', 'label': 'data(label)', - 'color': '#fff', - 'text-background-color': 'rgba(0, 0, 0, 0.7)', - 'text-background-opacity': 0.8, - 'text-background-padding': '4px', + 'color': 'data(fontColor)', 'text-valign': 'center', 'text-halign': 'center', - 'font-size': 16, - 'width': 'mapData(neuronSize, 3, 10, 30, 60)', - 'height': 'mapData(neuronSize, 3, 10, 30, 60)', - 'border-width': 2, + 'font-size': 'data(fontSize)', + 'width': 'mapData(neuronSize, 3, 10, 60, 110)', + 'height': 'mapData(neuronSize, 3, 10, 60, 110)', + 'border-width': 4, 'border-color': '#fff', - 'border-opacity': 0.8, + 'border-opacity': 0.9, 'overlay-padding': 4, 'z-index': 10, 'shape': 'ellipse', - 'background-opacity': 0.85, - 'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)', + 'background-opacity': 0.95, + 'shadow-blur': 20, 'shadow-color': 'data(color)', - 'shadow-opacity': 0.6, + 'shadow-opacity': 0.7, 'shadow-offset-x': 0, - 'shadow-offset-y': 0 + 'shadow-offset-y': 0, + 'text-wrap': 'wrap', + 'text-max-width': 90 } }, { - selector: 'node[!color]', - style: { - 'background-color': '#60a5fa' + selector: 'node[isCenter]','style': { + 'background-color': '#f5f5f5', + 'color': '#222', + 'font-size': 22, + 'border-width': 0, + 'width': 120, + 'height': 120 } }, { selector: 'node:selected', style: { 'border-color': '#f59e42', - 'border-width': 4, + 'border-width': 6, 'shadow-blur': 30, - 'shadow-opacity': 0.8 + 'shadow-opacity': 0.9 } }, { selector: 'edge', style: { - 'width': 'mapData(strength, 0.2, 1, 1, 3)', - 'line-color': '#a78bfa', - 'line-opacity': 'mapData(strength, 0.2, 1, 0.4, 0.8)', - 'target-arrow-color': '#a78bfa', - 'target-arrow-shape': 'none', + 'width': 'mapData(strength, 0.2, 1, 3, 7)', + 'line-color': '#bdbdbd', + 'line-opacity': 0.7, 'curve-style': 'bezier', - 'control-point-distances': [20, -20], + 'target-arrow-shape': 'none', + 'control-point-distances': [40, -40], 'control-point-weights': [0.5, 0.5], 'edge-distances': 'intersection', - 'loop-direction': '-45deg', - 'loop-sweep': '-90deg', - 'line-style': function(ele) { - const strength = ele.data('strength'); - if (strength <= 0.4) return 'dotted'; - if (strength <= 0.6) return 'dashed'; - return 'solid'; - } - } - }, - { - selector: 'edge:selected', - style: { - 'width': 5, - 'line-color': '#f59e42', - 'target-arrow-color': '#f59e42', - 'opacity': 1, 'line-style': 'solid' } } ], layout: { - name: 'cose', - animate: true, - animationDuration: 1000, - nodeDimensionsIncludeLabels: true, - padding: 100, - spacingFactor: 1.8, - randomize: false, + name: 'concentric', fit: true, - componentSpacing: 100, - nodeRepulsion: 8000, - edgeElasticity: 100, - animate: true + padding: 60, + animate: true, + concentric: function(node) { + return node.data('isCenter') ? 2 : 1; + }, + levelWidth: function() { return 1; } } }); @@ -346,16 +372,22 @@ document.addEventListener('DOMContentLoaded', function() { await loadSubthemes(node); } }); -}); -// Kategorie-Farben definieren -const categoryColors = { - 'Philosophie': '#60a5fa', - 'Wissenschaft': '#8b5cf6', - 'Technologie': '#10b981', - 'Künste': '#f59e0b', - 'Psychologie': '#ef4444' -}; + // Nach dem Rendern: Icons als HTML-Overlay einfügen + setTimeout(() => { + cy.nodes().forEach(node => { + const icon = node.data('icon'); + if (icon) { + const dom = cy.getElementById(node.id()).popperRef(); + const iconDiv = document.createElement('div'); + iconDiv.className = 'cy-node-icon'; + iconDiv.innerHTML = ``; + document.body.appendChild(iconDiv); + // Positionierung mit Popper.js oder absolut über node.position() + } + }); + }, 500); +}); // Funktion zum Initialisieren des neuronalen Designs function initializeNeuralDesign(cy) { @@ -440,49 +472,53 @@ function initializeNeuralDesign(cy) { // Modifiziere die updateMindmap Funktion function updateMindmap() { - if (!cy) return; - - // Bestehende Elemente entfernen - cy.elements().remove(); - - // Neue Knoten hinzufügen - mindmapData.nodes.forEach(node => { - cy.add({ - group: 'nodes', - data: { - id: node.id, - label: node.label, - category: node.category, - description: node.description, + if (!cy) return; + + // Bestehende Elemente entfernen + cy.elements().remove(); + + // Neue Knoten hinzufügen + mindmapData.nodes.forEach(node => { + cy.add({ + group: 'nodes', + data: { + id: node.id, + label: node.label, + category: node.category, + description: node.description, hasChildren: node.hasChildren, expanded: node.expanded, neuronSize: node.neuronSize, - neuronActivity: node.neuronActivity - } - }); + neuronActivity: node.neuronActivity, + color: node.color, + icon: node.icon, + fontColor: node.fontColor, + fontSize: node.fontSize + } }); - - // Neue Kanten hinzufügen - mindmapData.edges.forEach(edge => { - cy.add({ - group: 'edges', - data: { - source: edge.source, - target: edge.target, + }); + + // Neue Kanten hinzufügen + mindmapData.edges.forEach(edge => { + cy.add({ + group: 'edges', + data: { + source: edge.source, + target: edge.target, strength: edge.strength - } - }); + } }); - + }); + // Neuronales Design initialisieren initializeNeuralDesign(cy); - - // Layout anwenden - cy.layout({ - name: 'cose', - animate: true, + + // Layout anwenden + cy.layout({ + name: 'cose', + animate: true, animationDuration: 1000, - nodeDimensionsIncludeLabels: true, + nodeDimensionsIncludeLabels: true, padding: 100, spacingFactor: 1.8, randomize: false, @@ -492,7 +528,7 @@ function updateMindmap() { edgeElasticity: 100, nestingFactor: 1.2, gravity: 80 - }).run(); + }).run(); } /** @@ -765,7 +801,7 @@ 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) { @@ -867,6 +903,20 @@ async function loadSubthemes(node) { // Erfolgsmeldung anzeigen showFlash('Subthemen erfolgreich geladen', 'success'); + // Icons für Subthemen wie oben einfügen + setTimeout(() => { + newCy.nodes().forEach(node => { + const icon = node.data('icon'); + if (icon) { + const dom = newCy.getElementById(node.id()).popperRef(); + const iconDiv = document.createElement('div'); + iconDiv.className = 'cy-node-icon'; + iconDiv.innerHTML = ``; + document.body.appendChild(iconDiv); + } + }); + }, 500); + } catch (error) { console.error('Fehler beim Laden der Subthemen:', error); showFlash('Fehler beim Laden der Subthemen', 'error'); @@ -942,5 +992,13 @@ style.textContent = ` .cy-container node:hover { filter: brightness(1.2); } + + .cy-node-icon { + position: absolute; + pointer-events: none; + z-index: 1001; + color: #fff; + text-shadow: 0 2px 8px rgba(0,0,0,0.25); + } `; document.head.appendChild(style); \ No newline at end of file