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

✨ feat: Erweiterung der Mindmap-Funktionalität durch Hinzufügen von Hover-Events für Knoten und Verbesserung der Zoom-Steuerung; Info-Panel für Knotendetails implementiert.

Browse Source
This commit is contained in:
Marwin
2025-05-16 20:40:53 +01:00
parent bb3211ab3d
commit 302d5213ef
2 changed files with 129 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
templates/mindmap.html
View File

@@ -436,7 +436,12 @@
</div>
</div>
<div id="infoPanel" class="info-panel"></div>
<!-- Info-Panel für Knotendetails -->
<div id="infoPanel" class="info-panel">
<h3 class="info-title">Knotendetails</h3>
<div class="info-content"></div>
</div>
<div id="categoryLegend" class="category-legend"></div>
</div>
{% endblock %}
@@ -651,7 +656,7 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
// Zoom-Funktionen
// Funktionen für Zoom-Buttons und Reset
document.getElementById('zoomIn').addEventListener('click', function() {
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
});
@@ -663,36 +668,6 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('resetView').addEventListener('click', function() {
if (window.cy) window.cy.fit();
});
// Funktionen für Knoteninfo-Panel
function showNodeInfo(node) {
if (!node || !node.isNode()) return;
const infoPanel = document.getElementById('infoPanel');
const infoTitle = infoPanel.querySelector('.info-title');
const infoContent = infoPanel.querySelector('.info-content');
const data = node.data();
infoTitle.textContent = data.label || 'Knotendetails';
let contentHTML = `
<p><strong>Kategorie:</strong> ${data.category || 'Nicht kategorisiert'}</p>
<p><strong>Beschreibung:</strong> ${data.description || 'Keine Beschreibung verfügbar'}</p>
`;
if (data.hasChildren) {
contentHTML += `<p><i class="fas fa-sitemap"></i> Hat Unterknoten</p>`;
}
infoContent.innerHTML = contentHTML;
infoPanel.classList.add('visible');
}
function hideNodeInfo() {
const infoPanel = document.getElementById('infoPanel');
infoPanel.classList.remove('visible');
}
});
</script>
{% endblock %}