930 lines
25 KiB
HTML
930 lines
25 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Interaktive Mindmap{% endblock %}
|
|
|
|
{% block extra_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;
|
|
}
|
|
|
|
/* Zoom-Toolbar */
|
|
.mindmap-toolbar {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
background: rgba(30, 41, 59, 0.8);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
z-index: 10;
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.mindmap-toolbar button {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.mindmap-toolbar button:hover {
|
|
background: rgba(139, 92, 246, 0.5);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mindmap-toolbar button i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 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">
|
|
<div id="cy"></div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="mindmap-toolbar">
|
|
<div class="toolbar-section">
|
|
<button id="add-node-btn" class="toolbar-btn" title="Knoten hinzufügen">
|
|
<i class="fas fa-plus"></i>
|
|
<span>Knoten</span>
|
|
</button>
|
|
<button id="add-thought-btn" class="toolbar-btn" title="Gedanken hinzufügen">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<span>Gedanke</span>
|
|
</button>
|
|
<button id="collaborate-btn" class="toolbar-btn" title="Kollaboration starten">
|
|
<i class="fas fa-users"></i>
|
|
<span>Kollaboration</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toolbar-section">
|
|
<button id="export-btn" class="toolbar-btn" title="Mindmap exportieren">
|
|
<i class="fas fa-download"></i>
|
|
<span>Export</span>
|
|
</button>
|
|
<button id="share-btn" class="toolbar-btn" title="Mindmap teilen">
|
|
<i class="fas fa-share"></i>
|
|
<span>Teilen</span>
|
|
</button>
|
|
<button id="fullscreen-btn" class="toolbar-btn" title="Vollbild">
|
|
<i class="fas fa-expand"></i>
|
|
<span>Vollbild</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toolbar-section">
|
|
<button id="zoom-in-btn" class="toolbar-btn" title="Vergrößern">
|
|
<i class="fas fa-search-plus"></i>
|
|
</button>
|
|
<button id="zoom-out-btn" class="toolbar-btn" title="Verkleinern">
|
|
<i class="fas fa-search-minus"></i>
|
|
</button>
|
|
<button id="reset-view-btn" class="toolbar-btn" title="Ansicht zurücksetzen">
|
|
<i class="fas fa-home"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mindmap-header">
|
|
<h1 class="mindmap-title">Wissenslandschaft</h1>
|
|
<div class="mindmap-actions">
|
|
<button class="action-button" id="toggleCategories">
|
|
<i class="fas fa-tags"></i> Kategorien
|
|
</button>
|
|
<button class="action-button primary" id="startEdit">
|
|
<i class="fas fa-edit"></i> Bearbeiten
|
|
</button>
|
|
</div>
|
|
</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 %}
|
|
|
|
{% 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', v='1.0.1') }}"></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, nur wenn die Elemente existieren
|
|
if (loader) loader.style.display = 'block';
|
|
if (statusMessage) {
|
|
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
|
|
if (loader) loader.style.display = 'none';
|
|
if (statusMessage) statusMessage.style.display = 'none';
|
|
|
|
// Event-Listener für Knotenauswahl
|
|
window.cy.on('select', 'node', function(event) {
|
|
selectedElement = event.target;
|
|
if (editNodeBtn) editNodeBtn.disabled = false;
|
|
if (deleteElementBtn) deleteElementBtn.disabled = false;
|
|
|
|
// Knotendetails im Info-Panel anzeigen
|
|
showNodeInfo(selectedElement);
|
|
});
|
|
|
|
window.cy.on('select', 'edge', function(event) {
|
|
selectedElement = event.target;
|
|
if (editNodeBtn) editNodeBtn.disabled = true;
|
|
if (deleteElementBtn) deleteElementBtn.disabled = false;
|
|
});
|
|
|
|
window.cy.on('unselect', function() {
|
|
selectedElement = null;
|
|
if (editNodeBtn) editNodeBtn.disabled = true;
|
|
if (deleteElementBtn) 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);
|
|
if (loader) loader.style.display = 'none';
|
|
if (statusMessage) {
|
|
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');
|
|
if (loader) loader.style.display = 'none';
|
|
if (statusMessage) {
|
|
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 (nur wenn alle erforderlichen Elemente existieren)
|
|
if (toggleEditModeBtn && crudPanel && editModeIndicator && saveChangesBtn && cancelEditBtn && window.cy) {
|
|
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
|
|
if (saveChangesBtn && window.cy) {
|
|
saveChangesBtn.addEventListener('click', function() {
|
|
saveMindmapChanges(window.cy);
|
|
});
|
|
}
|
|
|
|
// Bearbeitungsmodus abbrechen
|
|
if (cancelEditBtn && crudPanel && editModeIndicator && toggleEditModeBtn && saveChangesBtn && loader && statusMessage) {
|
|
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(() => {
|
|
if (loader) loader.style.display = 'none';
|
|
if (statusMessage) statusMessage.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// CRUD-Funktionen
|
|
if (createNodeBtn && window.cy) {
|
|
createNodeBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
addNewNode(window.cy);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (createEdgeBtn && window.cy) {
|
|
createEdgeBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
enableEdgeCreationMode(window.cy);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (editNodeBtn) {
|
|
editNodeBtn.addEventListener('click', function() {
|
|
if (isEditMode && selectedElement && selectedElement.isNode()) {
|
|
editNodeProperties(selectedElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (deleteElementBtn) {
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (saveMindmapBtn && window.cy) {
|
|
saveMindmapBtn.addEventListener('click', function() {
|
|
if (isEditMode) {
|
|
saveMindmapChanges(window.cy);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Funktionen für Zoom-Buttons und Reset
|
|
const zoomInBtn = document.getElementById('zoom-in-btn');
|
|
const zoomOutBtn = document.getElementById('zoom-out-btn');
|
|
const resetViewBtn = document.getElementById('reset-view-btn');
|
|
|
|
if (zoomInBtn && window.cy) {
|
|
zoomInBtn.addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
|
|
});
|
|
}
|
|
|
|
if (zoomOutBtn && window.cy) {
|
|
zoomOutBtn.addEventListener('click', function() {
|
|
if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
|
|
});
|
|
}
|
|
|
|
if (resetViewBtn && window.cy) {
|
|
resetViewBtn.addEventListener('click', function() {
|
|
if (window.cy) window.cy.fit();
|
|
});
|
|
}
|
|
|
|
// Neue Toolbar-Funktionen
|
|
const addNodeBtn = document.getElementById('add-node-btn');
|
|
const addThoughtBtn = document.getElementById('add-thought-btn');
|
|
const collaborateBtn = document.getElementById('collaborate-btn');
|
|
const exportBtn = document.getElementById('export-btn');
|
|
const shareBtn = document.getElementById('share-btn');
|
|
const fullscreenBtn = document.getElementById('fullscreen-btn');
|
|
|
|
if (addNodeBtn) {
|
|
addNodeBtn.addEventListener('click', function() {
|
|
// Öffne Modal zum Hinzufügen eines neuen Knotens
|
|
showAddNodeModal();
|
|
});
|
|
}
|
|
|
|
if (addThoughtBtn) {
|
|
addThoughtBtn.addEventListener('click', function() {
|
|
// Öffne Modal zum Hinzufügen eines Gedankens
|
|
showAddThoughtModal();
|
|
});
|
|
}
|
|
|
|
if (collaborateBtn) {
|
|
collaborateBtn.addEventListener('click', function() {
|
|
// Starte Kollaborationsmodus
|
|
startCollaboration();
|
|
});
|
|
}
|
|
|
|
if (exportBtn) {
|
|
exportBtn.addEventListener('click', function() {
|
|
// Exportiere Mindmap
|
|
exportMindmap();
|
|
});
|
|
}
|
|
|
|
if (shareBtn) {
|
|
shareBtn.addEventListener('click', function() {
|
|
// Teile Mindmap
|
|
shareMindmap();
|
|
});
|
|
}
|
|
|
|
if (fullscreenBtn) {
|
|
fullscreenBtn.addEventListener('click', function() {
|
|
// Vollbild-Modus
|
|
toggleFullscreen();
|
|
});
|
|
}
|
|
|
|
// Funktionen implementieren
|
|
function showAddNodeModal() {
|
|
// Erstelle ein einfaches Modal für neuen Knoten
|
|
const nodeName = prompt('Name des neuen Knotens:');
|
|
if (nodeName && nodeName.trim()) {
|
|
addNewNode(nodeName.trim());
|
|
}
|
|
}
|
|
|
|
function showAddThoughtModal() {
|
|
// Erstelle ein Modal für neuen Gedanken
|
|
const thoughtTitle = prompt('Titel des Gedankens:');
|
|
if (thoughtTitle && thoughtTitle.trim()) {
|
|
addNewThought(thoughtTitle.trim());
|
|
}
|
|
}
|
|
|
|
function addNewNode(name) {
|
|
// API-Aufruf zum Hinzufügen eines neuen Knotens
|
|
fetch('/api/mindmap/public/add_node', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
description: '',
|
|
x_position: Math.random() * 400 + 100,
|
|
y_position: Math.random() * 400 + 100
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Lade Mindmap neu
|
|
location.reload();
|
|
} else {
|
|
alert('Fehler beim Hinzufügen des Knotens: ' + (data.error || 'Unbekannter Fehler'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler:', error);
|
|
alert('Ein Fehler ist aufgetreten.');
|
|
});
|
|
}
|
|
|
|
function addNewThought(title) {
|
|
// API-Aufruf zum Hinzufügen eines neuen Gedankens
|
|
fetch('/api/thoughts', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
title: title,
|
|
content: 'Neuer Gedanke erstellt über die Mindmap',
|
|
branch: 'Allgemein'
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Gedanke erfolgreich erstellt!');
|
|
} else {
|
|
alert('Fehler beim Erstellen des Gedankens: ' + (data.error || 'Unbekannter Fehler'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler:', error);
|
|
alert('Ein Fehler ist aufgetreten.');
|
|
});
|
|
}
|
|
|
|
function startCollaboration() {
|
|
// Kollaborationsmodus starten
|
|
alert('Kollaborationsmodus wird bald verfügbar sein!\n\nGeplante Features:\n- Echtzeit-Bearbeitung\n- Live-Cursor anderer Benutzer\n- Chat-Integration\n- Änderungshistorie');
|
|
}
|
|
|
|
function exportMindmap() {
|
|
// Mindmap exportieren
|
|
const format = prompt('Export-Format wählen:\n1. JSON\n2. PNG (geplant)\n3. PDF (geplant)\n\nGeben Sie 1, 2 oder 3 ein:', '1');
|
|
|
|
if (format === '1') {
|
|
// JSON-Export
|
|
if (window.cy) {
|
|
const data = window.cy.json();
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'mindmap-export.json';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} else {
|
|
alert('Dieses Format wird bald verfügbar sein!');
|
|
}
|
|
}
|
|
|
|
function shareMindmap() {
|
|
// Mindmap teilen
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: 'SysTades Mindmap',
|
|
text: 'Schau dir diese interessante Mindmap an!',
|
|
url: window.location.href
|
|
});
|
|
} else {
|
|
// Fallback: URL kopieren
|
|
navigator.clipboard.writeText(window.location.href).then(() => {
|
|
alert('Mindmap-Link wurde in die Zwischenablage kopiert!');
|
|
}).catch(() => {
|
|
prompt('Kopiere diesen Link zum Teilen:', window.location.href);
|
|
});
|
|
}
|
|
}
|
|
|
|
function toggleFullscreen() {
|
|
// Vollbild-Modus umschalten
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(err => {
|
|
console.error('Fehler beim Aktivieren des Vollbildmodus:', err);
|
|
});
|
|
} else {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
|
|
// Vollbild-Event-Listener
|
|
document.addEventListener('fullscreenchange', function() {
|
|
const fullscreenBtn = document.getElementById('fullscreen-btn');
|
|
if (fullscreenBtn) {
|
|
const icon = fullscreenBtn.querySelector('i');
|
|
if (document.fullscreenElement) {
|
|
icon.className = 'fas fa-compress';
|
|
fullscreenBtn.title = 'Vollbild verlassen';
|
|
} else {
|
|
icon.className = 'fas fa-expand';
|
|
fullscreenBtn.title = 'Vollbild';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |