Curved edges

cypress/integration/rendering/mermaid.spec.js

@@ -0,0 +1,75 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Mindmap', () => {
+  it('square shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root[
+      The root
+    ]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('rounded rect shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root((
+      The root
+    ))
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('circle shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root(
+      The root
+    )
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('default shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('adding children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+    child2
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('adding grand children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+      child2
+      child3
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/platform/knsv.html

@@ -44,6 +44,22 @@ journey
       Sit down: 5: Mee
 </div>
 <div class="mermaid2" style="width: 50%;">
+mindmap
+  The root
+    C1
+      c2
+      c3
+    C4
+      c5
+      c6
+    C7
+      c8
+      c9
+    C8
+      c10
+      c11
+    </div>
+<div class="mermaid2" style="width: 50%;">
 mindmap
     root[
       The root where the things

src/diagrams/mindmap/mindmapRenderer.js

@@ -160,7 +160,9 @@ function layoutMindmap(node, conf) {
   // const bb = new BoundingBox(10, 10);
   // const layout = new Layout(bb);
   // // const layout = new HorizontalLayout(bb);
-
+  if (node.children.length === 0) {
+    return node;
+  }
   const trees = [];
   // node.children.forEach((child, index) => {
   //   const tree = clone(node);
@@ -186,6 +188,13 @@ function layoutMindmap(node, conf) {
       trees.push(layout(tree, dirFromIndex(i), conf));
     }
   }
+  // Let each node know the direct of its tree for when we draw the branches.
+  trees.forEach((tree, index) => {
+    tree.result.direction = dirFromIndex(index);
+    eachNode(tree.result, (node) => {
+      node.direction = dirFromIndex(index);
+    });
+  });
 
   // Merge the trees into a single tree
   const result = mergeTrees(node, trees);
@@ -197,6 +206,7 @@ function layoutMindmap(node, conf) {
   //   res.result.children.push(tree.result);
   // });
   console.log('Trees', trees);
+  eachNode;
   return node;
 }
 /**

src/diagrams/mindmap/styles.js

@@ -53,7 +53,7 @@ const getStyles = (options) =>
     stroke-width: 3;
   }
   ${genSections(options)}
-  .section-root rect, .section-root path {
+  .section-root rect, .section-root path, .section-root circle  {
     fill: ${options.git0};
   }
   .section-root text {
@@ -65,6 +65,8 @@ const getStyles = (options) =>
     justify-content: center;
     align-items: center;
   }
-
+  .edge {
+    fill: none;
+  }
 `;
 export default getStyles;

src/diagrams/mindmap/svgDraw.js

@@ -126,7 +126,8 @@ export const drawNode = function (elem, node, section, conf) {
     .attr('text-anchor', 'middle')
     .call(wrap, node.width);
   const bbox = txt.node().getBBox();
-  node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding;
+  const fontSize = conf.fontSize.replace ? conf.fontSize.replace('px', '') : conf.fontSize;
+  node.height = bbox.height + fontSize * 1.1 * 0.5 + node.padding;
   node.width = bbox.width + 2 * node.padding;
   if (node.icon) {
     if (node.type === db.nodeType.CIRCLE) {
@@ -206,14 +207,33 @@ export const drawNode = function (elem, node, section, conf) {
 };
 
 export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section, conf) {
+  // edgesElem
+  //   .append('line')
+  //   .attr('x1', parent.x + parent.width / 2)
+  //   .attr('y1', parent.y + parent.height / 2)
+  //   .attr('x2', mindmap.x + mindmap.width / 2)
+  //   .attr('y2', mindmap.y + mindmap.height / 2)
+  //   .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
+
+  //<path d="M100,250 Q250,100 400,250 T700,250" />
+
+  const sx = parent.x + parent.width / 2;
+  const sy = parent.y + parent.height / 2;
+  const ex = mindmap.x + mindmap.width / 2;
+  const ey = mindmap.y + mindmap.height / 2;
+  const mx = ex > sx ? sx + Math.abs(sx - ex) / 2 : sx - Math.abs(sx - ex) / 2;
+  const my = ey > sy ? sy + Math.abs(sy - ey) / 2 : sy - Math.abs(sy - ey) / 2;
+  const qx = ex > sx ? Math.abs(sx - mx) / 2 + sx : -Math.abs(sx - mx) / 2 + sx;
+  const qy = ey > sy ? Math.abs(sy - my) / 2 + sy : -Math.abs(sy - my) / 2 + sy;
+
   edgesElem
-    .append('line')
-    .attr('x1', parent.x + parent.width / 2)
-    .attr('y1', parent.y + parent.height / 2)
-    .attr('x2', mindmap.x + mindmap.width / 2)
-    .attr('y2', mindmap.y + mindmap.height / 2)
-    // .attr('stroke', color)
-    // .attr('stroke-width', 15 - depth * 3)
+    .append('path')
+    .attr(
+      'd',
+      parent.direction === 'TB' || parent.direction === 'BT'
+        ? `M${sx},${sy} Q${sx},${qy} ${mx},${my} T${ex},${ey}`
+        : `M${sx},${sy} Q${qx},${sy} ${mx},${my} T${ex},${ey}`
+    )
     .attr('class', 'edge section-edge-' + section + ' edge-depth-' + depth);
 };