tobias/podcast-mindmap
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Mindmap-Rendering: Timing + Fallback-Dimensionen

Browse Source 
- requestAnimationFrame vor buildGraph() (DOM muss SVG erst rendern)
- Fallback W/H wenn Container noch kein Layout hat (< 100px)
- Verhindert leere Mindmap nach Podcast-Auswahl

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-04-24 11:56:24 +02:00
parent 255d769005
commit aa60f22820
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/index.html
View File

@ -1131,7 +1131,8 @@ function init() {
<p style="margin-top:16px">Klicke auf einen Themenknoten oder eine Episode.</p>`; <p style="margin-top:16px">Klicke auf einen Themenknoten oder eine Episode.</p>`;
buildFilters(); buildFilters();
buildGraph(); // Wait for DOM to render the SVG element before building the graph
requestAnimationFrame(() => { requestAnimationFrame(() => { buildGraph(); }); });
Search.init(); Search.init();
} }
@ -1169,8 +1170,13 @@ function filterStaffel(id) {
function buildGraph() { function buildGraph() {
const svg = d3.select('#svg'); const svg = d3.select('#svg');
const container = document.getElementById('mindmap'); const container = document.getElementById('mindmap');
const W = container.clientWidth || window.innerWidth; let W = container.clientWidth;
const H = container.clientHeight || window.innerHeight * 0.45; let H = container.clientHeight;
// Fallback if container not yet laid out
if (!W || W < 100) W = window.innerWidth - 400;
if (!H || H < 100) H = window.innerHeight - 52;
if (W < 200) W = 600;
if (H < 200) H = 400;
const isMobile = W < 600; const isMobile = W < 600;
const sc = isMobile ? 0.6 : 1; const sc = isMobile ? 0.6 : 1;