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

#945 Support for notes, better width and handling of +/-

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-10-06 11:35:46 +02:00
parent 1cb52a602a
commit 4f1186a610
4 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -31,10 +31,10 @@ describe('State diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note with minus - and plus + in it
note left of State1 note left of State1
Important information! You can write Important information! You can write
notes. notes with . and in them.
end note end note
`, `,
{ logLevel: 0 } { logLevel: 0 }
@@ -45,12 +45,13 @@ describe('State diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
stateDiagram stateDiagram
State1: The state with a note State1: The state with a note +,-
note right of State1 note right of State1
Important information! You can write Important information! You can write +,-
notes. notes.
end note end note
State1 --> State2 State1 --> State2 : With +,-
note left of State2 : This is the note +,-<br/>
`, `,
{ logLevel: 0 } { logLevel: 0 }
); );

7
src/diagrams/state/parser/stateDiagram.jison
View File

@@ -65,14 +65,15 @@
<FLOATING_NOTE>[^"]* { console.log('Floating note text: ', yytext);return "NOTE_TEXT";} <FLOATING_NOTE>[^"]* { console.log('Floating note text: ', yytext);return "NOTE_TEXT";}
<FLOATING_NOTE_ID>[^\n]* {this.popState();console.log('Floating note ID', yytext);return "ID";} <FLOATING_NOTE_ID>[^\n]* {this.popState();console.log('Floating note ID', yytext);return "ID";}
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');console.log('Got ID for note', yytext);return 'ID';} <NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');console.log('Got ID for note', yytext);return 'ID';}
<NOTE_TEXT>\s*":"[^\+\-:\n,;]+ { this.popState();console.log('Got NOTE_TEXT for note',yytext);return 'NOTE_TEXT';} <NOTE_TEXT>\s*":"[^:\n;]+ { this.popState();console.log('Got NOTE_TEXT for note',yytext);yytext = yytext.substr(2).trim();return 'NOTE_TEXT';}
<NOTE_TEXT>\s*[^\+\-:,;]+"end note" { this.popState();console.log('Got NOTE_TEXT for note',yytext);yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';} <NOTE_TEXT>\s*[^:;]+"end note" { this.popState();console.log('Got NOTE_TEXT for note',yytext);yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
"stateDiagram"\s+ { console.log('Got state diagram', yytext,'#');return 'SD'; } "stateDiagram"\s+ { console.log('Got state diagram', yytext,'#');return 'SD'; }
"hide empty description" { console.log('HIDE_EMPTY', yytext,'#');return 'HIDE_EMPTY'; } "hide empty description" { console.log('HIDE_EMPTY', yytext,'#');return 'HIDE_EMPTY'; }
<INITIAL,struct>"[*]" { console.log('EDGE_STATE=',yytext); return 'EDGE_STATE';} <INITIAL,struct>"[*]" { console.log('EDGE_STATE=',yytext); return 'EDGE_STATE';}
<INITIAL,struct>[^:\n\s\-\{]+ { console.log('=>ID=',yytext); return 'ID';} <INITIAL,struct>[^:\n\s\-\{]+ { console.log('=>ID=',yytext); return 'ID';}
<INITIAL,struct>\s*":"[^\+\->:\n,;]+ { yytext = yytext.trim(); console.log('Descr = ', yytext); return 'DESCR'; } // <INITIAL,struct>\s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); console.log('Descr = ', yytext); return 'DESCR'; }
<INITIAL,struct>\s*":"[^:\n;]+ { yytext = yytext.trim(); console.log('Descr = ', yytext); return 'DESCR'; }
<INITIAL,struct>"-->" return '-->'; <INITIAL,struct>"-->" return '-->';
<struct>"--" return 'CONCURRENT'; <struct>"--" return 'CONCURRENT';
<<EOF>> return 'NL'; <<EOF>> return 'NL';

12
src/diagrams/state/shapes.js
View File

@@ -205,16 +205,15 @@ const _drawLongText = (_text, x, y, g) => {
if (txt.length > 0) { if (txt.length > 0) {
const span = textElem.append('tspan'); const span = textElem.append('tspan');
span.text(txt);
const textBounds = span.node().getBBox(); const textBounds = span.node().getBBox();
textHeight += textBounds.height; textHeight += textBounds.height;
span.attr('x', x + conf.noteMargin); span.attr('x', x + conf.noteMargin);
span.attr('y', y + textHeight + 1.75 * conf.noteMargin); span.attr('y', y + textHeight + 1.25* conf.noteMargin);
span.text(txt); // textWidth = Math.max(textBounds.width, textWidth);
textWidth = Math.max(textBounds.width, textWidth);
} }
} }
return { textWidth, textHeight }; return { textWidth: textElem.node().getBBox().width, textHeight };
}; };
/** /**
@@ -226,6 +225,7 @@ const _drawLongText = (_text, x, y, g) => {
export const drawNote = (text, g) => { export const drawNote = (text, g) => {
g.attr('class', 'note'); g.attr('class', 'note');
console.warn('Text of note', text);
const note = g const note = g
.append('rect') .append('rect')
.attr('x', 0) .attr('x', 0)
@@ -233,7 +233,7 @@ export const drawNote = (text, g) => {
const rectElem = g.append('g'); const rectElem = g.append('g');
const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem); const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem);
console.warn('Text of note', text, textWidth);
note.attr('height', textHeight + 2 * conf.noteMargin); note.attr('height', textHeight + 2 * conf.noteMargin);
note.attr('width', textWidth + conf.noteMargin * 2); note.attr('width', textWidth + conf.noteMargin * 2);

15
src/diagrams/state/stateDiagram.spec.js
View File

@@ -8,7 +8,7 @@ describe('state diagram, ', function() {
parser.yy = stateDb; parser.yy = stateDb;
}); });
fit('super simple', function() { it('super simple', function() {
const str = ` const str = `
stateDiagram stateDiagram
[*] --> State1 [*] --> State1
@@ -58,7 +58,7 @@ describe('state diagram, ', function() {
scale 350 width scale 350 width
[*] --> State1 [*] --> State1
State1 --> [*] State1 --> [*]
State1 : this is a string State1 : this is a string with - in it
State1 : this is another string State1 : this is another string
State1 --> State2 State1 --> State2
@@ -71,7 +71,16 @@ describe('state diagram, ', function() {
it('description after second state', function() { it('description after second state', function() {
const str = `stateDiagram\n const str = `stateDiagram\n
scale 350 width scale 350 width
[*] --> State1 : This is the description [*] --> State1 : This is the description with - in it
State1 --> [*]
`;
parser.parse(str);
});
it('shall handle descriptions inkluding minus signs', function() {
const str = `stateDiagram\n
scale 350 width
[*] --> State1 : This is the description +-!
State1 --> [*] State1 --> [*]
`; `;