Updated with cloud and bang shapes

cypress/integration/rendering/mindmap.spec.js

@@ -38,6 +38,32 @@ root[root]
     );
   });
 
+  it('Blang and cloud shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+  ::icon(mdi mdi-fire)
+  a))Another bang((
+  ::icon(mdi mdi-fire)
+  a)A cloud(
+  ::icon(mdi mdi-fire)
+    `,
+      {}
+    );
+  });
+
+  it('Blang and cloud shape with icons', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+
+  a))Another bang((
+  a)A cloud(
+    `,
+      {}
+    );
+  });
+
   it('braches', () => {
     imgSnapshotTest(
       `mindmap

cypress/platform/knsv.html

@@ -97,14 +97,15 @@ mindmap
 </div>
 <div class="mermaid2" style="width: 50%;">
 mindmap
-    root[
+    root))
       The root where the things
       hap<br/>
       hap<br/>
       pen!
-    ]
+    ((
+    ::icon(mdi mdi-alarm)
       Child1
-      child2[
+      child2)
         Child2<br/>
         The second<br/>
         The second<br/>
@@ -113,7 +114,7 @@ mindmap
         The second<br/>
         The second<br/>
         The second<br/>
-      ]
+      (
         Other
       Child3
         GrandChild1
@@ -125,10 +126,10 @@ mindmap
 </div>
 <div class="mermaid" style="width: 100%;">
 mindmap
-    root))TheRoot)
-      Child1)"Child1"(
-      Child2-)"Child2"(-
-      Child3(-"Child3"-)
+    root))I am a bang((
+    ::icon(mdi mdi-alarm)
+      Child1)"Bang"(
+      ::icon(mdi mdi-alarm)
 </div>
 <div class="mermaid2" style="width: 100%;">
 mindmap

docs/mindmap.md

@@ -49,8 +49,6 @@ Root
       C
 ```
 
-)sdlfkjlsd(
-
 In this way we can use a text outline to generate a hierarchical mindmap.
 
 ## Different shapes
@@ -76,7 +74,18 @@ mindmap
 mindmap
     id((I am a circle))
 ```
+### Bang
 
+```mermaid-example
+mindmap
+    id))I am a bang((
+```
+### Cloud
+
+```mermaid-example
+mindmap
+    id)I am a cloud(
+```
 ### Default
 
 ```mermaid-example

src/diagram-api/detectType.js

@@ -85,7 +85,6 @@ const detectType = function (text, cnf) {
   const k = Object.keys(detectors);
   for (let i = 0; i < k.length; i++) {
     const key = k[i];
-    console.log('Detecting type for', key);
     const dia = detectors[key];
     if (dia && dia.detector(text)) {
       return key;

src/diagrams/mindmap/mindmapDb.js

@@ -24,7 +24,6 @@ const getParent = function (level) {
 };
 
 export const getMindmap = () => {
-  console.log('getMindmap', nodes[0]);
   return nodes.length > 0 ? nodes[0] : null;
 };
 export const addNode = (level, id, descr, type) => {
@@ -80,15 +79,17 @@ export const nodeType = {
   ROUNDED_RECT: 1,
   RECT: 2,
   CIRCLE: 3,
+  CLOUD: 4,
+  BANG: 5,
 };
 
 export const getType = (startStr, endStr) => {
-  console.log('In get type', startStr, endStr);
+  log.debug('In get type', startStr, endStr);
   switch (startStr) {
     case '[':
       return nodeType.RECT;
     case '(':
-      return nodeType.ROUNDED_RECT;
+      return endStr === ')' ? nodeType.ROUNDED_RECT : nodeType.CLOUD;
     case '((':
       return nodeType.CIRCLE;
     case ')':
@@ -105,7 +106,6 @@ export const setElementForId = (id, element) => {
 };
 
 export const decorateNode = (decoration) => {
-  console.log('decorateNode', decoration);
   const node = nodes[nodes.length - 1];
   if (decoration && decoration.icon) {
     node.icon = sanitizeText(decoration.icon);

src/diagrams/mindmap/mindmapRenderer.js

@@ -67,7 +67,7 @@ function transpose(mindmap) {
 }
 /** @param {object} mindmap */
 function bottomToUp(mindmap) {
-  console.log('bottomToUp', mindmap);
+  log.debug('bottomToUp', mindmap);
   eachNode(mindmap.result, (node) => {
     // node.y = node.y - (node.y - bb.top) * 2 - node.height;
     node.y = node.y - (node.y - 0) * 2 - node.height;
@@ -76,7 +76,6 @@ function bottomToUp(mindmap) {
 }
 /** @param {object} mindmap The mindmap hierarchy */
 function rightToLeft(mindmap) {
-  console.log('bottomToUp', mindmap);
   eachNode(mindmap.result, (node) => {
     // node.y = node.y - (node.y - bb.top) * 2 - node.height;
     node.x = node.x - (node.x - 0) * 2 - node.width;
@@ -90,7 +89,7 @@ function rightToLeft(mindmap) {
  * @param conf
  */
 function layout(mindmap, dir, conf) {
-  const bb = new BoundingBox(80, 80);
+  const bb = new BoundingBox(30, 60);
 
   const layout = new Layout(bb);
   switch (dir) {
@@ -114,7 +113,7 @@ function layout(mindmap, dir, conf) {
   }
 }
 const dirFromIndex = (index) => {
-  const dirNum = index % 4;
+  const dirNum = (index + 2) % 4;
   switch (dirNum) {
     case 0:
       return 'LR';
@@ -197,14 +196,6 @@ function layoutMindmap(node, conf) {
 
   // Merge the trees into a single tree
   const result = mergeTrees(node, trees);
-
-  // return layout(node, 'BT', conf);
-  // const res = layout(node, 'BT', conf);
-  // res.result.children = [];
-  // trees.forEach((tree) => {
-  //   res.result.children.push(tree.result);
-  // });
-  console.log('Trees', trees);
   eachNode;
   return node;
 }
@@ -267,9 +258,7 @@ export const draw = (text, id, version, diagObj) => {
 
     // Next step is to layout the mindmap, giving each node a position
 
-    console.log('Before', mm);
     const positionedMindmap = layoutMindmap(mm, conf);
-    console.log(positionedMindmap);
 
     // After this we can draw, first the edges and the then nodes with the correct position
     drawEdges(edgesElem, positionedMindmap, null, 0, -1, conf);

src/diagrams/mindmap/styles.js

@@ -15,7 +15,9 @@ const genSections = (options) => {
   for (let i = 0; i < 8; i++) {
     const sw = '' + (17 - 3 * i);
     sections += `
-    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle  {
+    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
+      i - 1
+    } path  {
       fill: ${options['git' + i]};
     }
     .section-${i - 1} text {

src/diagrams/mindmap/svgDraw.js

@@ -79,24 +79,69 @@ const rectBkg = function (elem, node, section, conf) {
     .attr('width', node.width);
 };
 const cloudBkg = function (elem, node, section, conf) {
-  const r = elem
-    .append('rect')
+  const rd = 5;
+  const r = elem;
+  const w = node.width;
+  const h = node.height;
+  const r0 = 0.1 * w;
+  const r1 = 0.15 * w;
+  const r2 = 0.25 * w;
+  const r3 = 0.35 * w;
+  const r4 = 0.2 * w;
+  const p = elem
+    .append('path')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr('height', node.height)
-    .attr('rx', node.padding)
-    .attr('ry', node.padding)
-    .attr('width', node.width);
+    .attr(
+      'd',
+      `M0 0 a${r1},${r1} 0 0,1 ${w * 0.25},${-1 * w * 0.1}
+      a${r3},${r3} 1 0,1 ${w * 0.4},${-1 * w * 0.1}
+      a${r2},${r2} 1 0,1 ${w * 0.35},${1 * w * 0.2}
+
+      a${r1},${r1} 1 0,1 ${w * 0.15},${1 * h * 0.35}
+      a${r4},${r4} 1 0,1 ${-1 * w * 0.15},${1 * h * 0.65}
+
+      a${r2},${r1} 1 0,1 ${-1 * w * 0.25},${w * 0.15}
+      a${r3},${r3} 1 0,1 ${-1 * w * 0.5},${0}
+      a${r1},${r1} 1 0,1 ${-1 * w * 0.25},${-1 * w * 0.15}
+
+      a${r1},${r1} 1 0,1 ${-1 * w * 0.1},${-1 * h * 0.35}
+      a${r4},${r4} 1 0,1 ${w * 0.1},${-1 * h * 0.65}
+
+    H0 V0 Z`
+    );
 };
 const bangBkg = function (elem, node, section, conf) {
-  const r = elem
-    .append('rect')
+  const rd = 5;
+  const w = node.width;
+  const h = node.height;
+  const r = 0.15 * w;
+  const p = elem
+    .append('path')
     .attr('id', 'node-' + node.id)
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
-    .attr('height', node.height)
-    .attr('rx', node.padding)
-    .attr('ry', node.padding)
-    .attr('width', node.width);
+    .attr(
+      'd',
+      `M0 0 a${r},${r} 1 0,0 ${w * 0.25},${-1 * h * 0.1}
+      a${r},${r} 1 0,0 ${w * 0.25},${0}
+      a${r},${r} 1 0,0 ${w * 0.25},${0}
+      a${r},${r} 1 0,0 ${w * 0.25},${1 * h * 0.1}
+
+      a${r},${r} 1 0,0 ${w * 0.15},${1 * h * 0.33}
+      a${r * 0.8},${r * 0.8} 1 0,0 ${0},${1 * h * 0.34}
+      a${r},${r} 1 0,0 ${-1 * w * 0.15},${1 * h * 0.33}
+
+      a${r},${r} 1 0,0 ${-1 * w * 0.25},${h * 0.15}
+      a${r},${r} 1 0,0 ${-1 * w * 0.25},${0}
+      a${r},${r} 1 0,0 ${-1 * w * 0.25},${0}
+      a${r},${r} 1 0,0 ${-1 * w * 0.25},${-1 * h * 0.15}
+
+      a${r},${r} 1 0,0 ${-1 * w * 0.1},${-1 * h * 0.33}
+      a${r * 0.8},${r * 0.8} 1 0,0 ${0},${-1 * h * 0.34}
+      a${r},${r} 1 0,0 ${w * 0.1},${-1 * h * 0.33}
+
+    H0 V0 Z`
+    );
 };
 const circleBkg = function (elem, node, section, conf) {
   const r = elem