mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-23 18:26:39 +02:00
Refactored rendering sequence diagrams
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:
@@ -493,6 +493,16 @@ context('Sequence diagram', () => {
|
||||
{}
|
||||
);
|
||||
});
|
||||
it('should render with an init directive', () => {
|
||||
imgSnapshotTest(
|
||||
`%%{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!`,
|
||||
{}
|
||||
)
|
||||
});
|
||||
});
|
||||
context('directives', () => {
|
||||
it('should overide config with directive settings', () => {
|
||||
|
@@ -6,11 +6,14 @@ export const setConfig = conf => {
|
||||
};
|
||||
export const getConfig = () => config;
|
||||
|
||||
export const reset = conf => {
|
||||
Object.keys(config).forEach(key => delete config[key]);
|
||||
assignWithDepth(config, conf, { clobber: true });
|
||||
};
|
||||
|
||||
const configApi = {
|
||||
setConfig,
|
||||
getConfig
|
||||
// get conf() {
|
||||
// return config;
|
||||
// }
|
||||
getConfig,
|
||||
reset
|
||||
};
|
||||
export default configApi;
|
||||
|
@@ -1,6 +1,5 @@
|
||||
import { logger } from '../../logger';
|
||||
import mermaidAPI from '../../mermaidAPI';
|
||||
import { detectType } from '../../utils';
|
||||
|
||||
let prevActor = undefined;
|
||||
let actors = {};
|
||||
@@ -45,7 +44,6 @@ const handleDirective = function(directive) {
|
||||
switch (directive.type) {
|
||||
case 'init':
|
||||
case 'initialize':
|
||||
logger.debug('init/initialize is handled in mermaid/mermaidAPI');
|
||||
['config'].forEach(prop => {
|
||||
if (typeof directive.args[prop] !== 'undefined') {
|
||||
directive.args.sequence = directive.args[prop];
|
||||
|
@@ -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
|
||||
|
@@ -4,7 +4,7 @@ import { logger } from '../../logger';
|
||||
import { parser } from './parser/sequenceDiagram';
|
||||
import common from '../common/common';
|
||||
import sequenceDb from './sequenceDb';
|
||||
import utils from '../../utils';
|
||||
import utils, { assignWithDepth } from '../../utils';
|
||||
|
||||
parser.yy = sequenceDb;
|
||||
|
||||
@@ -436,7 +436,7 @@ export const drawActors = function(diagram, actors, actorKeys, verticalPos) {
|
||||
const actor = actors[actorKeys[i]];
|
||||
|
||||
// Add some rendering data to the object
|
||||
actor.width = actor.width || calculateActorWidth(actor);
|
||||
actor.width = typeof actor.width === 'undefined' ? calculateActorWidth(actor) : actor.width;
|
||||
actor.height = conf.height;
|
||||
actor.margin = conf.actorMargin;
|
||||
|
||||
@@ -456,26 +456,16 @@ export const drawActors = function(diagram, actors, actorKeys, verticalPos) {
|
||||
};
|
||||
|
||||
export const setConf = function(cnf) {
|
||||
const keys = Object.keys(cnf);
|
||||
|
||||
keys.forEach(function(key) {
|
||||
conf[key] = cnf[key];
|
||||
});
|
||||
assignWithDepth(conf, cnf);
|
||||
|
||||
if (cnf.fontFamily) {
|
||||
conf.actorFontFamily = conf.noteFontFamily = conf.messageFontFamily = cnf.fontFamily;
|
||||
} else {
|
||||
conf.fontFamily = conf.messageFontFamily;
|
||||
}
|
||||
if (cnf.fontSize) {
|
||||
conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;
|
||||
} else {
|
||||
conf.fontSize = conf.messageFontSize;
|
||||
}
|
||||
if (cnf.fontWeight) {
|
||||
conf.actorFontWeight = conf.noteFontWeight = conf.messageFontWeight = cnf.fontWeight;
|
||||
} else {
|
||||
conf.fontWeight = conf.messageFontWeight;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -536,23 +526,18 @@ function adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoop
|
||||
Math.round((3 * conf.fontSize) / 4) < 10
|
||||
? conf.fontSize
|
||||
: Math.round((3 * conf.fontSize) / 4);
|
||||
msg.message = msg.message
|
||||
? utils.wrapLabel(`[${msg.message}]`, loopWidth, {
|
||||
let textConf = {
|
||||
fontSize: minSize,
|
||||
fontFamily: conf.fontFamily,
|
||||
fontWeight: conf.fontWeight,
|
||||
fontFamily: conf.messageFontFamily,
|
||||
fontWeight: conf.messageFontWeight,
|
||||
margin: conf.wrapPadding
|
||||
})
|
||||
};
|
||||
msg.message = msg.message
|
||||
? utils.wrapLabel(`[${msg.message}]`, loopWidth, textConf)
|
||||
: msg.message;
|
||||
heightAdjust = Math.max(
|
||||
0,
|
||||
utils.calculateTextHeight(msg.message, {
|
||||
fontSize: minSize,
|
||||
fontFamily: conf.fontFamily,
|
||||
fontWeight: conf.fontWeight,
|
||||
margin: conf.wrapPadding
|
||||
}) -
|
||||
(preMargin + postMargin)
|
||||
utils.calculateTextHeight(msg.message, textConf) - (preMargin + postMargin)
|
||||
);
|
||||
}
|
||||
addLoopFn(msg);
|
||||
@@ -616,6 +601,7 @@ export const draw = function(text, id) {
|
||||
let loopData,
|
||||
noteWidth,
|
||||
textWidth,
|
||||
textConf,
|
||||
shouldWrap = msg.wrap && msg.message && !common.lineBreakRegex.test(msg.message);
|
||||
|
||||
switch (msg.type) {
|
||||
@@ -624,12 +610,18 @@ export const draw = function(text, id) {
|
||||
|
||||
startx = actors[msg.from].x;
|
||||
stopx = actors[msg.to].x;
|
||||
textWidth = utils.calculateTextWidth(msg.message, conf);
|
||||
textConf = {
|
||||
fontSize: conf.noteFontSize,
|
||||
fontFamily: conf.noteFontFamily,
|
||||
fontWeight: conf.noteFontWeight,
|
||||
margin: conf.wrapPadding
|
||||
};
|
||||
textWidth = utils.calculateTextWidth(msg.message, textConf);
|
||||
noteWidth = shouldWrap ? conf.width : Math.max(conf.width, textWidth);
|
||||
|
||||
if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {
|
||||
if (shouldWrap) {
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
|
||||
}
|
||||
drawNote(
|
||||
diagram,
|
||||
@@ -640,7 +632,7 @@ export const draw = function(text, id) {
|
||||
);
|
||||
} else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {
|
||||
if (shouldWrap) {
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
|
||||
}
|
||||
drawNote(
|
||||
diagram,
|
||||
@@ -652,7 +644,7 @@ export const draw = function(text, id) {
|
||||
} else if (msg.to === msg.from) {
|
||||
// Single-actor over
|
||||
if (shouldWrap) {
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
|
||||
}
|
||||
drawNote(
|
||||
diagram,
|
||||
@@ -666,7 +658,7 @@ export const draw = function(text, id) {
|
||||
forceWidth = Math.abs(startx - stopx) + conf.actorMargin / 2;
|
||||
if (shouldWrap) {
|
||||
noteWidth = forceWidth;
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, conf);
|
||||
msg.message = utils.wrapLabel(msg.message, noteWidth, textConf);
|
||||
} else {
|
||||
noteWidth = Math.max(forceWidth, textWidth - 2 * conf.noteMargin);
|
||||
}
|
||||
@@ -769,6 +761,12 @@ export const draw = function(text, id) {
|
||||
const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
|
||||
startx = fromBounds[fromIdx];
|
||||
stopx = toBounds[toIdx];
|
||||
textConf = {
|
||||
fontSize: conf.messageFontSize,
|
||||
fontFamily: conf.messageFontFamily,
|
||||
fontWeight: conf.messageFontWeight,
|
||||
margin: conf.wrapPadding
|
||||
};
|
||||
if (shouldWrap) {
|
||||
msg.message = utils.wrapLabel(
|
||||
msg.message,
|
||||
@@ -776,7 +774,7 @@ export const draw = function(text, id) {
|
||||
Math.abs(stopx - startx) + conf.messageMargin * 2,
|
||||
conf.width + conf.messageMargin * 2
|
||||
),
|
||||
conf
|
||||
textConf
|
||||
);
|
||||
}
|
||||
|
||||
|
@@ -49,6 +49,7 @@ import erRenderer from './diagrams/er/erRenderer';
|
||||
import journeyParser from './diagrams/user-journey/parser/journey';
|
||||
import journeyDb from './diagrams/user-journey/journeyDb';
|
||||
import journeyRenderer from './diagrams/user-journey/journeyRenderer';
|
||||
import configApi from './config';
|
||||
|
||||
const themes = {};
|
||||
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
|
||||
@@ -556,11 +557,12 @@ const config = {
|
||||
fontSize: 12
|
||||
}
|
||||
};
|
||||
export const defaultConfig = Object.freeze(assignWithDepth({}, config));
|
||||
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||||
config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
|
||||
|
||||
setLogLevel(config.logLevel);
|
||||
setConfig(config);
|
||||
configApi.reset(config);
|
||||
|
||||
function parse(text) {
|
||||
const graphInit = utils.detectInit(text);
|
||||
@@ -635,6 +637,7 @@ function parse(text) {
|
||||
};
|
||||
|
||||
parser.parse(text);
|
||||
return parser;
|
||||
}
|
||||
|
||||
export const encodeEntities = function(text) {
|
||||
@@ -702,7 +705,6 @@ export const decodeEntities = function(text) {
|
||||
*/
|
||||
const render = function(id, _txt, cb, container) {
|
||||
const cnf = getConfig();
|
||||
console.warn(cnf);
|
||||
// Check the maximum allowed text size
|
||||
let txt = _txt;
|
||||
if (_txt.length > cnf.maxTextSize) {
|
||||
@@ -930,21 +932,36 @@ const render = function(id, _txt, cb, container) {
|
||||
return svgCode;
|
||||
};
|
||||
|
||||
let firstInit = true;
|
||||
function updateRendererConfigs(conf) {
|
||||
gitGraphRenderer.setConf(conf.git);
|
||||
flowRenderer.setConf(conf.flowchart);
|
||||
flowRendererV2.setConf(conf.flowchart);
|
||||
if (typeof conf['sequenceDiagram'] !== 'undefined') {
|
||||
sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));
|
||||
}
|
||||
sequenceRenderer.setConf(conf.sequence);
|
||||
ganttRenderer.setConf(conf.gantt);
|
||||
classRenderer.setConf(conf.class);
|
||||
stateRenderer.setConf(conf.state);
|
||||
stateRendererV2.setConf(conf.state);
|
||||
infoRenderer.setConf(conf.class);
|
||||
pieRenderer.setConf(conf.class);
|
||||
erRenderer.setConf(conf.er);
|
||||
journeyRenderer.setConf(conf.journey);
|
||||
errorRenderer.setConf(conf.class);
|
||||
}
|
||||
|
||||
function initialize(options) {
|
||||
console.log('mermaidAPI.initialize');
|
||||
console.log(`mermaidAPI.initialize: v${pkg.version}`);
|
||||
// Set default options
|
||||
if (typeof options === 'object') {
|
||||
if (firstInit) {
|
||||
firstInit = false;
|
||||
assignWithDepth(config, options);
|
||||
updateRendererConfigs(config);
|
||||
}
|
||||
setConfig(config);
|
||||
}
|
||||
setConfig(options);
|
||||
}
|
||||
assignWithDepth(config, getConfig());
|
||||
console.warn(`Initializing mermaidAPI: v${pkg.version} theme: ${config.theme}`);
|
||||
|
||||
setLogLevel(getConfig().logLevel);
|
||||
setLogLevel(config.logLevel);
|
||||
logger.debug('mermaidAPI.initialize: ', config);
|
||||
}
|
||||
|
||||
// function getConfig () {
|
||||
@@ -952,7 +969,7 @@ function initialize(options) {
|
||||
// return config
|
||||
// }
|
||||
|
||||
const mermaidAPI = {
|
||||
const mermaidAPI = Object.freeze({
|
||||
render,
|
||||
parse,
|
||||
initialize,
|
||||
@@ -960,9 +977,12 @@ const mermaidAPI = {
|
||||
setConfig,
|
||||
reset: () => {
|
||||
// console.warn('reset');
|
||||
firstInit = true;
|
||||
}
|
||||
};
|
||||
configApi.reset(defaultConfig);
|
||||
assignWithDepth(config, defaultConfig, { clobber: true });
|
||||
updateRendererConfigs(config);
|
||||
},
|
||||
defaultConfig
|
||||
});
|
||||
|
||||
export default mermaidAPI;
|
||||
/**
|
||||
|
@@ -1,10 +1,12 @@
|
||||
/* eslint-env jasmine */
|
||||
import mermaidAPI from './mermaidAPI';
|
||||
import { assignWithDepth } from './utils';
|
||||
|
||||
describe('when using mermaidAPI and ', function() {
|
||||
describe('doing initialize ', function() {
|
||||
beforeEach(function() {
|
||||
document.body.innerHTML = '';
|
||||
mermaidAPI.reset();
|
||||
});
|
||||
|
||||
it('should copy a literal into the configuration', function() {
|
||||
@@ -38,6 +40,52 @@ describe('when using mermaidAPI and ', function() {
|
||||
expect(config.testObject.test2).toBe(false);
|
||||
expect(config.testObject.test3).toBe(true);
|
||||
});
|
||||
it('should reset mermaid config to global defaults', function() {
|
||||
let config = {
|
||||
logLevel: 0
|
||||
};
|
||||
mermaidAPI.initialize(config);
|
||||
expect(mermaidAPI.getConfig().logLevel).toBe(0);
|
||||
mermaidAPI.reset();
|
||||
expect(mermaidAPI.getConfig()).toEqual(mermaidAPI.defaultConfig);
|
||||
});
|
||||
it('should prevent clobbering global defaults (direct)', function() {
|
||||
let config = assignWithDepth({}, mermaidAPI.defaultConfig);
|
||||
assignWithDepth(config, { logLevel: 0 });
|
||||
|
||||
let error = { message: '' };
|
||||
try {
|
||||
mermaidAPI['defaultConfig'] = config;
|
||||
} catch(e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error.message).toBe('Cannot assign to read only property \'defaultConfig\' of object \'#<Object>\'');
|
||||
expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
|
||||
});
|
||||
it('should prevent changes to global defaults (direct)', function() {
|
||||
let error = { message: '' };
|
||||
try {
|
||||
mermaidAPI.defaultConfig.logLevel = 0;
|
||||
} catch(e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error.message).toBe('Cannot assign to read only property \'logLevel\' of object \'#<Object>\'');
|
||||
expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
|
||||
});
|
||||
it('should prevent sneaky changes to global defaults (assignWithDepth)', function() {
|
||||
let config = {
|
||||
logLevel: 0
|
||||
};
|
||||
let error = { message: '' };
|
||||
try {
|
||||
assignWithDepth(mermaidAPI.defaultConfig, config);
|
||||
} catch(e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error.message).toBe('Cannot assign to read only property \'logLevel\' of object \'#<Object>\'');
|
||||
expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
|
||||
});
|
||||
|
||||
});
|
||||
describe('checking validity of input ', function() {
|
||||
it('it should throw for an invalid definiton', function() {
|
||||
|
@@ -613,7 +613,7 @@ export const calculateTextDimensions = function(text, config) {
|
||||
// We don't want to leak DOM elements - if a removal operation isn't available
|
||||
// for any reason, do not continue.
|
||||
if (!body.remove) {
|
||||
return 0;
|
||||
return { width: 0, height: 0 };
|
||||
}
|
||||
|
||||
const g = body.append('svg');
|
||||
|
Reference in New Issue
Block a user