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

Better padding handling in nodes

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-07-27 10:24:27 +02:00
parent 03d71829c6
commit 2d361964ce
5 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/platform/knsv.html
View File

@@ -82,13 +82,15 @@ mindmap
<div class="mermaid" style="width: 100%;"> <div class="mermaid" style="width: 100%;">
mindmap mindmap
root[ root[
The root where the things The root<br>
where<br>
things<br>
happen! happen!
] ]
Child2 Child2
GrandChild1 GrandChild1
GrandChild2 GrandChild2
Child3[Child 3 has a long wrapped text as well] Child3(Child 3 has a long wrapped text as well)
GrandChild3 GrandChild3
GrandChild4 GrandChild4
Child4 Child4

2
src/defaultConfig.js
View File

@@ -1820,7 +1820,7 @@ const config = {
}, },
mindmap: { mindmap: {
useMaxWidth: true, useMaxWidth: true,
diagramPadding: 10, padding: 50,
maxNodeWidth: 200, maxNodeWidth: 200,
}, },
}; };

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

@@ -267,7 +267,7 @@ export const draw = (text, id, version, diagObj) => {
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
setupGraphViewbox(undefined, svg, conf.mindmap.diagramPadding, conf.mindmap.useMaxWidth); setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
} catch (e) { } catch (e) {
log.error('Error while rendering info diagram'); log.error('Error while rendering info diagram');
log.error(e.message); log.error(e.message);

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

@@ -6,9 +6,9 @@ const genSections = (options) => {
for (let i = 0; i < 8; i++) { for (let i = 0; i < 8; i++) {
options['lineColor' + i] = options['lineColor' + i] || options['gitBranchLabel' + i]; options['lineColor' + i] = options['lineColor' + i] || options['gitBranchLabel' + i];
if (isDark(options['lineColor' + i])) { if (isDark(options['lineColor' + i])) {
options['lineColor' + i] = lighten(options['lineColor' + i], 30); options['lineColor' + i] = lighten(options['lineColor' + i], 20);
} else { } else {
options['lineColor' + i] = darken(options['lineColor' + i], 30); options['lineColor' + i] = darken(options['lineColor' + i], 20);
} }
} }

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

@@ -78,6 +78,16 @@ const rectBkg = function (elem, node, section, conf) {
.attr('height', node.height) .attr('height', node.height)
.attr('width', node.width); .attr('width', node.width);
}; };
const roundedRectBkg = function (elem, node, section, conf) {
const r = elem
.append('rect')
.attr('id', 'node-' + node.id)
.attr('class', 'node-bkg node-' + db.type2Str(node.type))
.attr('height', node.height)
.attr('rx', conf.mindmap.padding)
.attr('ry', conf.mindmap.padding)
.attr('width', node.width);
};
/** /**
* @param {object} elem The D3 dom element in which the node is to be added * @param {object} elem The D3 dom element in which the node is to be added
@@ -100,22 +110,24 @@ export const drawNode = function (elem, node, section, conf) {
.append('text') .append('text')
.text(node.descr) .text(node.descr)
.attr('dy', '1em') .attr('dy', '1em')
// .attr('dy', '0')
.attr('alignment-baseline', 'middle') .attr('alignment-baseline', 'middle')
.attr('dominant-baseline', 'middle') .attr('dominant-baseline', 'middle')
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.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 + conf.mindmap.padding;
node.width = bbox.width + conf.fontSize * 1.1 * 0.5; node.width = bbox.width + 2 * conf.mindmap.padding;
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + 0 + ')'); // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.height / 2 + ')');
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + conf.mindmap.padding / 2 + ')');
switch (node.type) { switch (node.type) {
case db.nodeType.DEFAULT: case db.nodeType.DEFAULT:
defaultBkg(bkgElem, node, section, conf); defaultBkg(bkgElem, node, section, conf);
break; break;
case db.nodeType.ROUNDED_RECT: case db.nodeType.ROUNDED_RECT:
rectBkg(bkgElem, node, section, conf); roundedRectBkg(bkgElem, node, section, conf);
break; break;
case db.nodeType.RECT: case db.nodeType.RECT:
rectBkg(bkgElem, node, section, conf); rectBkg(bkgElem, node, section, conf);