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

✨ feat: update mindmap styles and improve node and edge rendering logic for better visualization

Browse Source
This commit is contained in:
Till Tomczak
2025-05-12 20:36:12 +02:00
parent 61124f5266
commit ab56f44ae9
1 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
static/js/update_mindmap.js
View File

@@ -58,8 +58,8 @@ const mindmapStyles = {
'text-valign': 'center',
'text-halign': 'center',
'font-size': 16,
'width': 'mapData(neuronSize, 3, 10, 30, 60)',
'height': 'mapData(neuronSize, 3, 10, 30, 60)',
'width': 40,
'height': 40,
'border-width': 2,
'border-color': '#ffffff',
'border-opacity': 0.8,
@@ -365,6 +365,11 @@ function initializeNeuralDesign(cy) {
// Füge neuronale Eigenschaften zu allen Knoten hinzu
cy.nodes().forEach(node => {
const data = node.data();
// Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
const categoryColor = data.category && mindmapConfig.categories[data.category]
? mindmapConfig.categories[data.category].color
: '#60a5fa';
node.data({
...data,
neuronSize: data.neuronSize || 8,
@@ -372,7 +377,7 @@ function initializeNeuralDesign(cy) {
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6,
lastFired: 0,
color: categoryColors[data.category] || '#60a5fa'
color: data.color || categoryColor
});
});
@@ -400,8 +405,8 @@ function initializeNeuralDesign(cy) {
'text-valign': 'center',
'text-halign': 'center',
'font-size': 16,
'width': 'mapData(neuronSize, 3, 10, 30, 60)',
'height': 'mapData(neuronSize, 3, 10, 30, 60)',
'width': 40,
'height': 40,
'border-width': 2,
'border-color': '#fff',
'border-opacity': 0.8,
@@ -409,7 +414,7 @@ function initializeNeuralDesign(cy) {
'z-index': 10,
'shape': 'ellipse',
'background-opacity': 0.85,
'shadow-blur': 'mapData(neuronActivity, 0.3, 1, 10, 20)',
'shadow-blur': 15,
'shadow-color': 'data(color)',
'shadow-opacity': 0.6,
'shadow-offset-x': 0,
@@ -417,23 +422,30 @@ function initializeNeuralDesign(cy) {
})
.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': function(ele) {
return ele.data('strength') ? ele.data('strength') * 3 : 1;
},
'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-color': function(ele) {
const sourceColor = ele.source().data('color');
return sourceColor || '#8a8aaa';
},
'line-opacity': function(ele) {
return ele.data('strength') ? ele.data('strength') * 0.8 : 0.4;
},
'line-style': function(ele) {
const strength = ele.data('strength');
if (!strength) return 'solid';
if (strength <= 0.4) return 'dotted';
if (strength <= 0.6) return 'dashed';
return 'solid';
}
},
'target-arrow-shape': 'none',
'source-endpoint': '0% 50%',
'target-endpoint': '100% 50%',
'transition-property': 'line-opacity, width',
'transition-duration': '0.3s',
'transition-timing-function': 'ease-in-out'
})
.update();
@@ -585,11 +597,11 @@ function applyNeuralNetworkStyle(cy) {
'text-margin-y': 8,
'width': function(ele) {
if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
return 80;
},
'height': function(ele) {
if (ele.data('isCenter')) return 120;
return ele.data('neuronSize') ? ele.data('neuronSize') * 10 : 80;
return 80;
},
'background-color': 'data(color)',
'background-opacity': 0.9,