Better padding handling in nodes

cypress/platform/knsv.html

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

src/defaultConfig.js

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

src/diagrams/mindmap/mindmapRenderer.js

@@ -267,7 +267,7 @@ export const draw = (text, id, version, diagObj) => {
     positionNodes(positionedMindmap, conf);
 
     // 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) {
     log.error('Error while rendering info diagram');
     log.error(e.message);

src/diagrams/mindmap/styles.js

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

src/diagrams/mindmap/svgDraw.js

@@ -78,6 +78,16 @@ const rectBkg = function (elem, node, section, conf) {
     .attr('height', node.height)
     .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
@@ -100,22 +110,24 @@ export const drawNode = function (elem, node, section, conf) {
     .append('text')
     .text(node.descr)
     .attr('dy', '1em')
+    // .attr('dy', '0')
     .attr('alignment-baseline', 'middle')
     .attr('dominant-baseline', 'middle')
     .attr('text-anchor', 'middle')
     .call(wrap, node.width);
   const bbox = txt.node().getBBox();
-  node.height = bbox.height + conf.fontSize * 1.1 * 0.5;
-  node.width = bbox.width + conf.fontSize * 1.1 * 0.5;
+  node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + conf.mindmap.padding;
+  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) {
     case db.nodeType.DEFAULT:
       defaultBkg(bkgElem, node, section, conf);
       break;
     case db.nodeType.ROUNDED_RECT:
-      rectBkg(bkgElem, node, section, conf);
+      roundedRectBkg(bkgElem, node, section, conf);
       break;
     case db.nodeType.RECT:
       rectBkg(bkgElem, node, section, conf);