marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Using the shape data

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-07-19 18:20:39 +02:00
parent 82c247bb11
commit 958204e831
2 changed files with 37 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/mermaid/src/diagrams/flowchart/parser/flow-node-data.spec.js
View File

@@ -20,6 +20,8 @@ describe('when parsing directions', function () {
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('rounded');
expect(data4Layout.nodes[0].label).toEqual('D');
});
it('should be possible to link to a node with more data', function () {
const res = flow.parser.parse(`flowchart TB
@@ -31,10 +33,16 @@ describe('when parsing directions', function () {
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
console.log(data4Layout.edges);
expect(data4Layout.nodes.length).toBe(2);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('A');
expect(data4Layout.nodes[1].label).toEqual('D');
expect(data4Layout.nodes[1].shape).toEqual('circle');
expect(data4Layout.edges.length).toBe(1);
});
it('should use default direction from top level', function () {
it('should not disturb adding multiple nodes after each other', function () {
const res = flow.parser.parse(`flowchart TB
A[hello]
B@{
@@ -45,23 +53,39 @@ describe('when parsing directions', function () {
shape: circle,
icon: "clock"
}@
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(3);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('hello');
expect(data4Layout.nodes[1].shape).toEqual('circle');
expect(data4Layout.nodes[1].label).toEqual('B');
expect(data4Layout.nodes[2].shape).toEqual('circle');
expect(data4Layout.nodes[2].label).toEqual('Hello');
});
it('should use handle } character inside the shape data', function () {
it('should use handle bracket end (}) character inside the shape data', function () {
const res = flow.parser.parse(`flowchart TB
A@{
label: "This is }",
icon: "clock"
}@
`);
const data4Layout = flow.parser.yy.getData();
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('squareRect');
expect(data4Layout.nodes[0].label).toEqual('This is }');
});
it('Diamond shapes should work as usual', function () {
const res = flow.parser.parse(`flowchart TB
A{This is a label}
`);
const data4Layout = flow.parser.yy.getData();
console.log(data4Layout.nodes);
expect(data4Layout.nodes.length).toBe(1);
expect(data4Layout.nodes[0].shape).toEqual('diamond');
expect(data4Layout.nodes[0].label).toEqual('This is a label');
});
});

19
packages/mermaid/src/diagrams/flowchart/parser/flow.jison
View File

@@ -36,8 +36,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multilin
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
[@\{] { this.pushState("shapeData"); }
// <shapeData>[\}][\@] { console.log('This is the end: ', yytext); this.popState(); }
\@\{ { console.log('Pushing state shapeData!'); this.pushState("shapeData"); }
<shapeData>[^}] { console.log('End bracket found: ', yytext); this.pushState("shapeDataEndBracket");}
<shapeDataEndBracket>[@] { console.log('This is the end: ', yytext); this.popState();this.popState(); }
<shapeDataEndBracket>[^@]* { console.log('something else: ', yytext); return 'SHAPE_DATA'; }
@@ -372,18 +371,18 @@ separator: NEWLINE | SEMI | EOF ;
vertexStatement: vertexStatement link node SHAPE_DATA
{ console.warn('vs SHAPE_DATA',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
{ /* console.warn('vs SHAPE_DATA',$vertexStatement.stmt,$node, $SHAPE_DATA);*/ yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node
{ console.warn('vs',$vertexStatement.stmt,$node); yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
{ /*console.warn('vs',$vertexStatement.stmt,$node);*/ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
| vertexStatement link node spaceList
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
|node spaceList {console.warn('vertexStatement: node spaceList', $node); $$ = {stmt: $node, nodes:$node }}
|node spaceList { /*console.warn('vertexStatement: node spaceList', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node SHAPE_DATA {
console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA);
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA+'\n}\n');
$$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA+'\n}'}
/*console.warn('vertexStatement: node SHAPE_DATA', $node[0], $SHAPE_DATA);*/
yy.addVertex($node[0],undefined,undefined,undefined, undefined,undefined, undefined,$SHAPE_DATA);
$$ = {stmt: $node, nodes:$node, shapeData: $SHAPE_DATA}
}
|node { console.warn('vertexStatement: single node', $node); $$ = {stmt: $node, nodes:$node }}
|node { /* console.warn('vertexStatement: single node', $node); */ $$ = {stmt: $node, nodes:$node }}
;
node: styledVertex
@@ -396,8 +395,6 @@ styledVertex: vertex
{ /* console.warn('nodc', $vertex);*/ $$ = $vertex;}
| vertex STYLE_SEPARATOR idString
{$$ = $vertex;yy.setClass($vertex,$idString)}
| vertex idString
{ yy.setClass($vertex,$idString)}
;
vertex: idString SQS text SQE