marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-13 12:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjusting the width of the boxes based on the text in the boxes

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-07-25 14:22:07 +02:00
parent 15f1cdf3aa
commit f815bd08b7
3 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/platform/knsv.html
View File

@@ -88,7 +88,7 @@ mindmap
Child2 Child2
GrandChild1 GrandChild1
GrandChild2 GrandChild2
Child3 Child3[Child 3 has a long wrapped text as well]
GrandChild3 GrandChild3
GrandChild4 GrandChild4
Child4 Child4

4
src/diagrams/mindmap/mindmapRenderer.js
View File

@@ -30,7 +30,7 @@ function drawNodes(svg, mindmap, conf) {
*/ */
function drawEdges(edgesElem, mindmap, parent, depth, section, conf) { function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
if (parent) { if (parent) {
svgDraw.drawEdge(edgesElem, mindmap, parent, depth, conf); svgDraw.drawEdge(edgesElem, mindmap, parent, depth, section, conf);
} }
if (mindmap.children) { if (mindmap.children) {
mindmap.children.forEach((child, index) => { mindmap.children.forEach((child, index) => {
@@ -262,7 +262,7 @@ export const draw = (text, id, version, diagObj) => {
console.log(positionedMindmap); console.log(positionedMindmap);
// After this we can draw, first the edges and the then nodes with the correct position // After this we can draw, first the edges and the then nodes with the correct position
drawEdges(edgesElem, positionedMindmap, null, 0, conf); drawEdges(edgesElem, positionedMindmap, null, 0, -1, conf);
positionNodes(positionedMindmap, conf); positionNodes(positionedMindmap, conf);
// Setup the view box and size of the svg element // Setup the view box and size of the svg element

38
src/diagrams/mindmap/svgDraw.js
View File

@@ -70,15 +70,14 @@ export const drawNode = function (elem, node, conf) {
const r = nodeElem const r = nodeElem
.append('rect') .append('rect')
.attr('x', (-1 * node.width) / 2)
.attr('width', node.width) // .attr('width', node.width)
.attr('fill', rect.fill) .attr('fill', rect.fill)
.attr('stroke', rect.stroke) .attr('stroke', rect.stroke)
.attr('rx', rect.rx) .attr('rx', rect.rx)
.attr('ry', rect.ry); .attr('ry', rect.ry);
const textElem = nodeElem.append('g'); const textElem = nodeElem.append('g');
// .attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
const txt = textElem const txt = textElem
.append('text') .append('text')
@@ -90,8 +89,9 @@ export const drawNode = function (elem, node, conf) {
.call(wrap, node.width); .call(wrap, node.width);
const bbox = txt.node().getBBox(); const bbox = txt.node().getBBox();
node.height = bbox.height + conf.fontSize * 1.1 * 0.5; node.height = bbox.height + conf.fontSize * 1.1 * 0.5;
r.attr('height', node.height); // .attr('y', (-1 * node.height) / 2); node.width = bbox.width + conf.fontSize * 1.1 * 0.5;
r.attr('height', node.height).attr('width', node.width);
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + 0 + ')');
// Position the node to its coordinate // Position the node to its coordinate
if (node.x || node.y) { if (node.x || node.y) {
nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')'); nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
@@ -99,15 +99,33 @@ export const drawNode = function (elem, node, conf) {
db.setElementForId(node.id, nodeElem); db.setElementForId(node.id, nodeElem);
return node.height; return node.height;
}; };
const section2Color = function (section) {
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, conf) { switch (section) {
case 0:
return '#88f';
case 1:
return '#f88';
case 2:
return '#8f8';
case 3:
return '#f8f';
case 4:
return '#ff8';
case 5:
return '#8ff';
default:
return '#88f';
}
};
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section, conf) {
const color = section2Color(section);
edgesElem edgesElem
.append('line') .append('line')
.attr('x1', parent.x) .attr('x1', parent.x + parent.width / 2)
.attr('y1', parent.y + parent.height / 2) .attr('y1', parent.y + parent.height / 2)
.attr('x2', mindmap.x) .attr('x2', mindmap.x + mindmap.width / 2)
.attr('y2', mindmap.y + mindmap.height / 2) .attr('y2', mindmap.y + mindmap.height / 2)
.attr('stroke', '#88f') .attr('stroke', color)
.attr('stroke-width', 15 - depth * 3) .attr('stroke-width', 15 - depth * 3)
.attr('class', 'edge '); .attr('class', 'edge ');
}; };