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

feat(mindmap): enhance interaction and initialization logic in mindmap files

Browse Source
This commit is contained in:
Marwin
2025-05-06 21:53:54 +01:00
parent 49e5e19b7c
commit aeb829e36a
6 changed files with 1806 additions and 2096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

348
static/js/mindmap-interaction.js
View File

@@ -4,238 +4,216 @@
*/
// Globale Variablen
let cy;
let selectedNode = null;
let isLegendVisible = true;
// Initialisierung der Mindmap
document.addEventListener('DOMContentLoaded', function() {
// Cytoscape-Container initialisieren
cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'background-color': '#60a5fa',
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'text-wrap': 'wrap',
'text-max-width': '100px',
'font-size': '12px',
'color': '#fff',
'text-outline-color': '#000',
'text-outline-width': '2px',
'width': '40px',
'height': '40px',
'border-width': '2px',
'border-color': '#fff',
'border-opacity': '0.5',
'padding': '10px',
'text-events': 'yes'
}
},
{
selector: 'edge',
style: {
'width': '2px',
'line-color': 'rgba(255, 255, 255, 0.3)',
'target-arrow-color': 'rgba(255, 255, 255, 0.3)',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
'label': 'data(label)',
'font-size': '10px',
'color': '#fff',
'text-outline-color': '#000',
'text-outline-width': '2px',
'text-rotation': 'autorotate'
}
},
{
selector: ':selected',
style: {
'background-color': '#8b5cf6',
'line-color': '#8b5cf6',
'target-arrow-color': '#8b5cf6',
'source-arrow-color': '#8b5cf6',
'text-outline-color': '#000',
'text-outline-width': '2px',
'border-width': '3px',
'border-color': '#fff',
'border-opacity': '1'
}
},
{
selector: '.highlighted',
style: {
'background-color': '#10b981',
'line-color': '#10b981',
'target-arrow-color': '#10b981',
'source-arrow-color': '#10b981',
'transition-property': 'background-color, line-color, target-arrow-color',
'transition-duration': '0.3s'
}
}
],
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
fit: true,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
}
});
document.addEventListener('mindmap-loaded', function() {
const cy = window.cy;
if (!cy) return;
// Event-Listener für Knoten
// Event-Listener für Knoten-Klicks
cy.on('tap', 'node', function(evt) {
const node = evt.target;
updateNodeInfo(node);
highlightConnectedNodes(node);
// 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);
});
// Event-Listener für Hintergrund-Klick
// Klick auf Hintergrund - Auswahl zurücksetzen
cy.on('tap', function(evt) {
if (evt.target === cy) {
resetHighlighting();
hideNodeInfo();
resetSelection(cy);
}
});
// Zoom-Kontrollen
document.getElementById('zoom-in').addEventListener('click', function() {
// 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('zoom-out').addEventListener('click', function() {
document.getElementById('zoomOut')?.addEventListener('click', () => {
cy.zoom({
level: cy.zoom() / 1.2,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
});
document.getElementById('reset-view').addEventListener('click', function() {
document.getElementById('resetView')?.addEventListener('click', () => {
cy.fit();
resetSelection(cy);
});
// Legende ein-/ausblenden
document.getElementById('toggle-legend').addEventListener('click', function() {
const legend = document.querySelector('.category-legend');
isLegendVisible = !isLegendVisible;
legend.style.display = isLegendVisible ? 'flex' : 'none';
// Legend-Toggle
document.getElementById('toggleLegend')?.addEventListener('click', () => {
const legend = document.getElementById('categoryLegend');
if (legend) {
isLegendVisible = !isLegendVisible;
legend.style.display = isLegendVisible ? 'block' : 'none';
}
});
// Tastatursteuerung
document.addEventListener('keydown', function(evt) {
switch(evt.key) {
case '+':
cy.zoom({
level: cy.zoom() * 1.2,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
break;
case '-':
cy.zoom({
level: cy.zoom() / 1.2,
renderedPosition: { x: cy.width() / 2, y: cy.height() / 2 }
});
break;
case 'Escape':
resetHighlighting();
hideNodeInfo();
break;
// 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);
}
});
});
// Knoteninformationen aktualisieren
function updateNodeInfo(node) {
const infoPanel = document.getElementById('node-info');
const infoContent = infoPanel.querySelector('.info-content');
/**
* 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');
// Knotendaten abrufen
const nodeData = node.data();
let html = `
<h3>${data.label || data.name}</h3>
<p class="category">${data.category || 'Keine Kategorie'}</p>
${data.description ? `<p class="description">${data.description}</p>` : ''}
<div class="connections">
<h4>Verbindungen (${connectedNodes.length})</h4>
<ul>
`;
// Info-Panel aktualisieren
infoContent.innerHTML = `
<h4 class="text-lg font-semibold mb-2">${nodeData.label}</h4>
<p class="mb-3">${nodeData.description || 'Keine Beschreibung verfügbar.'}</p>
<div class="mt-4">
<h5 class="text-sm font-semibold mb-2">Verknüpfte Konzepte:</h5>
<ul class="space-y-1">
${getConnectedNodesList(node)}
connectedNodes.forEach(connectedNode => {
const connectedData = connectedNode.data();
html += `
<li style="color: ${connectedData.color || '#60a5fa'}">
${connectedData.label || connectedData.name}
</li>
`;
});
html += `
</ul>
</div>
`;
// Panel anzeigen
infoPanel.classList.add('visible');
infoPanel.innerHTML = html;
infoPanel.style.display = 'block';
}
// Verbundene Knoten hervorheben
function highlightConnectedNodes(node) {
// Vorherige Hervorhebungen zurücksetzen
resetHighlighting();
// Ausgewählten Knoten hervorheben
node.addClass('highlighted');
// Verbundene Knoten und Kanten hervorheben
const connectedElements = node.neighborhood();
connectedElements.addClass('highlighted');
}
/**
* Aktualisiert die Seitenleiste mit Knoteninformationen
* @param {Object} node - Der ausgewählte Knoten
*/
function updateSidebar(node) {
const sidebar = document.getElementById('sidebar');
if (!sidebar) return;
// Hervorhebungen zurücksetzen
function resetHighlighting() {
cy.elements().removeClass('highlighted');
}
// Info-Panel ausblenden
function hideNodeInfo() {
const infoPanel = document.getElementById('node-info');
infoPanel.classList.remove('visible');
}
// Liste der verbundenen Knoten generieren
function getConnectedNodesList(node) {
const data = node.data();
const connectedNodes = node.neighborhood('node');
if (connectedNodes.length === 0) {
return '<li class="text-gray-400">Keine direkten Verbindungen</li>';
}
return connectedNodes.map(connectedNode => {
const data = connectedNode.data();
return `
<li class="flex items-center space-x-2">
<span class="w-2 h-2 rounded-full" style="background-color: ${getNodeColor(data.category)}"></span>
<span>${data.label}</span>
let html = `
<div class="node-details">
<h3>${data.label || data.name}</h3>
<p class="category">${data.category || 'Keine Kategorie'}</p>
${data.description ? `<p class="description">${data.description}</p>` : ''}
<div class="connections">
<h4>Verbindungen (${connectedNodes.length})</h4>
<ul>
`;
connectedNodes.forEach(connectedNode => {
const connectedData = connectedNode.data();
html += `
<li style="color: ${connectedData.color || '#60a5fa'}">
${connectedData.label || connectedData.name}
</li>
`;
}).join('');
});
html += `
</ul>
</div>
</div>
`;
sidebar.innerHTML = html;
}
// Farbe basierend auf Kategorie
function getNodeColor(category) {
const colors = {
'Philosophie': '#60a5fa',
'Wissenschaft': '#8b5cf6',
'Technologie': '#10b981',
'Künste': '#f59e0b',
'Psychologie': '#ef4444'
};
return colors[category] || '#60a5fa';
/**
* 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 = '';
}
}