marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ich bin dran !

Browse Source
This commit is contained in:
Marwin
2025-05-06 22:12:46 +01:00
parent 58a5ea00bd
commit f093a6211c
1 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
static/js/update_mindmap.js
View File

@@ -24,18 +24,30 @@ document.addEventListener('DOMContentLoaded', function() {
} }
console.log('Cytoscape ist verfügbar'); console.log('Cytoscape ist verfügbar');
// Beispiel-Daten (kannst du später ersetzen) // Beispiel-Daten entfernt, stattdessen große Mindmap-Daten verwenden
const elements = [ const elements = [
{ data: { id: 'a', label: 'Neuron A' } }, // Knoten
{ data: { id: 'b', label: 'Neuron B' } }, ...mindmapData.nodes.map(node => ({
{ data: { id: 'c', label: 'Neuron C' } }, data: {
{ data: { source: 'a', target: 'b' } }, id: node.id,
{ data: { source: 'a', target: 'c' } } label: node.label,
category: node.category,
description: node.description
}
})),
// Kanten
...mindmapData.edges.map(edge => ({
data: {
source: edge.source,
target: edge.target,
label: edge.label
}
}))
]; ];
console.log('Initialisiere Cytoscape...'); console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape // Initialisiere Cytoscape mit großen Daten
window.cy = cytoscape({ window.cy = cytoscape({
container: cyContainer, container: cyContainer,
elements: elements, elements: elements,
@@ -43,7 +55,7 @@ document.addEventListener('DOMContentLoaded', function() {
{ {
selector: 'node', selector: 'node',
style: { style: {
'background-color': '#60a5fa', 'background-color': 'data(color)',
'label': 'data(label)', 'label': 'data(label)',
'color': '#fff', 'color': '#fff',
'text-background-color': '#222a', 'text-background-color': '#222a',
@@ -68,7 +80,13 @@ document.addEventListener('DOMContentLoaded', function() {
'line-color': '#a78bfa', 'line-color': '#a78bfa',
'target-arrow-color': '#a78bfa', 'target-arrow-color': '#a78bfa',
'target-arrow-shape': 'triangle', 'target-arrow-shape': 'triangle',
'curve-style': 'bezier' 'curve-style': 'bezier',
'label': 'data(label)',
'font-size': 12,
'color': '#fff',
'text-background-color': '#222a',
'text-background-opacity': 0.7,
'text-background-padding': '2px',
} }
} }
], ],
@@ -80,6 +98,9 @@ document.addEventListener('DOMContentLoaded', function() {
console.log('Cytoscape initialisiert'); console.log('Cytoscape initialisiert');
// Mindmap mit echten Daten befüllen (Styles, Farben etc.)
updateMindmap();
// Event auslösen, damit andere Scripte reagieren können // Event auslösen, damit andere Scripte reagieren können
document.dispatchEvent(new Event('mindmap-loaded')); document.dispatchEvent(new Event('mindmap-loaded'));
console.log('mindmap-loaded Event ausgelöst'); console.log('mindmap-loaded Event ausgelöst');