marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-10 02:49:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added the hex shape to the renderer, and support for it in the flow parser.

Browse Source 
Need to work on properly sizing it.
This commit is contained in:
Brian Mearns
2019-10-02 22:10:58 -04:00
parent 18f35ac213
commit 51e902cd36
2 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/diagrams/flowchart/flowRenderer.js
View File

@@ -121,6 +121,9 @@ export const addVertices = function(vert, g, svgId) {
case 'diamond': case 'diamond':
_shape = 'question'; _shape = 'question';
break; break;
case 'hexagon':
_shape = 'hexagon';
break;
case 'odd': case 'odd':
_shape = 'rect_left_inv_arrow'; _shape = 'rect_left_inv_arrow';
break; break;
@@ -358,6 +361,37 @@ export const draw = function(text, id) {
return shapeSvg; return shapeSvg;
}; };
render.shapes().hexagon = function(parent, bbox, node) {
const w = bbox.width;
const h = bbox.height;
const s = (w + h) * 0.9;
const points = [
{ x: s / 4, y: 0 },
{ x: (3 * s) / 4, y: 0 },
{ x: s, y: -s / 2 },
{ x: (3 * s) / 4, y: -s },
{ x: s / 4, y: -s },
{ x: 0, y: -s / 2 }
];
const shapeSvg = parent
.insert('polygon', ':first-child')
.attr(
'points',
points
.map(function(d) {
return d.x + ',' + d.y;
})
.join(' ')
)
.attr('rx', 5)
.attr('ry', 5)
.attr('transform', 'translate(' + -s / 2 + ',' + (s * 2) / 4 + ')');
node.intersect = function(point) {
return dagreD3.intersect.polygon(node, points, point);
};
return shapeSvg;
};
// Add custom shape for box with inverted arrow on left side // Add custom shape for box with inverted arrow on left side
render.shapes().rect_left_inv_arrow = function(parent, bbox, node) { render.shapes().rect_left_inv_arrow = function(parent, bbox, node) {
const w = bbox.width; const w = bbox.width;

4
src/diagrams/flowchart/parser/flow.jison
View File

@@ -313,6 +313,10 @@ vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'diamond');} {$$ = $1;yy.addVertex($1,$3,'diamond');}
| idString DIAMOND_START text DIAMOND_STOP spaceList | idString DIAMOND_START text DIAMOND_STOP spaceList
{$$ = $1;yy.addVertex($1,$3,'diamond');} {$$ = $1;yy.addVertex($1,$3,'diamond');}
| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
{$$ = $1;yy.addVertex($1,$4,'hexagon');}
| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP spaceList
{$$ = $1;yy.addVertex($1,$4,'hexagon');}
| idString TAGEND text SQE | idString TAGEND text SQE
{$$ = $1;yy.addVertex($1,$3,'odd');} {$$ = $1;yy.addVertex($1,$3,'odd');}
| idString TAGEND text SQE spaceList | idString TAGEND text SQE spaceList