744 lines
20 KiB
HTML
744 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Interaktive Mindmap{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/src/mindmap.css') }}">
|
|
<style>
|
|
/* Grundlegendes Layout */
|
|
.mindmap-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: calc(100vh - 64px);
|
|
background: linear-gradient(135deg, #1a1f2e 0%, #0f172a 100%);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hauptcontainer für die Mindmap */
|
|
#cy {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Header-Bereich */
|
|
.mindmap-header {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 1.5rem;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.mindmap-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin: 0;
|
|
background: linear-gradient(90deg, #60a5fa, #8b5cf6);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Aktionsmenü im Header */
|
|
.mindmap-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.action-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 0.5rem;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.action-button.primary {
|
|
background: rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.action-button.primary:hover {
|
|
background: rgba(139, 92, 246, 0.5);
|
|
}
|
|
|
|
.action-button.danger {
|
|
background: rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.action-button.danger:hover {
|
|
background: rgba(220, 38, 38, 0.5);
|
|
}
|
|
|
|
/* Kontrollpanel */
|
|
.control-panel {
|
|
position: absolute;
|
|
right: 2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.control-button {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.5rem 0;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.control-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
.control-button i {
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
/* CRUD Panel */
|
|
.crud-panel {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border-radius: 1rem;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.crud-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 0.75rem;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.crud-button:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.crud-button i {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.crud-button span {
|
|
font-size: 0.7rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.crud-button.create {
|
|
background: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.crud-button.create:hover {
|
|
background: rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
.crud-button.edit {
|
|
background: rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.crud-button.edit:hover {
|
|
background: rgba(245, 158, 11, 0.5);
|
|
}
|
|
|
|
.crud-button.delete {
|
|
background: rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.crud-button.delete:hover {
|
|
background: rgba(220, 38, 38, 0.5);
|
|
}
|
|
|
|
.crud-button.save {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.crud-button.save:hover {
|
|
background: rgba(59, 130, 246, 0.5);
|
|
}
|
|
|
|
/* Info-Panel */
|
|
.info-panel {
|
|
position: absolute;
|
|
left: 2rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
width: 300px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-panel.visible {
|
|
opacity: 1;
|
|
transform: translateY(-50%) translateX(0);
|
|
}
|
|
|
|
.info-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.info-content {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Kategorie-Legende */
|
|
.category-legend {
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
border-radius: 1rem;
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.category-item {
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.category-color {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Animationen */
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* Ladeanzeige */
|
|
.loader {
|
|
border: 4px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
border-top: 4px solid #60a5fa;
|
|
width: 40px;
|
|
height: 40px;
|
|
animation: spin 1s linear infinite;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-top: -20px;
|
|
margin-left: -20px;
|
|
z-index: 5;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Status-Meldung */
|
|
.status-message {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(15, 23, 42, 0.9);
|
|
padding: 1rem 2rem;
|
|
border-radius: 0.5rem;
|
|
color: white;
|
|
font-size: 1rem;
|
|
z-index: 15;
|
|
text-align: center;
|
|
max-width: 80%;
|
|
}
|
|
|
|
/* Bearbeitungsmodus-Hinweis */
|
|
.edit-mode-indicator {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
background: rgba(245, 158, 11, 0.8);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.9rem;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.edit-mode-indicator.active {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Kontext-Menü */
|
|
.context-menu {
|
|
position: absolute;
|
|
background: rgba(30, 41, 59, 0.95);
|
|
border-radius: 8px;
|
|
padding: 8px 0;
|
|
min-width: 160px;
|
|
z-index: 2000;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.context-menu-item {
|
|
padding: 8px 16px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mindmap-container">
|
|
<!-- Header -->
|
|
<div class="mindmap-header">
|
|
<h1 class="mindmap-title">Interaktive Wissenslandkarte</h1>
|
|
|
|
<!-- Aktionsmenü -->
|
|
<div class="mindmap-actions">
|
|
<button id="toggleEditMode" class="action-button primary">
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bearbeiten</span>
|
|
</button>
|
|
<button id="saveChanges" class="action-button" style="display: none;">
|
|
<i class="fas fa-save"></i>
|
|
<span>Speichern</span>
|
|
</button>
|
|
<button id="cancelEdit" class="action-button danger" style="display: none;">
|
|
<i class="fas fa-times"></i>
|
|
<span>Abbrechen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ladeanzeige -->
|
|
<div id="loader" class="loader"></div>
|
|
|
|
<!-- Status-Meldung -->
|
|
<div id="statusMessage" class="status-message" style="display: none;">Lade Mindmap...</div>
|
|
|
|
<!-- Bearbeitungsmodus-Hinweis -->
|
|
<div id="editModeIndicator" class="edit-mode-indicator">
|
|
<i class="fas fa-pencil-alt"></i>
|
|
<span>Bearbeitungsmodus</span>
|
|
</div>
|
|
|
|
<!-- Hauptvisualisierung -->
|
|
<div id="cy"></div>
|
|
|
|
<!-- Kontrollpanel -->
|
|
<div class="control-panel">
|
|
<button id="zoomIn" class="control-button">
|
|
<i class="fas fa-search-plus"></i>
|
|
<span>Vergrößern</span>
|
|
</button>
|
|
<button id="zoomOut" class="control-button">
|
|
<i class="fas fa-search-minus"></i>
|
|
<span>Verkleinern</span>
|
|
</button>
|
|
<button id="resetView" class="control-button">
|
|
<i class="fas fa-sync"></i>
|
|
<span>Zurücksetzen</span>
|
|
</button>
|
|
<button id="toggleLegend" class="control-button">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>Legende</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- CRUD Buttons (anfänglich ausgeblendet) -->
|
|
<div id="crudPanel" class="crud-panel" style="display: none;">
|
|
<button id="createNode" class="crud-button create">
|
|
<i class="fas fa-plus-circle"></i>
|
|
<span>Knoten erstellen</span>
|
|
</button>
|
|
<button id="createEdge" class="crud-button create">
|
|
<i class="fas fa-link"></i>
|
|
<span>Verbindung</span>
|
|
</button>
|
|
<button id="editNode" class="crud-button edit" disabled>
|
|
<i class="fas fa-edit"></i>
|
|
<span>Bearbeiten</span>
|
|
</button>
|
|
<button id="deleteElement" class="crud-button delete" disabled>
|
|
<i class="fas fa-trash-alt"></i>
|
|
<span>Löschen</span>
|
|
</button>
|
|
<button id="saveMindmap" class="crud-button save">
|
|
<i class="fas fa-save"></i>
|
|
<span>Speichern</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Info-Panel -->
|
|
<div id="infoPanel" class="info-panel">
|
|
<h3 class="info-title">Knotendetails</h3>
|
|
<div class="info-content"></div>
|
|
</div>
|
|
|
|
<!-- Kategorie-Legende -->
|
|
<div id="categoryLegend" class="category-legend">
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #9F7AEA;"></div>
|
|
<span>Philosophie</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #60A5FA;"></div>
|
|
<span>Wissenschaft</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #10B981;"></div>
|
|
<span>Technologie</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #F59E0B;"></div>
|
|
<span>Künste</span>
|
|
</div>
|
|
<div class="category-item">
|
|
<div class="category-color" style="background-color: #EF4444;"></div>
|
|
<span>Psychologie</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- 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/update_mindmap.js') }}"></script>
|
|
|
|
<!-- Initialisierung -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOMContentLoaded Event ausgelöst');
|
|
|
|
const cyContainer = document.getElementById('cy');
|
|
const loader = document.getElementById('loader');
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
const crudPanel = document.getElementById('crudPanel');
|
|
const editModeIndicator = document.getElementById('editModeIndicator');
|
|
|
|
// CRUD Buttons
|
|
const createNodeBtn = document.getElementById('createNode');
|
|
const createEdgeBtn = document.getElementById('createEdge');
|
|
const editNodeBtn = document.getElementById('editNode');
|
|
const deleteElementBtn = document.getElementById('deleteElement');
|
|
const saveMindmapBtn = document.getElementById('saveMindmap');
|
|
|
|
// Header Action Buttons
|
|
const toggleEditModeBtn = document.getElementById('toggleEditMode');
|
|
const saveChangesBtn = document.getElementById('saveChanges');
|
|
const cancelEditBtn = document.getElementById('cancelEdit');
|
|
|
|
let isEditMode = false;
|
|
let selectedElement = null;
|
|
|
|
if (cyContainer) {
|
|
console.log('Container gefunden:', cyContainer);
|
|
|
|
// Loader und Statusmeldung anzeigen
|
|
loader.style.display = 'block';
|
|
statusMessage.textContent = 'Lade Mindmap...';
|
|
statusMessage.style.display = 'block';
|
|
|
|
// Prüfen, ob Cytoscape vorhanden ist
|
|
if (typeof cytoscape !== 'undefined') {
|
|
console.log('Cytoscape ist verfügbar');
|
|
|
|
// Initialisieren der Mindmap
|
|
initializeMindmap().then(() => {
|
|
// Erfolg: Loader und Statusmeldung ausblenden
|
|
loader.style.display = 'none';
|
|
statusMessage.style.display = 'none';
|
|
|
|
// Event-Listener für Knotenauswahl
|
|
window.cy.on('select', 'node', function(event) {
|
|
selectedElement = event.target;
|
|
editNodeBtn.disabled = false;
|
|
deleteElementBtn.disabled = false;
|
|
|
|
// Knotendetails im Info-Panel anzeigen
|
|
showNodeInfo(selectedElement);
|
|
});
|
|
|
|
window.cy.on('select', 'edge', function(event) {
|
|
selectedElement = event.target;
|
|
editNodeBtn.disabled = true;
|
|
deleteElementBtn.disabled = false;
|
|
});
|
|
|
|
window.cy.on('unselect', function() {
|
|
selectedElement = null;
|
|
editNodeBtn.disabled = true;
|
|
deleteElementBtn.disabled = true;
|
|
|
|
// Info-Panel ausblenden
|
|
hideNodeInfo();
|
|
});
|
|
|
|
// Rechtsklick-Menü
|
|
window.cy.on('cxttap', 'node', function(event) {
|
|
// Kontextmenü für Knoten anzeigen
|
|
if (isEditMode) {
|
|
const node = event.target;
|
|
const position = event.renderedPosition;
|
|
showNodeContextMenu(node, {
|
|
x: event.originalEvent.clientX,
|
|
y: event.originalEvent.clientY
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
window.cy.on('cxttap', function(event) {
|
|
// Kontextmenü zum Hinzufügen eines Knotens
|
|
if (isEditMode && event.target === window.cy) {
|
|
showAddNodeMenu({
|
|
x: event.originalEvent.clientX,
|
|
y: event.originalEvent.clientY
|
|
});
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
}).catch(error => {
|
|
// Fehler: Fehlermeldung anzeigen
|
|
console.error('Mindmap-Initialisierung fehlgeschlagen', error);
|
|
loader.style.display = 'none';
|
|
statusMessage.textContent = 'Mindmap konnte nicht initialisiert werden: ' + error.message;
|
|
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
statusMessage.style.display = 'block';
|
|
});
|
|
} else {
|
|
console.error('Cytoscape ist nicht verfügbar');
|
|
loader.style.display = 'none';
|
|
statusMessage.textContent = 'Cytoscape-Bibliothek konnte nicht geladen werden';
|
|
statusMessage.style.backgroundColor = 'rgba(220, 38, 38, 0.9)';
|
|
statusMessage.style.display = 'block';
|
|
}
|
|
} else {
|
|
console.error('Container #cy nicht gefunden');
|
|
}
|
|
|
|
// Bearbeitungsmodus umschalten
|
|
toggleEditModeBtn.addEventListener('click', function() {
|
|
isEditMode = !isEditMode;
|
|
|
|
if (isEditMode) {
|
|
// Bearbeitungsmodus aktivieren
|
|
crudPanel.style.display = 'flex';
|
|
editModeIndicator.classList.add('active');
|
|
toggleEditModeBtn.style.display = 'none';
|
|
saveChangesBtn.style.display = 'inline-flex';
|
|
cancelEditBtn.style.display = 'inline-flex';
|
|
window.cy.container().classList.add('editing-mode');
|
|
|
|
// Aktiviere Knotenbewegung (dragging)
|
|
window.cy.nodes().unlock();
|
|
} else {
|
|
// Bearbeitungsmodus deaktivieren
|
|
crudPanel.style.display = 'none';
|
|
editModeIndicator.classList.remove('active');
|
|
toggleEditModeBtn.style.display = 'inline-flex';
|
|
saveChangesBtn.style.display = 'none';
|
|
cancelEditBtn.style.display = 'none';
|
|
window.cy.container().classList.remove('editing-mode');
|
|
|
|
// Deaktiviere Knotenbewegung
|
|
window.cy.nodes().lock();
|
|
}
|
|
});
|
|
|
|
// Änderungen speichern
|
|
saveChangesBtn.addEventListener('click', function() {
|
|
saveMindmapChanges(window.cy);
|
|
});
|
|
|
|
// Bearbeitungsmodus abbrechen
|
|
cancelEditBtn.addEventListener('click', function() {
|
|
if (confirm('Möchten Sie den Bearbeitungsmodus wirklich verlassen? Nicht gespeicherte Änderungen gehen verloren.')) {
|
|
isEditMode = false;
|
|
crudPanel.style.display = 'none';
|
|
editModeIndicator.classList.remove('active');
|
|
toggleEditModeBtn.style.display = 'inline-flex';
|
|
saveChangesBtn.style.display = 'none';
|
|
cancelEditBtn.style.display = 'none';
|
|
window.cy.container().classList.remove('editing-mode');
|
|
|
|
// Neuinitialisierung der Mindmap
|
|
initializeMindmap().then(() => {
|
|
loader.style.display = 'none';
|
|
statusMessage.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
|
|
// CRUD-Funktionen
|
|
createNodeBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
addNewNode(window.cy);
|
|
}
|
|
});
|
|
|
|
createEdgeBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
enableEdgeCreationMode(window.cy);
|
|
}
|
|
});
|
|
|
|
editNodeBtn.addEventListener('click', function() {
|
|
if (isEditMode && selectedElement && selectedElement.isNode()) {
|
|
editNodeProperties(selectedElement);
|
|
}
|
|
});
|
|
|
|
deleteElementBtn.addEventListener('click', function() {
|
|
if (isEditMode && selectedElement) {
|
|
if (selectedElement.isNode()) {
|
|
deleteNode(selectedElement);
|
|
} else if (selectedElement.isEdge()) {
|
|
if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
|
|
selectedElement.remove();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
saveMindmapBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
saveMindmapChanges(window.cy);
|
|
}
|
|
});
|
|
|
|
// Zoom-Funktionen
|
|
document.getElementById('zoomIn').addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
|
|
});
|
|
|
|
document.getElementById('zoomOut').addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
|
|
});
|
|
|
|
document.getElementById('resetView').addEventListener('click', function() {
|
|
if (window.cy) window.cy.fit();
|
|
});
|
|
|
|
document.getElementById('toggleLegend').addEventListener('click', function() {
|
|
const legend = document.getElementById('categoryLegend');
|
|
legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
|
|
});
|
|
|
|
// 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 %} |