From c781545a40860c1bb186ac38465c0b41e28ecedb Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 9 Nov 2022 20:10:31 +0100 Subject: [PATCH] #3778 Adding a hexgon shape --- docs/syntax/mindmap.md | 12 ++++++ packages/mermaid-mindmap/src/mindmap.spec.js | 12 ++++++ packages/mermaid-mindmap/src/mindmapDb.js | 8 ++++ .../mermaid-mindmap/src/parser/mindmap.jison | 8 ++-- packages/mermaid-mindmap/src/styles.js | 4 +- packages/mermaid-mindmap/src/svgDraw.js | 42 +++++++++++++++++++ packages/mermaid/src/docs/syntax/mindmap.md | 7 ++++ 7 files changed, 88 insertions(+), 5 deletions(-) diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md index 26a1065bef..9a2fb1f533 100644 --- a/docs/syntax/mindmap.md +++ b/docs/syntax/mindmap.md @@ -152,6 +152,18 @@ mindmap id)I am a cloud( ``` +### Hexagon + +```mermaid-example +mindmap + id{{I am a hexagon}} +``` + +```mermaid +mindmap + id{{I am a hexagon}} +``` + ### Default ```mermaid-example diff --git a/packages/mermaid-mindmap/src/mindmap.spec.js b/packages/mermaid-mindmap/src/mindmap.spec.js index b9e9abf6ec..e3f018350b 100644 --- a/packages/mermaid-mindmap/src/mindmap.spec.js +++ b/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 () { diff --git a/packages/mermaid-mindmap/src/mindmapDb.js b/packages/mermaid-mindmap/src/mindmapDb.js index 2ae98c223b..16861cd233 100644 --- a/packages/mermaid-mindmap/src/mindmapDb.js +++ b/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'; } diff --git a/packages/mermaid-mindmap/src/parser/mindmap.jison b/packages/mermaid-mindmap/src/parser/mindmap.jison index bd008db7f2..a96ee62614 100644 --- a/packages/mermaid-mindmap/src/parser/mindmap.jison +++ b/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'; <> return 'EOF'; ["] { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");} [^"]+ { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";} @@ -45,11 +46,12 @@ [\)]\) {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";} [\)] {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";} [\]] {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";} +"}}" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} "(-" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";} "-)" {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";} "((" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} -"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} -[^\)\]\(]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} +"(" {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";} +[^\)\]\(\}]+ { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} .+(?!\(\() { yy.getLogger().trace('Long description:', yytext); return 'NODE_DESCR';} // [\[] return 'NODE_START'; // .+ return 'TXT' ; diff --git a/packages/mermaid-mindmap/src/styles.js b/packages/mermaid-mindmap/src/styles.js index a409aa4e54..986a04514d 100644 --- a/packages/mermaid-mindmap/src/styles.js +++ b/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 { diff --git a/packages/mermaid-mindmap/src/svgDraw.js b/packages/mermaid-mindmap/src/svgDraw.js index 1246b1cb91..6a53c438b0 100644 --- a/packages/mermaid-mindmap/src/svgDraw.js +++ b/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 diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md index af7a3df85e..90d75a88ab 100644 --- a/packages/mermaid/src/docs/syntax/mindmap.md +++ b/packages/mermaid/src/docs/syntax/mindmap.md @@ -94,6 +94,13 @@ mindmap id)I am a cloud( ``` +### Hexagon + +```mermaid-example +mindmap + id{{I am a hexagon}} +``` + ### Default ```mermaid-example