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

cypress/platform/knsv.html

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

src/diagrams/mindmap/mindmapRenderer.js

@@ -30,7 +30,7 @@ function drawNodes(svg, mindmap, conf) {
  */
 function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
   if (parent) {
-    svgDraw.drawEdge(edgesElem, mindmap, parent, depth, conf);
+    svgDraw.drawEdge(edgesElem, mindmap, parent, depth, section, conf);
   }
   if (mindmap.children) {
     mindmap.children.forEach((child, index) => {
@@ -262,7 +262,7 @@ export const draw = (text, id, version, diagObj) => {
     console.log(positionedMindmap);
 
     // 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);
 
     // Setup the view box and size of the svg element

src/diagrams/mindmap/svgDraw.js

@@ -70,15 +70,14 @@ export const drawNode = function (elem, node, conf) {
 
   const r = nodeElem
     .append('rect')
-    .attr('x', (-1 * node.width) / 2)
-    .attr('width', node.width)
+
+    // .attr('width', node.width)
     .attr('fill', rect.fill)
     .attr('stroke', rect.stroke)
     .attr('rx', rect.rx)
     .attr('ry', rect.ry);
 
   const textElem = nodeElem.append('g');
-  // .attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
 
   const txt = textElem
     .append('text')
@@ -90,8 +89,9 @@ export const drawNode = function (elem, node, conf) {
     .call(wrap, node.width);
   const bbox = txt.node().getBBox();
   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
   if (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);
   return node.height;
 };
-
-export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, conf) {
+const section2Color = function (section) {
+  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
     .append('line')
-    .attr('x1', parent.x)
+    .attr('x1', parent.x + parent.width / 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('stroke', '#88f')
+    .attr('stroke', color)
     .attr('stroke-width', 15 - depth * 3)
     .attr('class', 'edge ');
 };