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

Refactored rendering sequence diagrams

Browse Source 
Fixed default config clobbering issues
Updated/corrected sequenceDiagram.spec to set the config using mermaidAPI
Enabled freeze on mermaidAPI to protect defaultConfig
This commit is contained in:
Chris Moran
2020-06-17 18:14:10 -04:00
parent 67c2fe8005
commit e64a65c41e
8 changed files with 159 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/diagrams/sequence/sequenceDiagram.spec.js
View File

@@ -10,26 +10,6 @@ function addConf(conf, key, value) {
}
return conf;
}
describe('when processing', function() {
beforeEach(function() {
parser.yy = sequenceDb;
parser.yy.clear();
});
it('should handle long opts', function() {
const str = `
%%{init: {'config': { 'fontFamily': 'Menlo'}}}%%
sequenceDiagram
participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
A->>Bob: Hola
Bob-->A: Pasten !
`;
mermaidAPI.parse(str);
renderer.setConf(mermaidAPI.getConfig().sequence);
renderer.draw(str, 'tst');
const messages = parser.yy.getMessages();
expect(messages).toBeTruthy();
});
});
describe('when parsing a sequenceDiagram', function() {
beforeEach(function() {
parser.yy = sequenceDb;
@@ -793,6 +773,7 @@ end`;
describe('when checking the bounds in a sequenceDiagram', function() {
let conf;
beforeEach(function() {
mermaidAPI.reset();
parser.yy = sequenceDb;
parser.yy.clear();
conf = {
@@ -807,10 +788,11 @@ describe('when checking the bounds in a sequenceDiagram', function() {
boxTextMargin: 15,
noteMargin: 25
};
renderer.setConf(conf);
mermaidAPI.initialize({ sequence: conf });
renderer.bounds.init();
});
it('it should handle a simple bound call', function() {
renderer.bounds.init();
renderer.bounds.insert(100, 100, 200, 200);
@@ -821,7 +803,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
expect(bounds.stopy).toBe(200);
});
it('it should handle an expanding bound', function() {
renderer.bounds.init();
renderer.bounds.insert(100, 100, 200, 200);
renderer.bounds.insert(25, 50, 300, 400);
@@ -833,7 +814,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
expect(bounds.stopy).toBe(400);
});
it('it should handle inserts within the bound without changing the outer bounds', function() {
renderer.bounds.init();
renderer.bounds.insert(100, 100, 200, 200);
renderer.bounds.insert(25, 50, 300, 400);
@@ -846,7 +826,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
expect(bounds.stopy).toBe(400);
});
it('it should handle a loop without expanding the area', function() {
renderer.bounds.init();
renderer.bounds.insert(25, 50, 300, 400);
renderer.bounds.verticalPos = 150;
@@ -869,7 +848,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
expect(bounds.stopy).toBe(400);
});
it('it should handle multiple loops withtout expanding the bounds', function() {
renderer.bounds.init();
renderer.bounds.insert(100, 100, 1000, 1000);
renderer.bounds.verticalPos = 200;
@@ -902,7 +880,6 @@ describe('when checking the bounds in a sequenceDiagram', function() {
expect(bounds.stopy).toBe(1000);
});
it('it should handle a loop that expands the area', function() {
renderer.bounds.init();
renderer.bounds.insert(100, 100, 200, 200);
renderer.bounds.verticalPos = 200;
@@ -929,6 +906,7 @@ describe('when checking the bounds in a sequenceDiagram', function() {
describe('when rendering a sequenceDiagram', function() {
let conf;
beforeEach(function() {
mermaidAPI.reset();
parser.yy = sequenceDb;
parser.yy.clear();
@@ -946,18 +924,18 @@ describe('when rendering a sequenceDiagram', function() {
wrapEnabled: false,
mirrorActors: false
};
renderer.setConf(conf);
mermaidAPI.initialize({ sequence: conf });
renderer.bounds.init();
});
['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
it(`
it should handle one actor, when textPlacement is ${textPlacement}`, function() {
renderer.setConf(addConf(conf, 'textPlacement', textPlacement));
renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice`;
mermaidAPI.initialize(addConf(conf, 'textPlacement', textPlacement));
renderer.bounds.init();
parser.parse(str);
renderer.draw(str, 'tst');
@@ -969,8 +947,6 @@ participant Alice`;
});
});
it('it should handle same actor with different whitespace properly', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice
@@ -984,7 +960,6 @@ participant Alice
expect(Object.keys(actors)).toEqual(['Alice']);
});
it('it should handle one actor and a centered note', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice
@@ -1002,7 +977,6 @@ Note over Alice: Alice thinks
expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
});
it('it should handle one actor and a note to the left', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice
@@ -1019,7 +993,6 @@ Note left of Alice: Alice thinks`;
expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
});
it('it should handle one actor and a note to the right', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
participant Alice
@@ -1036,7 +1009,6 @@ Note right of Alice: Alice thinks`;
expect(bounds.stopy).toBe(conf.height + conf.boxMargin + 2 * conf.noteMargin + 10);
});
it('it should handle two actors', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?`;
@@ -1048,16 +1020,15 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(0 + conf.messageMargin + conf.height);
expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
});
it('it should handle two actors with init directive', function() {
renderer.bounds.init();
const str = `
%%{init: {'logLevel': 0}}%%
sequenceDiagram
Alice->Bob: Hello Bob, how are you?`;
mermaidAPI.parse(str);
parser.parse(str);
renderer.draw(str, 'tst');
const bounds = renderer.bounds.getBounds();
@@ -1066,10 +1037,9 @@ Alice->Bob: Hello Bob, how are you?`;
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
expect(bounds.stopy).toBe(conf.height + conf.messageMargin + (conf.mirrorActors ? 2 * conf.boxMargin + conf.height : 0));
});
it('it should handle two actors with init directive with multiline directive', function() {
renderer.bounds.init();
const str = `
%%{init: { 'logLevel': 0}}%%
sequenceDiagram
@@ -1081,16 +1051,18 @@ Alice->Bob: Hello Bob, how are you?`;
parser.parse(str);
renderer.draw(str, 'tst');
const msgs = parser.yy.getMessages();
const bounds = renderer.bounds.getBounds();
const mermaid = mermaidAPI.getConfig();
expect(mermaid.logLevel).toBe(0);
expect(bounds.startx).toBe(0);
expect(bounds.starty).toBe(0);
expect(bounds.stopx).toBe(conf.width * 2 + conf.actorMargin);
expect(bounds.stopy).toBe(0 + conf.messageMargin + conf.height);
expect(bounds.stopy).toBe(conf.messageMargin + conf.height);
expect(msgs.every(v => v.wrap)).toBe(true);
});
it('it should handle two actors and two centered shared notes', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1110,7 +1082,6 @@ Note over Bob,Alice: Looks back
);
});
it('it should draw two actors and two messages', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1126,7 +1097,6 @@ Bob->Alice: Fine!`;
expect(bounds.stopy).toBe(0 + 2 * conf.messageMargin + conf.height);
});
it('it should draw two actors notes to the right', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1148,7 +1118,6 @@ Bob->Alice: Fine!`;
);
});
it('it should draw two actors notes to the left', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
@@ -1168,7 +1137,6 @@ Bob->Alice: Fine!`;
);
});
it('it should draw two actors notes to the left with text wrapped (inline)', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->>Bob:wrap: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
@@ -1190,7 +1158,6 @@ Bob->>Alice: Fine!`;
);
});
it('it should draw two actors notes to the left with text wrapped (directive)', function() {
renderer.bounds.init();
const str = `
%%{init: { 'theme': 'dark' } }%%
sequenceDiagram
@@ -1216,7 +1183,6 @@ Bob->>Alice: Fine!`;
);
});
it('it should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark', function() {
renderer.bounds.init();
const str = `
%%{init:{'theme':'dark'}}%%
sequenceDiagram
@@ -1224,6 +1190,7 @@ sequenceDiagram
Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
parser.parse(str);
renderer.draw(str, 'tst');
@@ -1240,18 +1207,16 @@ Bob->>Alice: Fine!`;
2 * conf.messageMargin + conf.height + conf.boxMargin + 10 + 2 * conf.noteMargin
);
});
it('it should draw two actors notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
renderer.bounds.init();
it('it should draw two actors, notes to the left with text wrapped and the init directive sets the theme to dark and fontFamily to Menlo, fontSize to 18, and fontWeight to 800', function() {
const str = `
%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrapEnabled": true }}}%%
sequenceDiagram
Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
Note left of Alice: Bob thinks
Bob->>Alice: Fine!`;
mermaidAPI.parse(str);
renderer.setConf(mermaidAPI.getConfig().sequence);
parser.yy.clear();
parser.parse(str);
// renderer.setConf(mermaidAPI.getConfig().sequence);
renderer.draw(str, 'tst');
const bounds = renderer.bounds.getBounds();
@@ -1271,13 +1236,13 @@ Bob->>Alice: Fine!`;
);
});
it('it should draw two loops', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
loop Cheers
Bob->Alice: Fine!
end`;
parser.parse(str);
renderer.draw(str, 'tst');
@@ -1291,7 +1256,6 @@ end`;
);
});
it('it should draw background rect', function() {
renderer.bounds.init();
const str = `
sequenceDiagram
Alice->Bob: Hello Bob, are you alright?
@@ -1313,6 +1277,7 @@ end`;
describe('when rendering a sequenceDiagram with actor mirror activated', function() {
let conf;
beforeEach(function() {
mermaidAPI.reset();
parser.yy = sequenceDb;
parser.yy.clear();
@@ -1332,11 +1297,12 @@ describe('when rendering a sequenceDiagram with actor mirror activated', functio
// Prolongs the edge of the diagram downwards
bottomMarginAdj: 1
};
renderer.setConf(conf);
mermaidAPI.initialize({ sequence: conf });
renderer.bounds.init();
});
['tspan', 'fo', 'old', undefined].forEach(function(textPlacement) {
it('it should handle one actor, when textPlacement is' + textPlacement, function() {
renderer.setConf(addConf(conf, 'textPlacement', textPlacement));
mermaidAPI.initialize(addConf(conf, 'textPlacement', textPlacement));
renderer.bounds.init();
const str = `
sequenceDiagram
@@ -1357,6 +1323,7 @@ participant Alice`;
describe('when rendering a sequenceDiagram with directives', function() {
let conf;
beforeEach(function() {
mermaidAPI.reset();
parser.yy = sequenceDb;
parser.yy.clear();
conf = {
@@ -1371,11 +1338,11 @@ describe('when rendering a sequenceDiagram with directives', function() {
boxTextMargin: 15,
noteMargin: 25
};
renderer.setConf(conf);
mermaidAPI.initialize({ sequence: conf });
renderer.bounds.init();
});
it('it should handle one actor, when theme is dark and logLevel is 1 DX1', function() {
renderer.bounds.init();
const str = `
%%{init: { "theme": "dark", "logLevel": 1 } }%%
sequenceDiagram
@@ -1396,7 +1363,6 @@ participant Alice
expect(bounds.stopy).toBe(2 * conf.height + 2 * conf.boxMargin);
});
it('it should handle one actor, when logLevel is 3', function() {
renderer.bounds.init();
const str = `
%%{initialize: { "logLevel": 3 }}%%
sequenceDiagram