#3778 Adding a hexgon shape

packages/mermaid-mindmap/src/mindmap.spec.js

@@ -172,6 +172,18 @@ root
       expect(mm.children.length).toEqual(0);
       expect(mm.type).toEqual(mindmap.yy.nodeType.BANG);
     });
+
+    it('MMP-12-a mutiple types (hexagon)', function () {
+      let str = `mindmap
+ root{{the root}}
+`;
+
+      mindmap.parse(str);
+      const mm = mindmap.yy.getMindmap();
+      expect(mm.type).toEqual(mindmap.yy.nodeType.HEXAGON);
+      expect(mm.descr).toEqual('the root');
+      expect(mm.children.length).toEqual(0);
+    });
   });
   describe('decorations', function () {
     it('MMP-13 should be possible to set an icon for the node', function () {

packages/mermaid-mindmap/src/mindmapDb.js

@@ -42,6 +42,9 @@ export const addNode = (level, id, descr, type) => {
     case nodeType.RECT:
       node.padding = 2 * conf.mindmap.padding;
       break;
+    case nodeType.HEXAGON:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
     default:
       node.padding = conf.mindmap.padding;
   }
@@ -79,6 +82,7 @@ export const nodeType = {
   CIRCLE: 3,
   CLOUD: 4,
   BANG: 5,
+  HEXAGON: 6,
 };
 
 export const getType = (startStr, endStr) => {
@@ -94,6 +98,8 @@ export const getType = (startStr, endStr) => {
       return nodeType.CLOUD;
     case '))':
       return nodeType.BANG;
+    case '{{':
+      return nodeType.HEXAGON;
     default:
       return nodeType.DEFAULT;
   }
@@ -127,6 +133,8 @@ export const type2Str = (type) => {
       return 'cloud';
     case nodeType.BANG:
       return 'bang';
+    case nodeType.HEXAGON:
+      return 'hexgon';
     default:
       return 'no-border';
   }

packages/mermaid-mindmap/src/parser/mindmap.jison

@@ -33,11 +33,12 @@
 "))"               { yy.getLogger().trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
 ")"               { yy.getLogger().trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
 "(("               { this.begin('NODE');return 'NODE_DSTART'; }
+"{{"               { this.begin('NODE');return 'NODE_DSTART'; }
 "("                { this.begin('NODE');return 'NODE_DSTART'; }
 "["                { this.begin('NODE');return 'NODE_DSTART'; }
 [\s]+              return 'SPACELIST'                 /* skip all whitespace */    ;
 // !(-\()            return 'NODE_ID';
-[^\(\[\n\-\)]+         return 'NODE_ID';
+[^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
@@ -45,11 +46,12 @@
 <NODE>[\)]\)         {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";}
 <NODE>[\)]         {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";}
 <NODE>[\]]         {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";}
+<NODE>"}}"         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
 <NODE>"(-"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
 <NODE>"-)"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
 <NODE>"(("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-<NODE>"("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-<NODE>[^\)\]\(]+     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
+<NODE>"("          {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
+<NODE>[^\)\]\(\}]+     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
 <NODE>.+(?!\(\()     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
 // [\[]               return 'NODE_START';
 // .+                 return 'TXT' ;

packages/mermaid-mindmap/src/styles.js

@@ -17,7 +17,7 @@ const genSections = (options) => {
     sections += `
     .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
       i - 1
-    } path  {
+    } polygon, .section-${i - 1} path  {
       fill: ${options['cScale' + i]};
     }
     .section-${i - 1} text {
@@ -55,7 +55,7 @@ const getStyles = (options) =>
     stroke-width: 3;
   }
   ${genSections(options)}
-  .section-root rect, .section-root path, .section-root circle  {
+  .section-root rect, .section-root path, .section-root circle, .section-root polygon  {
     fill: ${options.git0};
   }
   .section-root text {

packages/mermaid-mindmap/src/svgDraw.js

@@ -145,6 +145,45 @@ const circleBkg = function (elem, node) {
     .attr('class', 'node-bkg node-' + db.type2Str(node.type))
     .attr('r', node.width / 2);
 };
+
+/**
+ *
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ * @param node
+ */
+function insertPolygonShape(parent, w, h, points, node) {
+  return parent
+    .insert('polygon', ':first-child')
+    .attr(
+      'points',
+      points
+        .map(function (d) {
+          return d.x + ',' + d.y;
+        })
+        .join(' ')
+    )
+    .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
+}
+
+const hexagonBkg = function (elem, node) {
+  const h = node.height;
+  const f = 4;
+  const m = h / f;
+  const w = node.width - node.padding + 2 * m;
+  const points = [
+    { x: m, y: 0 },
+    { x: w - m, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w - m, y: -h },
+    { x: m, y: -h },
+    { x: 0, y: -h / 2 },
+  ];
+  const shapeSvg = insertPolygonShape(elem, w, h, points, node);
+};
+
 const roundedRectBkg = function (elem, node) {
   elem
     .append('rect')
@@ -253,6 +292,9 @@ export const drawNode = function (elem, node, fullSection, conf) {
     case db.nodeType.BANG:
       bangBkg(bkgElem, node, section, conf);
       break;
+    case db.nodeType.HEXAGON:
+      hexagonBkg(bkgElem, node, section, conf);
+      break;
   }
 
   // Position the node to its coordinate