From 121f46df01dde5f999e088b26cdb1b0d8a8c293a Mon Sep 17 00:00:00 2001 From: marwin Date: Fri, 9 May 2025 19:58:03 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mindmap):=20erweitere=20die=20?= =?UTF-8?q?Funktionalit=C3=A4t=20zur=20Handhabung=20von=20Unterthemen=20un?= =?UTF-8?q?d=20verbessere=20die=20Benutzerinteraktion=20durch=20neue=20Nav?= =?UTF-8?q?igations-=20und=20Layout-Elemente=20in=20update=5Fmindmap.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/update_mindmap.js | 175 +++++++++++++++++++++++++++++------- 1 file changed, 144 insertions(+), 31 deletions(-) diff --git a/static/js/update_mindmap.js b/static/js/update_mindmap.js index 335c5a7..f840067 100644 --- a/static/js/update_mindmap.js +++ b/static/js/update_mindmap.js @@ -168,7 +168,9 @@ document.addEventListener('DOMContentLoaded', function() { id: node.id, label: node.label, category: node.category, - description: node.description + description: node.description, + hasChildren: node.hasChildren, + expanded: node.expanded } })), // Kanten @@ -264,9 +266,11 @@ document.addEventListener('DOMContentLoaded', function() { document.dispatchEvent(new Event('mindmap-loaded')); console.log('mindmap-loaded Event ausgelöst'); - // Event-Listener für Knoten-Klicks hinzufügen + // 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); } @@ -298,7 +302,9 @@ function updateMindmap() { label: node.label, category: node.category, description: node.description, - color: categoryColors[node.category] || '#60a5fa' + color: categoryColors[node.category] || '#60a5fa', + hasChildren: node.hasChildren, + expanded: node.expanded } }); }); @@ -664,47 +670,95 @@ function createFlashContainer() { // Funktion zum Laden der Subthemen async function loadSubthemes(node) { try { - // Simuliere Datenbankabfrage (später durch echte API ersetzen) + console.log('Loading subthemes for node:', node.id()); + + // Simuliere Datenbankabfrage const subthemes = subthemesDatabase[node.id()]; - if (!subthemes) return; + if (!subthemes) { + console.log('No subthemes found for node:', node.id()); + return; + } // Animation starten showFlash('Lade Subthemen...', 'info'); + + // Neue Seite erstellen + const mindmapContainer = document.querySelector('.mindmap-container'); + const newPage = document.createElement('div'); + newPage.className = 'mindmap-page'; + newPage.style.display = 'none'; + + // Kopfzeile erstellen + const header = document.createElement('div'); + header.className = 'mindmap-header'; + header.innerHTML = ` + +

${node.data('label')}

+ `; + + // Container für die neue Mindmap + const newContainer = document.createElement('div'); + newContainer.id = `cy-${node.id()}`; + newContainer.className = 'mindmap-view'; + + // Elemente zur Seite hinzufügen + newPage.appendChild(header); + newPage.appendChild(newContainer); + mindmapContainer.appendChild(newPage); + + // Neue Cytoscape-Instanz erstellen + const newCy = cytoscape({ + container: newContainer, + elements: [], + style: cy.style(), + layout: { + name: 'cose', + animate: true, + animationDuration: 500, + refresh: 20, + fit: true, + padding: 30, + nodeRepulsion: 4500, + idealEdgeLength: 50, + edgeElasticity: 0.45 + } + }); // Neue Knoten hinzufügen subthemes.forEach(subtheme => { - cy.add({ + newCy.add({ group: 'nodes', data: { - ...subtheme, - expanded: false - } - }); - - // Kante zum Elternknoten hinzufügen - cy.add({ - group: 'edges', - data: { - id: `${node.id()}_${subtheme.id}`, - source: node.id(), - target: subtheme.id + id: subtheme.id, + label: subtheme.label, + category: subtheme.category, + description: subtheme.description, + hasChildren: subtheme.hasChildren, + expanded: false, + color: categoryColors[subtheme.category] || '#60a5fa' } }); }); - - // Node als expandiert markieren - node.data('expanded', true); - // Layout neu berechnen mit Animation - cy.layout({ - name: 'cose', - animate: true, - animationDuration: 500, - refresh: 20, - fit: true, - padding: 30 - }).run(); + // Event-Listener für die neue Mindmap + newCy.on('tap', 'node', async function(evt) { + const clickedNode = evt.target; + if (clickedNode.data('hasChildren') && !clickedNode.data('expanded')) { + await loadSubthemes(clickedNode); + } + }); + + // Alte Seite ausblenden und neue anzeigen + cy.container().style.display = 'none'; + newPage.style.display = 'block'; + + // Layout ausführen + newCy.layout().run(); // Erfolgsmeldung anzeigen showFlash('Subthemen erfolgreich geladen', 'success'); @@ -713,4 +767,63 @@ async function loadSubthemes(node) { console.error('Fehler beim Laden der Subthemen:', error); showFlash('Fehler beim Laden der Subthemen', 'error'); } -} \ No newline at end of file +} + +// Funktion zum Zurücknavigieren +function goBack() { + const currentPage = document.querySelector('.mindmap-page:not([style*="display: none"])'); + if (currentPage) { + currentPage.style.display = 'none'; + cy.container().style.display = 'block'; + } +} + +// CSS-Styles für die neue Seite +const style = document.createElement('style'); +style.textContent = ` + .mindmap-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--bg-color, #1a1a1a); + z-index: 1000; + } + + .mindmap-header { + display: flex; + align-items: center; + padding: 1rem; + background: rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .back-button { + background: none; + border: none; + color: #fff; + cursor: pointer; + padding: 0.5rem; + margin-right: 1rem; + border-radius: 50%; + transition: background-color 0.3s; + } + + .back-button:hover { + background: rgba(255, 255, 255, 0.1); + } + + .mindmap-title { + color: #fff; + font-size: 1.5rem; + font-weight: 600; + margin: 0; + } + + .mindmap-view { + width: 100%; + height: calc(100% - 4rem); + } +`; +document.head.appendChild(style); \ No newline at end of file