"Update mindmap Mindmap functionality
This commit is contained in:
@@ -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]
|
||||||
|
|||||||
@@ -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';
|
||||||
|
|
||||||
// Verbessertes Neuronales Design anwenden
|
node.data({
|
||||||
applyNeuralNetworkStyle(window.cy);
|
...data,
|
||||||
enhanceMindmap();
|
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
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Kategorienlegende anzeigen
|
// Füge synaptische Eigenschaften zu allen Kanten hinzu
|
||||||
document.getElementById('categoryLegend').style.display = 'flex';
|
cy.edges().forEach(edge => {
|
||||||
|
const data = edge.data();
|
||||||
|
edge.data({
|
||||||
|
...data,
|
||||||
|
strength: data.strength || 0.5,
|
||||||
|
conductionVelocity: Math.random() * 0.5 + 0.3,
|
||||||
|
latency: Math.random() * 100 + 50
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return window.cy;
|
// 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();
|
||||||
|
|
||||||
|
// Starte neuronale Aktivitätssimulation
|
||||||
|
startNeuralActivitySimulation(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,28 +1387,17 @@ 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();
|
|
||||||
// Entferne den Knoten
|
|
||||||
element.remove();
|
|
||||||
showUINotification('Knoten wurde gelöscht', 'success');
|
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');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Funktion zum Löschen ausgewählter Elemente
|
// Funktion zum Löschen ausgewählter Elemente
|
||||||
function deleteSelectedElements(cy) {
|
function deleteSelectedElements(cy) {
|
||||||
@@ -1735,100 +1756,3 @@ editingStyles.textContent = `
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user