"Update mindmap Mindmap functionality

This commit is contained in:
2025-05-14 13:47:35 +02:00
parent 3a2f721f63
commit b68f65cc76
3 changed files with 98 additions and 150 deletions

View File

@@ -446,3 +446,6 @@ werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on
2025-05-14 13:37:17,229 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77] 2025-05-14 13:37:17,229 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77] 2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77] 2025-05-14 13:37:19,484 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
2025-05-14 13:42:53,215 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
2025-05-14 13:42:55,657 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]
2025-05-14 13:42:55,657 INFO: Anwendung gestartet [in C:\Users\TTOMCZA.EMEA\Dev\website\app.py:77]

View File

@@ -200,16 +200,14 @@ async function initializeMindmap() {
description: node.description, description: node.description,
hasChildren: node.has_children, hasChildren: node.has_children,
expanded: false, expanded: false,
color: node.color_code || getCategoryColor(node.category), color: node.color_code,
fontColor: '#ffffff', fontColor: '#ffffff',
fontSize: node.is_center ? 20 : 16, fontSize: node.is_center ? 20 : 16
isCenter: node.is_center || false
} }
})), })),
// Kanten // Kanten
...data.edges.map(edge => ({ ...data.edges.map(edge => ({
data: { data: {
id: `edge-${edge.source}-${edge.target}`,
source: edge.source, source: edge.source,
target: edge.target, target: edge.target,
strength: edge.strength || 0.5 strength: edge.strength || 0.5
@@ -236,7 +234,7 @@ async function initializeMindmap() {
style: mindmapStyles.node.base style: mindmapStyles.node.base
}, },
{ {
selector: 'node[?isCenter]', selector: 'node[isCenter]',
style: mindmapStyles.node.center style: mindmapStyles.node.center
}, },
{ {
@@ -251,32 +249,66 @@ async function initializeMindmap() {
layout: mindmapStyles.layout.base layout: mindmapStyles.layout.base
}); });
// Nach der Initialisierung die Knoten sperren // Füge neuronale Eigenschaften zu allen Knoten hinzu
window.cy.nodes().lock(); cy.nodes().forEach(node => {
const data = node.data();
// Verwende mindmapConfig für Kategorie-Farben oder einen Standardwert
const categoryColor = data.category && mindmapConfig.categories[data.category]
? mindmapConfig.categories[data.category].color
: '#60a5fa';
node.data({
...data,
neuronSize: data.neuronSize || 8,
neuronActivity: data.neuronActivity || 0.8,
refractionPeriod: Math.random() * 300 + 700,
threshold: Math.random() * 0.3 + 0.6,
lastFired: 0,
color: data.color || categoryColor
});
});
// Verbessertes Neuronales Design anwenden // Füge synaptische Eigenschaften zu allen Kanten hinzu
applyNeuralNetworkStyle(window.cy); cy.edges().forEach(edge => {
enhanceMindmap(); const data = edge.data();
edge.data({
...data,
strength: data.strength || 0.5,
conductionVelocity: Math.random() * 0.5 + 0.3,
latency: Math.random() * 100 + 50
});
});
// Event-Listener für Knoten-Klicks
cy.on('tap', 'node', async function(evt) {
const node = evt.target;
console.log('Node clicked:', node.id(), 'hasChildren:', node.data('hasChildren'), 'expanded:', node.data('expanded'));
if (node.data('hasChildren') && !node.data('expanded')) {
await loadSubthemes(node);
}
});
// Layout ausführen
cy.layout(mindmapStyles.layout.base).run();
// Kategorienlegende anzeigen // Starte neuronale Aktivitätssimulation
document.getElementById('categoryLegend').style.display = 'flex'; startNeuralActivitySimulation(cy);
return window.cy; // Mindmap mit echten Daten befüllen (Styles, Farben etc.)
updateMindmap();
return true;
} catch (error) { } catch (error) {
console.error('Fehler beim Initialisieren der Mindmap:', error); console.error('Fehler bei der Mindmap-Initialisierung:', error);
showUINotification('Fehler beim Initialisieren der Mindmap: ' + error.message, 'error'); showUINotification({
throw error; error: 'Mindmap konnte nicht initialisiert werden',
details: error.message
}, 'error');
return false;
} }
} }
// Hilfsfunktion zum Abrufen der Kategoriefarbe
function getCategoryColor(category) {
if (!category) return '#666666'; // Standardfarbe
const categoryData = mindmapConfig.categories[category];
return categoryData ? categoryData.color : '#666666';
}
// Warte bis DOM geladen ist // Warte bis DOM geladen ist
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded Event ausgelöst'); console.log('DOMContentLoaded Event ausgelöst');
@@ -1135,7 +1167,7 @@ function showNodeContextMenu(node, position) {
startEdgeCreation(node); startEdgeCreation(node);
break; break;
case 'delete': case 'delete':
deleteElement(node); deleteNode(node);
break; break;
} }
@@ -1355,26 +1387,15 @@ function enableEdgeCreationMode(cy) {
}); });
} }
// Funktion zum Löschen eines Elements (Knoten oder Kante) // Funktion zum Löschen eines Knotens
function deleteElement(element) { function deleteNode(node) {
if (!element) return; if (!node) return;
// Sicherheitsabfrage für Knoten // Frage den Benutzer, ob er den Knoten wirklich löschen möchte
if (element.isNode()) { if (confirm(`Möchtest du den Knoten "${node.data('label')}" wirklich löschen?`)) {
if (confirm('Möchten Sie diesen Knoten wirklich löschen? Alle Verbindungen werden ebenfalls entfernt.')) { // Entferne den Knoten und alle zugehörigen Kanten
// Entferne alle verbundenen Kanten node.remove();
element.connectedEdges().remove(); showUINotification('Knoten wurde gelöscht', 'success');
// Entferne den Knoten
element.remove();
showUINotification('Knoten wurde gelöscht', 'success');
}
}
// Sicherheitsabfrage für Kanten
else if (element.isEdge()) {
if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
element.remove();
showUINotification('Verbindung wurde gelöscht', 'success');
}
} }
} }
@@ -1734,101 +1755,4 @@ editingStyles.textContent = `
opacity: 0.8; opacity: 0.8;
} }
`; `;
document.head.appendChild(editingStyles); document.head.appendChild(editingStyles);
// Funktion zum Vergrößern der Ansicht
function zoomIn(cy) {
if (cy) {
const currentZoom = cy.zoom();
cy.zoom({
level: currentZoom * 1.2, // 20% größer
renderedPosition: {
x: cy.width() / 2,
y: cy.height() / 2
}
});
showUINotification('Ansicht vergrößert', 'info', 1000);
}
}
// Funktion zum Verkleinern der Ansicht
function zoomOut(cy) {
if (cy) {
const currentZoom = cy.zoom();
cy.zoom({
level: currentZoom * 0.8, // 20% kleiner
renderedPosition: {
x: cy.width() / 2,
y: cy.height() / 2
}
});
showUINotification('Ansicht verkleinert', 'info', 1000);
}
}
// Funktion zum Zurücksetzen der Ansicht
function resetView(cy) {
if (cy) {
cy.fit();
cy.center();
showUINotification('Ansicht zurückgesetzt', 'info', 1000);
}
}
// Funktion zum Ein- und Ausblenden der Legende
function toggleLegend() {
const legend = document.getElementById('categoryLegend');
if (legend) {
const isVisible = legend.style.display !== 'none';
legend.style.display = isVisible ? 'none' : 'flex';
showUINotification(isVisible ? 'Legende ausgeblendet' : 'Legende eingeblendet', 'info', 1000);
}
}
// Funktion zum Zurücksetzen aller Änderungen und Neuinitialisierung der Mindmap
async function resetMindmap() {
try {
// Warnmeldung anzeigen
if (!confirm('Möchten Sie die Mindmap wirklich zurücksetzen? Alle nicht gespeicherten Änderungen gehen verloren.')) {
return false;
}
// UI-Elemente aktualisieren
const editModeIndicator = document.getElementById('editModeIndicator');
const toggleEditModeBtn = document.getElementById('toggleEditMode');
const saveChangesBtn = document.getElementById('saveChanges');
const cancelEditBtn = document.getElementById('cancelEdit');
const crudPanel = document.getElementById('crudPanel');
// Bearbeitungsmodus deaktivieren
if (editModeIndicator) editModeIndicator.classList.remove('active');
if (toggleEditModeBtn) toggleEditModeBtn.style.display = 'inline-flex';
if (saveChangesBtn) saveChangesBtn.style.display = 'none';
if (cancelEditBtn) cancelEditBtn.style.display = 'none';
if (crudPanel) crudPanel.style.display = 'none';
// Loader und Statusmeldung anzeigen
const loader = document.getElementById('loader');
const statusMessage = document.getElementById('statusMessage');
if (loader) loader.style.display = 'block';
if (statusMessage) {
statusMessage.textContent = 'Setze Mindmap zurück...';
statusMessage.style.display = 'block';
}
// Mindmap neu initialisieren
await initializeMindmap();
// Loader und Statusmeldung ausblenden
if (loader) loader.style.display = 'none';
if (statusMessage) statusMessage.style.display = 'none';
showUINotification('Mindmap wurde zurückgesetzt', 'success');
return true;
} catch (error) {
console.error('Fehler beim Zurücksetzen der Mindmap:', error);
showUINotification('Fehler beim Zurücksetzen der Mindmap: ' + error.message, 'error');
return false;
}
}

View File

@@ -456,7 +456,7 @@
</div> </div>
<!-- Kategorie-Legende --> <!-- Kategorie-Legende -->
<div id="categoryLegend" class="category-legend" style="display: flex;"> <div id="categoryLegend" class="category-legend">
<div class="category-item"> <div class="category-item">
<div class="category-color" style="background-color: #9F7AEA;"></div> <div class="category-color" style="background-color: #9F7AEA;"></div>
<span>Philosophie</span> <span>Philosophie</span>
@@ -637,7 +637,21 @@ document.addEventListener('DOMContentLoaded', function() {
// Bearbeitungsmodus abbrechen // Bearbeitungsmodus abbrechen
cancelEditBtn.addEventListener('click', function() { cancelEditBtn.addEventListener('click', function() {
resetMindmap(); 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 // CRUD-Funktionen
@@ -661,7 +675,13 @@ document.addEventListener('DOMContentLoaded', function() {
deleteElementBtn.addEventListener('click', function() { deleteElementBtn.addEventListener('click', function() {
if (isEditMode && selectedElement) { if (isEditMode && selectedElement) {
deleteElement(selectedElement); if (selectedElement.isNode()) {
deleteNode(selectedElement);
} else if (selectedElement.isEdge()) {
if (confirm('Möchten Sie diese Verbindung wirklich löschen?')) {
selectedElement.remove();
}
}
} }
}); });
@@ -673,19 +693,20 @@ document.addEventListener('DOMContentLoaded', function() {
// Zoom-Funktionen // Zoom-Funktionen
document.getElementById('zoomIn').addEventListener('click', function() { document.getElementById('zoomIn').addEventListener('click', function() {
if (window.cy) zoomIn(window.cy); if (window.cy) window.cy.zoom(window.cy.zoom() * 1.2);
}); });
document.getElementById('zoomOut').addEventListener('click', function() { document.getElementById('zoomOut').addEventListener('click', function() {
if (window.cy) zoomOut(window.cy); if (window.cy) window.cy.zoom(window.cy.zoom() * 0.8);
}); });
document.getElementById('resetView').addEventListener('click', function() { document.getElementById('resetView').addEventListener('click', function() {
if (window.cy) resetView(window.cy); if (window.cy) window.cy.fit();
}); });
document.getElementById('toggleLegend').addEventListener('click', function() { document.getElementById('toggleLegend').addEventListener('click', function() {
toggleLegend(); const legend = document.getElementById('categoryLegend');
legend.style.display = legend.style.display === 'none' ? 'flex' : 'none';
}); });
// Funktionen für Knoteninfo-Panel // Funktionen für Knoteninfo-Panel