diff options
Diffstat (limited to 'modules/ext/mindmap.js')
| -rw-r--r-- | modules/ext/mindmap.js | 30 |
1 files changed, 20 insertions, 10 deletions
diff --git a/modules/ext/mindmap.js b/modules/ext/mindmap.js index d0cab54..1daa85b 100644 --- a/modules/ext/mindmap.js +++ b/modules/ext/mindmap.js @@ -247,13 +247,18 @@ class MindmapModule { cyan: '#22d3ee', magenta: '#e879f9', white: '#e0e0e0' }; - const layout = { nodes: [], edges: [], width: 0, height: 0, _y: pad }; + const layout = { nodes: [], edges: [], width: 0, height: 0, _y: pad, minX: Infinity, maxX: 0, minY: Infinity, maxY: 0 }; const layoutTree = (node, x) => { const myY = layout._y; const myX = x; const color = colorMap[node.color] || '#818cf8'; layout.nodes.push({ x: myX, y: myY, w: nw, h: nh, text: node.text, color, id: node.id }); + if (myX < layout.minX) layout.minX = myX; + const rightEdge = x + nw; + if (rightEdge > layout.maxX) layout.maxX = rightEdge; + const bottomEdge = myY + nh; + if (bottomEdge > layout.maxY) layout.maxY = bottomEdge; if (node.children && node.children.length > 0) { const totalW = node.children.length * nw + (node.children.length - 1) * hGap; @@ -267,28 +272,33 @@ class MindmapModule { } layout._y -= nh + vGap; } - const rightEdge = x + nw; - if (rightEdge > layout.width) layout.width = rightEdge; }; layout._y = pad; layoutTree(this.root, pad); - layout.height = layout._y + nh + pad; - // Build SVG - let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${layout.width + pad} ${layout.height}" style="max-width:100%;background:#0a0a14;font-family:monospace;border-radius:8px;">`; + // Normalize coordinates — shift so minX becomes pad + const xShift = (layout.minX === Infinity ? 0 : -layout.minX) + pad; + layout.height = layout.maxY + pad; + const svgWidth = (layout.maxX - layout.minX) + pad * 2; + + // Build SVG — apply xShift to all coordinates + let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgWidth} ${layout.height}" style="max-width:100%;background:#0a0a14;font-family:monospace;border-radius:8px;">`; // Edges first (behind nodes) for (const e of layout.edges) { - const mx = (e.x1 + e.x2) / 2; - svg += `<path d="M${e.x1},${e.y1} C${mx},${e.y1 + 20} ${mx},${e.y2 - 20} ${e.x2},${e.y2}" fill="none" stroke="#2a2a4a" stroke-width="1.5"/>`; + const sx = e.x1 + xShift, sy = e.y1; + const ex = e.x2 + xShift, ey = e.y2; + const mx = (sx + ex) / 2; + svg += `<path d="M${sx},${sy} C${mx},${sy + 20} ${mx},${ey - 20} ${ex},${ey}" fill="none" stroke="#2a2a4a" stroke-width="1.5"/>`; } // Nodes on top for (const n of layout.nodes) { - svg += `<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="6" fill="${n.color}18" stroke="${n.color}" stroke-width="1.5"/>`; + const nx = n.x + xShift; + svg += `<rect x="${nx}" y="${n.y}" width="${n.w}" height="${n.h}" rx="6" fill="${n.color}18" stroke="${n.color}" stroke-width="1.5"/>`; const text = n.text.length > 18 ? n.text.substring(0, 16) + '..' : n.text; - svg += `<text x="${n.x + n.w / 2}" y="${n.y + n.h / 2 + 4}" text-anchor="middle" fill="#e0e0e0" font-size="10" font-family="monospace">${text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}</text>`; + svg += `<text x="${nx + n.w / 2}" y="${n.y + n.h / 2 + 4}" text-anchor="middle" fill="#e0e0e0" font-size="10" font-family="monospace">${text.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')}</text>`; } svg += '</svg>'; |