chore: Änderungen commited
This commit is contained in:
@@ -425,3 +425,6 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
|
||||
2025-05-14 12:13:05,415 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
2025-05-14 12:13:07,885 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
2025-05-14 12:13:20,274 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
2025-05-14 12:13:22,949 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
|
||||
|
||||
@@ -968,422 +968,237 @@ function handleEditingAction(action, nodeId) {
|
||||
}
|
||||
|
||||
// Funktion zum Hinzufügen eines neuen Knotens
|
||||
function addNewNode(cy) {
|
||||
// Zentriere den neuen Knoten im sichtbaren Bereich
|
||||
const extent = cy.extent();
|
||||
const centerX = (extent.x1 + extent.x2) / 2;
|
||||
const centerY = (extent.y1 + extent.y2) / 2;
|
||||
|
||||
// Generiere eine eindeutige ID
|
||||
const newId = 'new-node-' + Date.now();
|
||||
|
||||
// Füge den neuen Knoten hinzu
|
||||
cy.add({
|
||||
group: 'nodes',
|
||||
data: {
|
||||
id: newId,
|
||||
label: 'Neuer Knoten',
|
||||
category: 'Wissenschaft',
|
||||
description: 'Beschreibung hinzufügen',
|
||||
hasChildren: false,
|
||||
expanded: false,
|
||||
color: mindmapConfig.categories['Wissenschaft'].color,
|
||||
fontColor: '#ffffff',
|
||||
fontSize: 16,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8
|
||||
},
|
||||
position: { x: centerX, y: centerY }
|
||||
});
|
||||
|
||||
// Wähle den neuen Knoten aus, um ihn zu bearbeiten
|
||||
const newNode = cy.getElementById(newId);
|
||||
newNode.select();
|
||||
|
||||
// Öffne den Bearbeitungsdialog für den neuen Knoten
|
||||
setTimeout(() => {
|
||||
editNodeProperties(newNode);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Funktion zum Bearbeiten von Knoteneigenschaften
|
||||
function editNodeProperties(node) {
|
||||
if (!node) return;
|
||||
|
||||
// Erstelle den Modal-Hintergrund
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop';
|
||||
document.body.appendChild(backdrop);
|
||||
|
||||
// Erstelle den Bearbeitungsdialog
|
||||
function addNewNode(cy, parentNode = null) {
|
||||
// Dialog erstellen
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = 'node-edit-dialog';
|
||||
dialog.className = 'node-dialog';
|
||||
dialog.style.position = 'absolute';
|
||||
dialog.style.top = '50%';
|
||||
dialog.style.left = '50%';
|
||||
dialog.style.transform = 'translate(-50%, -50%)';
|
||||
dialog.style.background = 'rgba(15, 23, 42, 0.95)';
|
||||
dialog.style.padding = '1.5rem';
|
||||
dialog.style.borderRadius = '0.75rem';
|
||||
dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
dialog.style.zIndex = '2000';
|
||||
dialog.style.width = '400px';
|
||||
dialog.style.maxWidth = '90vw';
|
||||
dialog.style.backdropFilter = 'blur(8px)';
|
||||
dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';
|
||||
|
||||
// Hole die aktuellen Daten des Knotens
|
||||
const data = node.data();
|
||||
|
||||
// Generiere die Kategorie-Optionen
|
||||
let categoryOptions = '';
|
||||
for (const category in mindmapConfig.categories) {
|
||||
categoryOptions += `<option value="${category}" ${data.category === category ? 'selected' : ''}>${category}</option>`;
|
||||
}
|
||||
|
||||
// Erstelle das Formular
|
||||
dialog.innerHTML = `
|
||||
<h3>Knoten bearbeiten</h3>
|
||||
<form id="node-edit-form">
|
||||
<div class="form-group">
|
||||
<label for="node-label">Bezeichnung</label>
|
||||
<input type="text" id="node-label" value="${data.label || ''}" placeholder="Knotenbezeichnung">
|
||||
<h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Neuen Knoten erstellen</h3>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
|
||||
<input id="node-name" type="text" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="node-category">Kategorie</label>
|
||||
<select id="node-category">
|
||||
${categoryOptions}
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
|
||||
<textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;"></textarea>
|
||||
</div>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
|
||||
<select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
|
||||
<option value="">Keine Kategorie</option>
|
||||
<option value="Philosophie">Philosophie</option>
|
||||
<option value="Wissenschaft">Wissenschaft</option>
|
||||
<option value="Technologie">Technologie</option>
|
||||
<option value="Künste">Künste</option>
|
||||
<option value="Psychologie">Psychologie</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="node-description">Beschreibung</label>
|
||||
<textarea id="node-description" rows="3" placeholder="Beschreibung hinzufügen">${data.description || ''}</textarea>
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
|
||||
<input id="node-color" type="color" value="#9F7AEA" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="node-has-children">Hat Unterthemen</label>
|
||||
<select id="node-has-children">
|
||||
<option value="true" ${data.hasChildren ? 'selected' : ''}>Ja</option>
|
||||
<option value="false" ${!data.hasChildren ? 'selected' : ''}>Nein</option>
|
||||
</select>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
|
||||
<button id="cancel-node" style="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; cursor: pointer;">Abbrechen</button>
|
||||
<button id="create-node" style="padding: 0.5rem 1rem; background: rgba(16, 185, 129, 0.3); color: white; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 0.5rem; cursor: pointer;">Erstellen</button>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel">Abbrechen</button>
|
||||
<button type="submit" class="save">Speichern</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
// Event-Listener für den Abbrechen-Button
|
||||
dialog.querySelector('button.cancel').addEventListener('click', function() {
|
||||
// Event-Listener
|
||||
document.getElementById('cancel-node').addEventListener('click', () => {
|
||||
document.body.removeChild(dialog);
|
||||
document.body.removeChild(backdrop);
|
||||
});
|
||||
|
||||
// Event-Listener für den Modal-Hintergrund
|
||||
backdrop.addEventListener('click', function() {
|
||||
document.body.removeChild(dialog);
|
||||
document.body.removeChild(backdrop);
|
||||
});
|
||||
|
||||
// Event-Listener für das Formular
|
||||
dialog.querySelector('form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Hole die neuen Werte aus dem Formular
|
||||
const label = document.getElementById('node-label').value;
|
||||
document.getElementById('create-node').addEventListener('click', () => {
|
||||
const name = document.getElementById('node-name').value || 'Neuer Knoten';
|
||||
const description = document.getElementById('node-description').value || '';
|
||||
const category = document.getElementById('node-category').value;
|
||||
const description = document.getElementById('node-description').value;
|
||||
const hasChildren = document.getElementById('node-has-children').value === 'true';
|
||||
const color = document.getElementById('node-color').value;
|
||||
|
||||
// Bestimme die Farbe basierend auf der Kategorie
|
||||
const color = mindmapConfig.categories[category]?.color || data.color || '#60a5fa';
|
||||
// Temporäre ID erstellen (wird später durch die echte ID ersetzt)
|
||||
const tempId = 'new-' + Date.now();
|
||||
|
||||
// Aktualisiere die Daten des Knotens
|
||||
node.data({
|
||||
...data,
|
||||
label,
|
||||
category,
|
||||
description,
|
||||
hasChildren,
|
||||
color
|
||||
});
|
||||
|
||||
// Schließe den Dialog
|
||||
document.body.removeChild(dialog);
|
||||
document.body.removeChild(backdrop);
|
||||
|
||||
// Benachrichtigung anzeigen
|
||||
showUINotification('Knoten wurde aktualisiert', 'success');
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Anzeigen des Kontext-Menüs für einen Knoten
|
||||
function showNodeContextMenu(node, position) {
|
||||
if (!node) return;
|
||||
|
||||
// Entferne existierende Kontext-Menüs
|
||||
const existingMenu = document.querySelector('.context-menu');
|
||||
if (existingMenu) {
|
||||
existingMenu.parentNode.removeChild(existingMenu);
|
||||
}
|
||||
|
||||
// Erstelle das Kontext-Menü
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'context-menu';
|
||||
menu.style.left = `${position.x}px`;
|
||||
menu.style.top = `${position.y}px`;
|
||||
|
||||
// Menü-Einträge
|
||||
menu.innerHTML = `
|
||||
<div class="context-menu-item" data-action="edit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||
</svg>
|
||||
Bearbeiten
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="connect">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
Verbindung erstellen
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="delete">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||
</svg>
|
||||
Löschen
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(menu);
|
||||
|
||||
// Event-Listener für Menü-Einträge
|
||||
menu.querySelectorAll('.context-menu-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const action = this.getAttribute('data-action');
|
||||
|
||||
switch (action) {
|
||||
case 'edit':
|
||||
editNodeProperties(node);
|
||||
break;
|
||||
case 'connect':
|
||||
startEdgeCreation(node);
|
||||
break;
|
||||
case 'delete':
|
||||
deleteNode(node);
|
||||
break;
|
||||
}
|
||||
|
||||
// Entferne das Menü
|
||||
document.body.removeChild(menu);
|
||||
});
|
||||
});
|
||||
|
||||
// Klick außerhalb des Menüs schließt es
|
||||
document.addEventListener('click', function closeMenu(e) {
|
||||
if (!menu.contains(e.target)) {
|
||||
if (document.body.contains(menu)) {
|
||||
document.body.removeChild(menu);
|
||||
}
|
||||
document.removeEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Anzeigen des Menüs zum Hinzufügen eines Knotens
|
||||
function showAddNodeMenu(position) {
|
||||
// Entferne existierende Kontext-Menüs
|
||||
const existingMenu = document.querySelector('.context-menu');
|
||||
if (existingMenu) {
|
||||
existingMenu.parentNode.removeChild(existingMenu);
|
||||
}
|
||||
|
||||
// Erstelle das Kontext-Menü
|
||||
const menu = document.createElement('div');
|
||||
menu.className = 'context-menu';
|
||||
menu.style.left = `${position.x}px`;
|
||||
menu.style.top = `${position.y}px`;
|
||||
|
||||
// Kategorie-Einträge für neue Knoten
|
||||
let categoryItems = '';
|
||||
for (const category in mindmapConfig.categories) {
|
||||
const categoryConfig = mindmapConfig.categories[category];
|
||||
categoryItems += `
|
||||
<div class="context-menu-item" data-category="${category}" style="color: ${categoryConfig.color}">
|
||||
<i class="${categoryConfig.icon}"></i>
|
||||
${category}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Menü-Einträge
|
||||
menu.innerHTML = `
|
||||
<div class="context-menu-header" style="padding: 8px 16px; font-size: 0.9rem; opacity: 0.7;">Neuen Knoten hinzufügen</div>
|
||||
${categoryItems}
|
||||
`;
|
||||
|
||||
document.body.appendChild(menu);
|
||||
|
||||
// Event-Listener für Kategorie-Einträge
|
||||
menu.querySelectorAll('.context-menu-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const category = this.getAttribute('data-category');
|
||||
|
||||
// Füge einen neuen Knoten an der Position hinzu
|
||||
addNewNodeAtPosition(cy, position, category);
|
||||
|
||||
// Entferne das Menü
|
||||
document.body.removeChild(menu);
|
||||
});
|
||||
});
|
||||
|
||||
// Klick außerhalb des Menüs schließt es
|
||||
document.addEventListener('click', function closeMenu(e) {
|
||||
if (!menu.contains(e.target)) {
|
||||
if (document.body.contains(menu)) {
|
||||
document.body.removeChild(menu);
|
||||
}
|
||||
document.removeEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Hinzufügen eines neuen Knotens an einer bestimmten Position
|
||||
function addNewNodeAtPosition(cy, position, category) {
|
||||
if (!cy) return;
|
||||
|
||||
// Berechne die Modellposition (statt der gerenderten Position)
|
||||
const modelPosition = cy.renderer().projectIntoViewport(position.x, position.y);
|
||||
|
||||
// Generiere eine eindeutige ID
|
||||
const newId = 'new-node-' + Date.now();
|
||||
|
||||
// Hole die Kategorie-Konfiguration
|
||||
const categoryConfig = mindmapConfig.categories[category] || mindmapConfig.categories['Wissenschaft'];
|
||||
|
||||
// Füge den neuen Knoten hinzu
|
||||
cy.add({
|
||||
// Knoten zur Visualisierung hinzufügen
|
||||
const newNode = cy.add({
|
||||
group: 'nodes',
|
||||
data: {
|
||||
id: newId,
|
||||
label: 'Neuer ' + category + '-Knoten',
|
||||
id: tempId,
|
||||
label: name,
|
||||
description: description,
|
||||
category: category,
|
||||
description: categoryConfig.description || 'Beschreibung hinzufügen',
|
||||
hasChildren: false,
|
||||
expanded: false,
|
||||
color: categoryConfig.color,
|
||||
fontColor: '#ffffff',
|
||||
fontSize: 16,
|
||||
neuronSize: 8,
|
||||
neuronActivity: 0.8
|
||||
color: color,
|
||||
icon: 'fa-solid fa-circle'
|
||||
},
|
||||
position: {
|
||||
x: modelPosition[0],
|
||||
y: modelPosition[1]
|
||||
x: cy.width() / 2 + (Math.random() * 100 - 50),
|
||||
y: cy.height() / 2 + (Math.random() * 100 - 50)
|
||||
}
|
||||
});
|
||||
|
||||
// Wähle den neuen Knoten aus, um ihn zu bearbeiten
|
||||
const newNode = cy.getElementById(newId);
|
||||
newNode.select();
|
||||
|
||||
// Öffne den Bearbeitungsdialog für den neuen Knoten
|
||||
setTimeout(() => {
|
||||
editNodeProperties(newNode);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// Funktion zum Starten der Erstellung einer Kante
|
||||
function startEdgeCreation(sourceNode) {
|
||||
if (!sourceNode) return;
|
||||
|
||||
const cy = sourceNode.cy();
|
||||
if (!cy) return;
|
||||
|
||||
// Markiere den Quellknoten
|
||||
sourceNode.addClass('edge-source');
|
||||
|
||||
// Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
|
||||
cy.container().classList.add('edge-creation-mode');
|
||||
|
||||
// Zeige Hinweis an
|
||||
showUINotification('Wähle einen Zielknoten für die Verbindung', 'info');
|
||||
|
||||
// Einmaliger Event-Listener für das Auswählen des Zielknotens
|
||||
cy.once('tap', 'node', function(evt) {
|
||||
const targetNode = evt.target;
|
||||
|
||||
// Ignoriere, wenn es der gleiche Knoten ist
|
||||
if (targetNode.id() === sourceNode.id()) {
|
||||
showUINotification('Quell- und Zielknoten dürfen nicht identisch sein', 'warning');
|
||||
finishEdgeCreation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Prüfe, ob bereits eine Kante existiert
|
||||
const existingEdge = cy.edges(`[source="${sourceNode.id()}"][target="${targetNode.id()}"]`);
|
||||
if (existingEdge.length > 0) {
|
||||
showUINotification('Verbindung existiert bereits', 'warning');
|
||||
finishEdgeCreation();
|
||||
return;
|
||||
}
|
||||
|
||||
// Füge die neue Kante hinzu
|
||||
// Wenn ein Elternknoten angegeben ist, eine Verbindung erstellen
|
||||
if (parentNode) {
|
||||
cy.add({
|
||||
group: 'edges',
|
||||
data: {
|
||||
source: sourceNode.id(),
|
||||
target: targetNode.id(),
|
||||
strength: 0.5,
|
||||
conductionVelocity: Math.random() * 0.5 + 0.3,
|
||||
latency: Math.random() * 100 + 50
|
||||
source: parentNode.id(),
|
||||
target: tempId,
|
||||
strength: 0.5
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
showUINotification('Verbindung wurde erstellt', 'success');
|
||||
finishEdgeCreation();
|
||||
// Layout neu berechnen
|
||||
cy.layout(mindmapStyles.layout.base).run();
|
||||
|
||||
document.body.removeChild(dialog);
|
||||
showUINotification('Neuer Knoten erstellt!', 'success');
|
||||
});
|
||||
|
||||
// Event-Listener für Abbruch durch Klick auf leeren Bereich
|
||||
cy.once('tap', function(evt) {
|
||||
if (evt.target === cy) {
|
||||
showUINotification('Kantenerstellung abgebrochen', 'info');
|
||||
finishEdgeCreation();
|
||||
// Kategorie-Auswahl mit Farben verknüpfen
|
||||
document.getElementById('node-category').addEventListener('change', (e) => {
|
||||
const category = e.target.value;
|
||||
let color = '#9F7AEA'; // Standardfarbe
|
||||
|
||||
switch(category) {
|
||||
case 'Philosophie':
|
||||
color = '#9F7AEA'; // Lila
|
||||
break;
|
||||
case 'Wissenschaft':
|
||||
color = '#60A5FA'; // Blau
|
||||
break;
|
||||
case 'Technologie':
|
||||
color = '#10B981'; // Grün
|
||||
break;
|
||||
case 'Künste':
|
||||
color = '#F59E0B'; // Orange
|
||||
break;
|
||||
case 'Psychologie':
|
||||
color = '#EF4444'; // Rot
|
||||
break;
|
||||
}
|
||||
|
||||
document.getElementById('node-color').value = color;
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Bearbeiten eines Knotens
|
||||
function editNodeProperties(node) {
|
||||
if (!node) return;
|
||||
|
||||
const data = node.data();
|
||||
|
||||
// Dialog erstellen
|
||||
const dialog = document.createElement('div');
|
||||
dialog.className = 'node-dialog';
|
||||
dialog.style.position = 'absolute';
|
||||
dialog.style.top = '50%';
|
||||
dialog.style.left = '50%';
|
||||
dialog.style.transform = 'translate(-50%, -50%)';
|
||||
dialog.style.background = 'rgba(15, 23, 42, 0.95)';
|
||||
dialog.style.padding = '1.5rem';
|
||||
dialog.style.borderRadius = '0.75rem';
|
||||
dialog.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
|
||||
dialog.style.zIndex = '2000';
|
||||
dialog.style.width = '400px';
|
||||
dialog.style.maxWidth = '90vw';
|
||||
dialog.style.backdropFilter = 'blur(8px)';
|
||||
dialog.style.border = '1px solid rgba(255, 255, 255, 0.1)';
|
||||
|
||||
dialog.innerHTML = `
|
||||
<h3 style="color: white; margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.75rem;">Knoten bearbeiten</h3>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Name:</label>
|
||||
<input id="node-name" type="text" value="${data.label || ''}" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
|
||||
</div>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Beschreibung:</label>
|
||||
<textarea id="node-description" style="width: 100%; height: 100px; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">${data.description || ''}</textarea>
|
||||
</div>
|
||||
<div style="margin-bottom: 1rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Kategorie:</label>
|
||||
<select id="node-category" style="width: 100%; padding: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 0.5rem;">
|
||||
<option value="">Keine Kategorie</option>
|
||||
<option value="Philosophie" ${data.category === 'Philosophie' ? 'selected' : ''}>Philosophie</option>
|
||||
<option value="Wissenschaft" ${data.category === 'Wissenschaft' ? 'selected' : ''}>Wissenschaft</option>
|
||||
<option value="Technologie" ${data.category === 'Technologie' ? 'selected' : ''}>Technologie</option>
|
||||
<option value="Künste" ${data.category === 'Künste' ? 'selected' : ''}>Künste</option>
|
||||
<option value="Psychologie" ${data.category === 'Psychologie' ? 'selected' : ''}>Psychologie</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<label style="display: block; color: white; margin-bottom: 0.5rem;">Farbe:</label>
|
||||
<input id="node-color" type="color" value="${data.color || data.color_code || '#9F7AEA'}" style="width: 100%; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem;">
|
||||
</div>
|
||||
<div style="display: flex; justify-content: flex-end; gap: 0.5rem;">
|
||||
<button id="cancel-edit" style="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; cursor: pointer;">Abbrechen</button>
|
||||
<button id="save-edit" style="padding: 0.5rem 1rem; background: rgba(59, 130, 246, 0.3); color: white; border: 1px solid rgba(59, 130, 246, 0.5); border-radius: 0.5rem; cursor: pointer;">Speichern</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(dialog);
|
||||
|
||||
// Event-Listener
|
||||
document.getElementById('cancel-edit').addEventListener('click', () => {
|
||||
document.body.removeChild(dialog);
|
||||
});
|
||||
|
||||
function finishEdgeCreation() {
|
||||
sourceNode.removeClass('edge-source');
|
||||
cy.container().classList.remove('edge-creation-mode');
|
||||
}
|
||||
}
|
||||
document.getElementById('save-edit').addEventListener('click', () => {
|
||||
const name = document.getElementById('node-name').value || 'Unbenannter Knoten';
|
||||
const description = document.getElementById('node-description').value || '';
|
||||
const category = document.getElementById('node-category').value;
|
||||
const color = document.getElementById('node-color').value;
|
||||
|
||||
// Funktion zum Aktivieren des Kantenerstellungsmodus
|
||||
function enableEdgeCreationMode(cy) {
|
||||
if (!cy) return;
|
||||
|
||||
// Füge dem Container die Klasse für den Kanten-Erstellungsmodus hinzu
|
||||
cy.container().classList.add('edge-creation-mode');
|
||||
|
||||
// Zeige Hinweis an
|
||||
showUINotification('Wähle einen Quellknoten für die Verbindung', 'info');
|
||||
|
||||
// Einmaliger Event-Listener für das Auswählen des Quellknotens
|
||||
cy.once('tap', 'node', function(evt) {
|
||||
const sourceNode = evt.target;
|
||||
startEdgeCreation(sourceNode);
|
||||
// Knoten aktualisieren
|
||||
node.data({
|
||||
label: name,
|
||||
description: description,
|
||||
category: category,
|
||||
color: color
|
||||
});
|
||||
|
||||
// Event-Listener für Abbruch durch Rechtsklick oder Escape-Taste
|
||||
const cancelEdgeCreation = function() {
|
||||
cy.container().classList.remove('edge-creation-mode');
|
||||
cy.removeListener('tap');
|
||||
showUINotification('Kantenerstellung abgebrochen', 'info');
|
||||
};
|
||||
document.body.removeChild(dialog);
|
||||
showUINotification('Knoten wurde aktualisiert!', 'success');
|
||||
});
|
||||
|
||||
cy.once('cxttap', cancelEdgeCreation);
|
||||
document.addEventListener('keydown', function escKeyHandler(e) {
|
||||
if (e.key === 'Escape') {
|
||||
cancelEdgeCreation();
|
||||
document.removeEventListener('keydown', escKeyHandler);
|
||||
// Kategorie-Auswahl mit Farben verknüpfen
|
||||
document.getElementById('node-category').addEventListener('change', (e) => {
|
||||
const category = e.target.value;
|
||||
let color = '#9F7AEA'; // Standardfarbe
|
||||
|
||||
switch(category) {
|
||||
case 'Philosophie':
|
||||
color = '#9F7AEA'; // Lila
|
||||
break;
|
||||
case 'Wissenschaft':
|
||||
color = '#60A5FA'; // Blau
|
||||
break;
|
||||
case 'Technologie':
|
||||
color = '#10B981'; // Grün
|
||||
break;
|
||||
case 'Künste':
|
||||
color = '#F59E0B'; // Orange
|
||||
break;
|
||||
case 'Psychologie':
|
||||
color = '#EF4444'; // Rot
|
||||
break;
|
||||
}
|
||||
|
||||
document.getElementById('node-color').value = color;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1391,128 +1206,273 @@ function enableEdgeCreationMode(cy) {
|
||||
function deleteNode(node) {
|
||||
if (!node) return;
|
||||
|
||||
// Frage den Benutzer, ob er den Knoten wirklich löschen möchte
|
||||
if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
|
||||
// Entferne den Knoten und alle zugehörigen Kanten
|
||||
if (confirm(`Möchten Sie den Knoten "${node.data('label')}" wirklich löschen?`)) {
|
||||
// Alle verbundenen Kanten löschen
|
||||
node.connectedEdges().remove();
|
||||
// Knoten löschen
|
||||
node.remove();
|
||||
showUINotification('Knoten wurde gelöscht', 'success');
|
||||
showUINotification('Knoten wurde gelöscht!', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
// Funktion zum Löschen ausgewählter Elemente
|
||||
function deleteSelectedElements(cy) {
|
||||
if (!cy) return;
|
||||
// Kontextmenü für Knoten anzeigen
|
||||
function showNodeContextMenu(node, position) {
|
||||
// Entferne vorhandene Kontextmenüs
|
||||
removeContextMenus();
|
||||
|
||||
const selectedElements = cy.elements(':selected');
|
||||
if (selectedElements.length === 0) {
|
||||
showUINotification('Keine Elemente ausgewählt', 'warning');
|
||||
return;
|
||||
const contextMenu = document.createElement('div');
|
||||
contextMenu.className = 'context-menu';
|
||||
contextMenu.style.left = `${position.x}px`;
|
||||
contextMenu.style.top = `${position.y}px`;
|
||||
|
||||
contextMenu.innerHTML = `
|
||||
<div class="context-menu-item" data-action="edit">
|
||||
<i class="fas fa-edit"></i> Bearbeiten
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="add-child">
|
||||
<i class="fas fa-plus"></i> Unterknoten hinzufügen
|
||||
</div>
|
||||
<div class="context-menu-item" data-action="delete">
|
||||
<i class="fas fa-trash-alt"></i> Löschen
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(contextMenu);
|
||||
|
||||
// Event-Listener für Menüpunkte
|
||||
contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const action = this.getAttribute('data-action');
|
||||
|
||||
switch (action) {
|
||||
case 'edit':
|
||||
editNodeProperties(node);
|
||||
break;
|
||||
case 'add-child':
|
||||
addNewNode(window.cy, node);
|
||||
break;
|
||||
case 'delete':
|
||||
deleteNode(node);
|
||||
break;
|
||||
}
|
||||
|
||||
// Zähle die ausgewählten Knoten und Kanten
|
||||
const selectedNodes = selectedElements.filter('node');
|
||||
const selectedEdges = selectedElements.filter('edge');
|
||||
|
||||
let confirmMessage = 'Möchtest du die ausgewählten Elemente wirklich löschen?';
|
||||
if (selectedNodes.length > 0 && selectedEdges.length > 0) {
|
||||
confirmMessage = `Möchtest du ${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wirklich löschen?`;
|
||||
} else if (selectedNodes.length > 0) {
|
||||
confirmMessage = `Möchtest du ${selectedNodes.length} Knoten wirklich löschen?`;
|
||||
} else if (selectedEdges.length > 0) {
|
||||
confirmMessage = `Möchtest du ${selectedEdges.length} Verbindungen wirklich löschen?`;
|
||||
}
|
||||
|
||||
// Frage den Benutzer, ob er die ausgewählten Elemente wirklich löschen möchte
|
||||
if (confirm(confirmMessage)) {
|
||||
// Entferne die ausgewählten Elemente
|
||||
selectedElements.remove();
|
||||
|
||||
let successMessage = 'Elemente wurden gelöscht';
|
||||
if (selectedNodes.length > 0 && selectedEdges.length > 0) {
|
||||
successMessage = `${selectedNodes.length} Knoten und ${selectedEdges.length} Verbindungen wurden gelöscht`;
|
||||
} else if (selectedNodes.length > 0) {
|
||||
successMessage = `${selectedNodes.length} Knoten wurden gelöscht`;
|
||||
} else if (selectedEdges.length > 0) {
|
||||
successMessage = `${selectedEdges.length} Verbindungen wurden gelöscht`;
|
||||
}
|
||||
|
||||
showUINotification(successMessage, 'success');
|
||||
}
|
||||
}
|
||||
|
||||
// Funktion zum Speichern der Änderungen an der Mindmap
|
||||
function saveMindmapChanges(cy, nodeId) {
|
||||
if (!cy) return;
|
||||
|
||||
// Sammle die Daten aller Knoten und Kanten
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
|
||||
cy.nodes().forEach(node => {
|
||||
const data = node.data();
|
||||
const position = node.position();
|
||||
|
||||
nodes.push({
|
||||
id: data.id,
|
||||
name: data.label,
|
||||
category: data.category,
|
||||
description: data.description,
|
||||
has_children: data.hasChildren,
|
||||
color_code: data.color,
|
||||
position_x: position.x,
|
||||
position_y: position.y
|
||||
removeContextMenus();
|
||||
});
|
||||
});
|
||||
|
||||
cy.edges().forEach(edge => {
|
||||
const data = edge.data();
|
||||
|
||||
edges.push({
|
||||
source: data.source,
|
||||
target: data.target,
|
||||
strength: data.strength
|
||||
});
|
||||
// Event-Listener zum Schließen des Menüs
|
||||
document.addEventListener('click', function closeMenu(e) {
|
||||
if (!contextMenu.contains(e.target)) {
|
||||
removeContextMenus();
|
||||
document.removeEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Erstelle die Daten für den API-Aufruf
|
||||
const saveData = {
|
||||
nodes: nodes,
|
||||
edges: edges,
|
||||
parent_id: nodeId || null
|
||||
// Funktion zum Hinzufügen eines Knotens an einer bestimmten Position (Rechtsklick)
|
||||
function showAddNodeMenu(position) {
|
||||
// Entferne vorhandene Kontextmenüs
|
||||
removeContextMenus();
|
||||
|
||||
const contextMenu = document.createElement('div');
|
||||
contextMenu.className = 'context-menu';
|
||||
contextMenu.style.left = `${position.x}px`;
|
||||
contextMenu.style.top = `${position.y}px`;
|
||||
|
||||
contextMenu.innerHTML = `
|
||||
<div class="context-menu-item" data-action="add-node">
|
||||
<i class="fas fa-plus-circle"></i> Knoten hinzufügen
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(contextMenu);
|
||||
|
||||
// Event-Listener für Menüpunkte
|
||||
contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const action = this.getAttribute('data-action');
|
||||
|
||||
if (action === 'add-node') {
|
||||
// Position im Canvas ermitteln
|
||||
const containerPos = window.cy.container().getBoundingClientRect();
|
||||
const cyPos = {
|
||||
x: position.x - containerPos.left,
|
||||
y: position.y - containerPos.top
|
||||
};
|
||||
|
||||
console.log('Speichere Mindmap-Änderungen:', saveData);
|
||||
// Temporäre ID erstellen
|
||||
const tempId = 'new-' + Date.now();
|
||||
|
||||
// Zeige eine Speicherbenachrichtigung an
|
||||
showUINotification('Speichere Mindmap-Änderungen...', 'info');
|
||||
// Knoten hinzufügen (vereinfachte Version, zeigt direkt den Dialog an)
|
||||
addNewNode(window.cy);
|
||||
}
|
||||
|
||||
// Sende die Daten an den Server
|
||||
fetch('/api/mindmap/save', {
|
||||
removeContextMenus();
|
||||
});
|
||||
});
|
||||
|
||||
// Event-Listener zum Schließen des Menüs
|
||||
document.addEventListener('click', function closeMenu(e) {
|
||||
if (!contextMenu.contains(e.target)) {
|
||||
removeContextMenus();
|
||||
document.removeEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hilfsfunktion zum Entfernen aller Kontextmenüs
|
||||
function removeContextMenus() {
|
||||
document.querySelectorAll('.context-menu').forEach(menu => {
|
||||
menu.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Aktivieren des Kanten-Erstellungsmodus
|
||||
function enableEdgeCreationMode(cy) {
|
||||
// Status anzeigen
|
||||
showUINotification('Bitte wählen Sie den Startknoten für die Verbindung', 'info');
|
||||
|
||||
// Cursor-Stil ändern
|
||||
document.body.style.cursor = 'crosshair';
|
||||
cy.container().classList.add('edge-creation-mode');
|
||||
|
||||
// Event-Handler für die Knotenauswahl
|
||||
const nodeSelectHandler = function(event) {
|
||||
// Ersten Knoten auswählen
|
||||
const sourceNode = event.target;
|
||||
|
||||
// Status aktualisieren
|
||||
showUINotification('Wählen Sie jetzt den Zielknoten für die Verbindung', 'info');
|
||||
|
||||
// Zweiten Knoten abwarten
|
||||
const secondNodeHandler = function(event) {
|
||||
const targetNode = event.target;
|
||||
|
||||
// Prüfen, ob der Zielknoten ein Knoten ist und nicht derselbe wie der Startknoten
|
||||
if (targetNode.isNode() && targetNode.id() !== sourceNode.id()) {
|
||||
// Kante erstellen
|
||||
cy.add({
|
||||
group: 'edges',
|
||||
data: {
|
||||
source: sourceNode.id(),
|
||||
target: targetNode.id(),
|
||||
strength: 0.5
|
||||
}
|
||||
});
|
||||
|
||||
// Erfolgsmeldung
|
||||
showUINotification('Verbindung erstellt!', 'success');
|
||||
|
||||
// Event-Handler entfernen
|
||||
cy.off('tap', 'node', secondNodeHandler);
|
||||
|
||||
// Modus beenden
|
||||
finishEdgeCreation();
|
||||
}
|
||||
};
|
||||
|
||||
// Event-Handler für den zweiten Knoten
|
||||
cy.on('tap', 'node', secondNodeHandler);
|
||||
|
||||
// Original-Handler entfernen
|
||||
cy.off('tap', 'node', nodeSelectHandler);
|
||||
|
||||
// ESC-Taste zum Abbrechen
|
||||
document.addEventListener('keydown', function escKeyHandler(e) {
|
||||
if (e.key === 'Escape') {
|
||||
cy.off('tap', 'node', secondNodeHandler);
|
||||
finishEdgeCreation();
|
||||
document.removeEventListener('keydown', escKeyHandler);
|
||||
showUINotification('Verbindungserstellung abgebrochen', 'info');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Event-Handler für den ersten Knoten
|
||||
cy.on('tap', 'node', nodeSelectHandler);
|
||||
|
||||
// Funktion zum Beenden des Kantenerstellungsmodus
|
||||
function finishEdgeCreation() {
|
||||
document.body.style.cursor = '';
|
||||
cy.container().classList.remove('edge-creation-mode');
|
||||
}
|
||||
|
||||
// Abbrechen durch Klick außerhalb
|
||||
cy.on('tap', function(event) {
|
||||
if (event.target === cy) {
|
||||
cy.off('tap', 'node', nodeSelectHandler);
|
||||
finishEdgeCreation();
|
||||
showUINotification('Verbindungserstellung abgebrochen', 'info');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Funktion zum Speichern von Mindmap-Änderungen
|
||||
async function saveMindmapChanges(cy) {
|
||||
try {
|
||||
showUINotification('Speichere Änderungen...', 'info');
|
||||
|
||||
// Alle Knoten und Kanten sammeln
|
||||
const nodes = cy.nodes().map(node => {
|
||||
const data = node.data();
|
||||
return {
|
||||
id: data.id,
|
||||
name: data.label,
|
||||
description: data.description || '',
|
||||
color_code: data.color || data.color_code,
|
||||
category: data.category || null,
|
||||
icon: data.icon || 'fa-solid fa-circle',
|
||||
position_x: node.position().x,
|
||||
position_y: node.position().y
|
||||
};
|
||||
});
|
||||
|
||||
const edges = cy.edges().map(edge => {
|
||||
return {
|
||||
source: edge.source().id(),
|
||||
target: edge.target().id(),
|
||||
strength: edge.data('strength') || 0.5
|
||||
};
|
||||
});
|
||||
|
||||
// Daten an API senden
|
||||
const response = await fetch('/api/mindmap/save', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(saveData)
|
||||
body: JSON.stringify({
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(data => {
|
||||
throw new Error(data.error || `Fehler ${response.status}: ${response.statusText}`);
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok || !result.success) {
|
||||
const errorMessage = result.error || 'Mindmap konnte nicht gespeichert werden';
|
||||
showUINotification(errorMessage, 'error');
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Speichern erfolgreich:', data);
|
||||
showUINotification('Mindmap wurde erfolgreich gespeichert', 'success');
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
// Wenn temporäre IDs aktualisiert wurden, Mapping anwenden
|
||||
if (result.node_mapping) {
|
||||
// Die echten IDs hinzufügen
|
||||
for (const [tempId, realId] of Object.entries(result.node_mapping)) {
|
||||
const node = cy.getElementById(tempId);
|
||||
if (node.length > 0) {
|
||||
node.data('id', realId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showUINotification('Mindmap wurde erfolgreich gespeichert!', 'success');
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Speichern der Mindmap:', error);
|
||||
showUINotification({
|
||||
error: 'Fehler beim Speichern der Mindmap',
|
||||
details: error.message
|
||||
}, 'error');
|
||||
});
|
||||
showUINotification('Fehler beim Speichern: ' + error.message, 'error');
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Füge CSS-Stile für den Bearbeitungsmodus hinzu
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
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 {
|
||||
@@ -43,6 +46,47 @@
|
||||
-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;
|
||||
@@ -79,6 +123,85 @@
|
||||
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;
|
||||
@@ -194,6 +317,53 @@
|
||||
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 %}
|
||||
|
||||
@@ -202,6 +372,22 @@
|
||||
<!-- 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 -->
|
||||
@@ -210,6 +396,12 @@
|
||||
<!-- 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>
|
||||
|
||||
@@ -233,6 +425,30 @@
|
||||
</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>
|
||||
@@ -281,6 +497,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
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);
|
||||
@@ -299,6 +532,56 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// 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);
|
||||
@@ -318,6 +601,96 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
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);
|
||||
@@ -335,6 +708,36 @@ document.addEventListener('DOMContentLoaded', 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 %}
|
||||
Reference in New Issue
Block a user