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

58
templates/mindmap.html
View File

@@ -172,57 +172,63 @@
<!-- Kontrollpanel -->
<div class="control-panel">
<button class="control-button" id="zoom-in">
<i class="fas fa-search-plus"></i> Einzoomen
<button id="zoomIn" class="control-button">
<i class="fas fa-search-plus"></i>
<span>Vergrößern</span>
</button>
<button class="control-button" id="zoom-out">
<i class="fas fa-search-minus"></i> Auszoomen
<button id="zoomOut" class="control-button">
<i class="fas fa-search-minus"></i>
<span>Verkleinern</span>
</button>
<button class="control-button" id="reset-view">
<i class="fas fa-compress-arrows-alt"></i> Ansicht zurücksetzen
<button id="resetView" class="control-button">
<i class="fas fa-sync"></i>
<span>Zurücksetzen</span>
</button>
<button class="control-button" id="toggle-legend">
<i class="fas fa-layer-group"></i> Legende ein/aus
<button id="toggleLegend" class="control-button">
<i class="fas fa-layer-group"></i>
<span>Legende</span>
</button>
</div>
<!-- Info-Panel -->
<div class="info-panel" id="node-info">
<h3 class="info-title">Knoteninformationen</h3>
<div class="info-content">
<p>Wählen Sie einen Knoten aus, um Details anzuzeigen.</p>
</div>
<div id="infoPanel" class="info-panel">
<h3 class="info-title">Knotendetails</h3>
<div class="info-content"></div>
</div>
<!-- Kategorie-Legende -->
<div class="category-legend">
<div id="categoryLegend" class="category-legend">
<div class="category-item">
<span class="category-color" style="background: #60a5fa;"></span>
Philosophie
<div class="category-color" style="background-color: #60a5fa;"></div>
<span>Philosophie</span>
</div>
<div class="category-item">
<span class="category-color" style="background: #8b5cf6;"></span>
Wissenschaft
<div class="category-color" style="background-color: #8b5cf6;"></div>
<span>Wissenschaft</span>
</div>
<div class="category-item">
<span class="category-color" style="background: #10b981;"></span>
Technologie
<div class="category-color" style="background-color: #10b981;"></div>
<span>Technologie</span>
</div>
<div class="category-item">
<span class="category-color" style="background: #f59e0b;"></span>
Künste
<div class="category-color" style="background-color: #f59e0b;"></div>
<span>Künste</span>
</div>
<div class="category-item">
<span class="category-color" style="background: #ef4444;"></span>
Psychologie
<div class="category-color" style="background-color: #ef4444;"></div>
<span>Psychologie</span>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/cytoscape.min.js') }}"></script>
<!-- Cytoscape und Erweiterungen -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-cose-bilkent/4.1.0/cytoscape-cose-bilkent.min.js"></script>
<!-- Unsere JavaScript-Dateien -->
<script src="{{ url_for('static', filename='js/mindmap-interaction.js') }}"></script>
<script src="{{ url_for('static', filename='js/mindmap-init.js') }}"></script>
<script src="{{ url_for('static', filename='js/update_mindmap.js') }}"></script>
<script src="{{ url_for('static', filename='js/mindmap-interaction.js') }}"></script>
{% endblock %}