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

noch nicht ganz

Browse Source
This commit is contained in:
Marwin
2025-05-09 20:06:35 +01:00
parent 118f8ed132
commit 5ade301f80
1 changed files with 227 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
static/js/update_mindmap.js
View File

@@ -186,7 +186,8 @@ document.addEventListener('DOMContentLoaded', function() {
description: node.description,
hasChildren: node.hasChildren,
expanded: node.expanded,
expanded: node.expanded
neuronSize: node.neuronSize,
neuronActivity: node.neuronActivity
}
})),
// Kanten
@@ -194,14 +195,15 @@ document.addEventListener('DOMContentLoaded', function() {
data: {
source: edge.source,
target: edge.target,
label: edge.label
label: edge.label,
strength: edge.strength
}
}))
];
console.log('Initialisiere Cytoscape...');
// Initialisiere Cytoscape mit einfachem, stabilem Design
// Initialisiere Cytoscape mit neuronalem Design
window.cy = cytoscape({
container: cyContainer,
elements: elements,
@@ -212,18 +214,26 @@ document.addEventListener('DOMContentLoaded', function() {
'background-color': 'data(color)',
'label': 'data(label)',
'color': '#fff',
'text-background-color': '#222222',
'text-background-opacity': 0.7,
'text-background-color': 'rgba(0, 0, 0, 0.7)',
'text-background-opacity': 0.8,
'text-background-padding': '4px',
'text-valign': 'center',
'text-halign': 'center',
'font-size': 18,
'width': 40,
'height': 40,
'font-size': 16,
'width': 'mapData(neuronSize, 3, 10, 30, 60)',
'height': 'mapData(neuronSize, 3, 10, 30, 60)',
'border-width': 2,
'border-color': '#fff',
'border-opacity': 0.8,
'overlay-padding': 4,
'z-index': 10
'z-index': 10,
'shape': 'ellipse',
'background-opacity': 0.85,
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
'shadow-color': 'data(color)',
'shadow-opacity': 0.6,
'shadow-offset-x': 0,
'shadow-offset-y': 0
}
},
{
@@ -236,25 +246,31 @@ document.addEventListener('DOMContentLoaded', function() {
selector: 'node:selected',
style: {
'border-color': '#f59e42',
'border-width': 4
'border-width': 4,
'shadow-blur': 30,
'shadow-opacity': 0.8
}
},
{
selector: 'edge',
style: {
'width': 3,
'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': 'triangle',
'target-arrow-shape': 'none',
'curve-style': 'bezier',
'label': 'data(label)',
'font-size': 12,
'color': '#fff',
'text-background-color': '#222222',
'text-background-opacity': 0.7,
'text-background-padding': '2px',
'opacity': 0.8,
'line-style': 'solid'
'control-point-distances': [20, -20],
'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';
}
}
},
{
@@ -263,18 +279,57 @@ document.addEventListener('DOMContentLoaded', function() {
'width': 5,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1
'opacity': 1,
'line-style': 'solid'
}
}
],
layout: {
name: 'cose',
animate: true,
animationDuration: 1000,
nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
fit: true,
componentSpacing: 100,
nodeRepulsion: 8000,
edgeElasticity: 100,
animate: true
}
});
console.log('Cytoscape initialisiert');
// Füge neuronale Eigenschaften zu allen Knoten hinzu
cy.nodes().forEach(node => {
const data = node.data();
node.data({
...data,
neuronSize: data.neuronSize || 8,
neuronActivity: data.neuronActivity || 0.8,
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6,
lastFired: 0,
color: categoryColors[data.category] || '#60a5fa'
});
});
// Füge synaptische Eigenschaften zu allen Kanten hinzu
cy.edges().forEach(edge => {
const data = edge.data();
edge.data({
...data,
strength: data.strength || 0.5,
conductionVelocity: Math.random() * 0.5 + 0.3,
latency: Math.random() * 100 + 50
});
});
// Starte neuronale Aktivitätssimulation
startNeuralActivitySimulation(cy);
// Mindmap mit echten Daten befüllen (Styles, Farben etc.)
updateMindmap();
@@ -302,113 +357,142 @@ const categoryColors = {
'Psychologie': '#ef4444'
};
// Mindmap aktualisieren
// Funktion zum Initialisieren des neuronalen Designs
function initializeNeuralDesign(cy) {
// Füge neuronale Eigenschaften zu allen Knoten hinzu
cy.nodes().forEach(node => {
const data = node.data();
node.data({
...data,
neuronSize: data.neuronSize || 8,
neuronActivity: data.neuronActivity || 0.8,
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6,
lastFired: 0,
color: categoryColors[data.category] || '#60a5fa'
});
});
// Füge synaptische Eigenschaften zu allen Kanten hinzu
cy.edges().forEach(edge => {
const data = edge.data();
edge.data({
...data,
strength: data.strength || 0.5,
conductionVelocity: Math.random() * 0.5 + 0.3,
latency: Math.random() * 100 + 50
});
});
// Wende neuronales Styling an
cy.style()
.selector('node')
.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',
'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,
'border-color': '#fff',
'border-opacity': 0.8,
'overlay-padding': 4,
'z-index': 10,
'shape': 'ellipse',
'background-opacity': 0.85,
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
'shadow-color': 'data(color)',
'shadow-opacity': 0.6,
'shadow-offset-x': 0,
'shadow-offset-y': 0
})
.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',
'curve-style': 'bezier',
'control-point-distances': [20, -20],
'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';
}
})
.update();
// Starte neuronale Aktivitätssimulation
startNeuralActivitySimulation(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,
color: categoryColors[node.category] || '#60a5fa',
hasChildren: node.hasChildren,
expanded: node.expanded
}
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
}
});
});
});
// Neue Kanten hinzufügen
mindmapData.edges.forEach(edge => {
cy.add({
group: 'edges',
data: {
source: edge.source,
target: edge.target,
label: edge.label
}
// Neue Kanten hinzufügen
mindmapData.edges.forEach(edge => {
cy.add({
group: 'edges',
data: {
source: edge.source,
target: edge.target,
strength: edge.strength
}
});
});
});
// Nur einfaches, klares Styling - KEINE Schatten, KEIN Glow, KEINE dynamischen Styles!
cy.style([
{
selector: 'node',
style: {
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'text-wrap': 'wrap',
'text-max-width': '100px',
'font-size': '14px',
'color': '#ffffff',
'text-outline-color': '#0a0e19',
'text-outline-width': 1.5,
'text-outline-opacity': 0.9,
'text-margin-y': 7,
'width': 40,
'height': 40,
'background-color': 'data(color)',
'background-opacity': 0.85,
'border-width': 2,
'shape': 'ellipse',
'text-background-color': 'rgba(24, 28, 45, 0.7)',
'text-background-opacity': 0.8,
'text-background-shape': 'roundrectangle',
'text-background-padding': '4px'
}
},
{
selector: 'edge',
style: {
'width': 3,
'curve-style': 'bezier',
'line-color': '#8a8aaa',
'line-opacity': 0.7,
'line-style': 'solid',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#8a8aaa',
'label': 'data(label)',
'font-size': 12,
'color': '#fff',
'text-background-color': '#222222',
'text-background-opacity': 0.7,
'text-background-padding': '2px'
}
},
{
selector: 'node:selected',
style: {
'border-color': '#f59e42',
'border-width': 4
}
},
{
selector: 'edge:selected',
style: {
'width': 5,
'line-color': '#f59e42',
'target-arrow-color': '#f59e42',
'opacity': 1
}
}
]);
// Layout anwenden
cy.layout({
name: 'cose',
animate: true,
animationDuration: 1800,
nodeDimensionsIncludeLabels: true,
padding: 100
}).run();
// Neuronales Design initialisieren
initializeNeuralDesign(cy);
// Layout anwenden
cy.layout({
name: 'cose',
animate: true,
animationDuration: 1000,
nodeDimensionsIncludeLabels: true,
padding: 100,
spacingFactor: 1.8,
randomize: false,
fit: true,
componentSpacing: 100,
nodeRepulsion: 8000,
edgeElasticity: 100,
nestingFactor: 1.2,
gravity: 80
}).run();
}
/**
@@ -756,11 +840,15 @@ async function loadSubthemes(node) {
description: subtheme.description,
hasChildren: subtheme.hasChildren,
expanded: false,
color: categoryColors[subtheme.category] || '#60a5fa'
neuronSize: 6,
neuronActivity: 0.7
}
});
});
// Neuronales Design für die neue Mindmap initialisieren
initializeNeuralDesign(newCy);
// Event-Listener für die neue Mindmap
newCy.on('tap', 'node', async function(evt) {
const clickedNode = evt.target;
@@ -841,5 +929,18 @@ style.textContent = `
width: 100%;
height: calc(100% - 4rem);
}
/* Neuronale Effekte */
.cy-container {
background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
}
.cy-container node {
transition: all 0.3s ease;
}
.cy-container node:hover {
filter: brightness(1.2);
}
`;
document.head.appendChild(style);