mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/develop' into develop

This commit is contained in:
Chris Moran 2020-06-17 06:05:00 -04:00
parent fd7dbaf0a7 d4b733ff16
commit e6df4f24f4
No known key found for this signature in database
GPG Key ID: FBD13F2A0E1B9152
17 changed files with 188 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -214,7 +214,7 @@ pie
## Related projects
- [Command Line Interface](https://github.com/mermaid-js/mermaid.cli)
- [Command Line Interface](https://github.com/mermaid-js/mermaid-cli)
- [Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
- [HTTP Server](https://github.com/TomWright/mermaid-server)

2
cypress/integration/other/configuration.spec.js
View File

@ -88,7 +88,7 @@ describe('Configuration', () => {
C -->|Three| F[fa:fa-car Car]
`,
{
arrowMarkerAbsolute: true
logLevel:0, arrowMarkerAbsolute: true,fontFamily: '"Noto Sans SC", sans-serif'
}
);

26
cypress/integration/rendering/sequencediagram.spec.js
View File

@ -328,4 +328,30 @@ context('Sequence diagram', () => {
);
});
});
context('directives', () => {
it('should overide config with directive settings', () => {
imgSnapshotTest(
`
sequenceDiagram
%%{config: { "mirrorActors": true} }%%
Alice->>Bob: I'm short
note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
Bob->>Alice: Short as well
`,
{ logLevel:0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
);
});
it('should overide config with directive settings', () => {
imgSnapshotTest(
`
sequenceDiagram
%%{config: { "mirrorActors": false} }%%
Alice->>Bob: I'm short
note left of Alice: config set to mirrorActors: true<br/>directive set to mirrorActors: false
Bob->>Alice: Short as well
`,
{ logLevel:0, sequence: { mirrorActors: true, noteFontSize: 18, noteFontFamily: 'Arial' } }
);
});
});
});

13
cypress/platform/current.html
View File

@ -21,6 +21,14 @@
<body>
<h1>info below</h1>
<div class="mermaid" style="width: 50%; height: 20%;">
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TB
subgraph 1
A --> B;
@ -64,13 +72,14 @@ flowchart TB
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'linear', "htmlLabels": false },
flowchart: { curve: 'linear',htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'linear',
securityLevel: 'loose'
securityLevel: 'loose',
htmlLabels: false
});
function callback(){alert('It worked');}
</script>

15
cypress/platform/e2e.html
View File

@ -6,12 +6,12 @@
<style>
body {
/* font-family: 'Mansalva', cursive;*/
font-family: 'Mansalva', cursive;
font-family: '"Noto Sans SC", sans-serif';
}
.mermaid-main-font {
font-family: '"Noto Sans SC", sans-serif';
/* font-family: var(--mermaid-font-family); */
}
/* .mermaid-main-font {
font-family: "trebuchet ms", verdana, arial;
font-family: var(--mermaid-font-family);
} */
/* :root {
--mermaid-font-family: '"trebuchet ms", verdana, arial';
--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
@ -27,7 +27,7 @@
<script>
// Notice startOnLoad=false
// This prevents default handling in mermaid from render before the e2e logic is applied
mermaid.initialize({
window.mermaidDefault = {
startOnLoad: false,
useMaxWidth: true,
// "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
@ -35,7 +35,8 @@
// fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
// fontFamily: '"Mansalva", cursive',
fontFamily: '"Noto Sans SC", sans-serif'
});
};
mermaid.initialize(window.mermaidDefault);
</script>
</body>
</html>

5
cypress/platform/viewer.js
View File

@ -30,6 +30,11 @@ const contentLoaded = function() {
div.innerHTML = graphObj.code;
document.getElementsByTagName('body')[0].appendChild(div);
}
if (window.mermaidDefault.fontFamily) {
graphObj.mermaid.fontFamily = window.mermaidDefault.fontFamily;
}
global.mermaid.initialize(graphObj.mermaid);
global.mermaid.init();
}

21
dist/mermaid.core.js vendored
View File

@ -832,7 +832,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
var config = {};
var setConf = function setConf(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
console.log('config::setConf', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
var lvl1Keys = Object.keys(cnf);
for (var i = 0; i < lvl1Keys.length; i++) {
@ -852,6 +853,8 @@ var setConf = function setConf(cnf) {
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
console.log('config::setConf done', config);
};
var setConfig = function setConfig(conf) {
@ -21478,7 +21481,8 @@ var render = function render(id, _txt, cb, container) {
};
var setConf = function setConf(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
console.log('set conf ', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
var lvl1Keys = Object.keys(cnf);
for (var i = 0; i < lvl1Keys.length; i++) {
@ -21499,6 +21503,8 @@ var setConf = function setConf(cnf) {
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
console.log('set conf done', config);
};
function reinitialize(options) {
@ -21516,7 +21522,16 @@ function reinitialize(options) {
}
function initialize(options) {
var _config = config;
console.log('initialize ', options, config, Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])());
var _config = Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])(); // Set default options
if (_typeof(options) === 'object') {
setConf(_config);
Object(_config__WEBPACK_IMPORTED_MODULE_3__["setConfig"])(_config);
}
_logger__WEBPACK_IMPORTED_MODULE_4__["logger"].debug('Initializing mermaidAPI ', {
version: _package_json__WEBPACK_IMPORTED_MODULE_2__.version,
options: options,

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

21
dist/mermaid.js vendored
View File

@ -46615,7 +46615,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
var config = {};
var setConf = function setConf(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
console.log('config::setConf', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
var lvl1Keys = Object.keys(cnf);
for (var i = 0; i < lvl1Keys.length; i++) {
@ -46635,6 +46636,8 @@ var setConf = function setConf(cnf) {
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
console.log('config::setConf done', config);
};
var setConfig = function setConfig(conf) {
@ -67236,7 +67239,8 @@ var render = function render(id, _txt, cb, container) {
};
var setConf = function setConf(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
console.log('set conf ', cnf); // Top level initially mermaid, gflow, sequenceDiagram and gantt
var lvl1Keys = Object.keys(cnf);
for (var i = 0; i < lvl1Keys.length; i++) {
@ -67257,6 +67261,8 @@ var setConf = function setConf(cnf) {
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
console.log('set conf done', config);
};
function reinitialize(options) {
@ -67274,7 +67280,16 @@ function reinitialize(options) {
}
function initialize(options) {
var _config = config;
console.log('initialize ', options, config, Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])());
var _config = Object(_config__WEBPACK_IMPORTED_MODULE_3__["getConfig"])(); // Set default options
if (_typeof(options) === 'object') {
setConf(_config);
Object(_config__WEBPACK_IMPORTED_MODULE_3__["setConfig"])(_config);
}
_logger__WEBPACK_IMPORTED_MODULE_4__["logger"].debug('Initializing mermaidAPI ', {
version: _package_json__WEBPACK_IMPORTED_MODULE_2__.version,
options: options,

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

15
src/config.js
View File

@ -1,6 +1,8 @@
// import { logger } from './logger';
let config = {};
const setConf = function(cnf) {
// console.log('config::setConf', cnf);
// Top level initially mermaid, gflow, sequenceDiagram and gantt
const lvl1Keys = Object.keys(cnf);
for (let i = 0; i < lvl1Keys.length; i++) {
@ -8,17 +10,26 @@ const setConf = function(cnf) {
const lvl2Keys = Object.keys(cnf[lvl1Keys[i]]);
for (let j = 0; j < lvl2Keys.length; j++) {
// logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j])
// logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j]);
if (typeof config[lvl1Keys[i]] === 'undefined') {
config[lvl1Keys[i]] = {};
}
// logger.debug('Setting config: ' + lvl1Keys[i] + ' ' + lvl2Keys[j] + ' to ' + cnf[lvl1Keys[i]][lvl2Keys[j]])
// logger.debug(
// 'Setting config: ' +
// lvl1Keys[i] +
// ' ' +
// lvl2Keys[j] +
// ' to ' +
// cnf[lvl1Keys[i]][lvl2Keys[j]]
// );
config[lvl1Keys[i]][lvl2Keys[j]] = cnf[lvl1Keys[i]][lvl2Keys[j]];
}
} else {
// logger.debug('Setting config: ' + lvl1Keys[i] + ' to ' + cnf[lvl1Keys[i]]);
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
// console.log('config::setConf done', config);
};
export const setConfig = conf => {

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

@ -1351,7 +1351,7 @@ describe('when rendering a sequenceDiagram with directives', function() {
renderer.setConf(conf);
});
it('it should handle one actor, when theme is dark and logLevel is 1', function() {
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 } }%%

12
src/mermaid.js
View File

@ -29,7 +29,7 @@ import { logger } from './logger';
*/
const init = function() {
const conf = mermaidAPI.getConfig();
logger.debug('Starting rendering diagrams');
// console.log('Starting rendering diagrams (init) - mermaid.init');
let nodes;
if (arguments.length >= 2) {
/*! sequence config was passed as #1 */
@ -69,11 +69,11 @@ const init = function() {
logger.debug('Start On Load before: ' + mermaid.startOnLoad);
if (typeof mermaid.startOnLoad !== 'undefined') {
logger.debug('Start On Load inner: ' + mermaid.startOnLoad);
mermaidAPI.initialize({ startOnLoad: mermaid.startOnLoad });
mermaidAPI.setConfig({ startOnLoad: mermaid.startOnLoad });
}
if (typeof mermaid.ganttConfig !== 'undefined') {
mermaidAPI.initialize({ gantt: mermaid.ganttConfig });
mermaidAPI.setConfig({ gantt: mermaid.ganttConfig });
}
let txt;
@ -122,6 +122,9 @@ const init = function() {
};
const initialize = function(config) {
mermaidAPI.reset();
// console.log('mermaid.initialize1', config);
if (typeof config.mermaid !== 'undefined') {
if (typeof config.mermaid.startOnLoad !== 'undefined') {
mermaid.startOnLoad = config.mermaid.startOnLoad;
@ -130,8 +133,9 @@ const initialize = function(config) {
mermaid.htmlLabels = config.mermaid.htmlLabels;
}
}
// console.log('Initializing mermaid 2', config);
mermaidAPI.initialize(config);
logger.debug('Initializing mermaid ');
// logger.debug('Initializing mermaid 3', config);
};
/**

144
src/mermaidAPI.js
View File

@ -556,6 +556,8 @@ const config = {
fontSize: 12
}
};
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
setLogLevel(config.logLevel);
setConfig(config);
@ -699,9 +701,11 @@ export const decodeEntities = function(text) {
* completed.
*/
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 > config.maxTextSize) {
if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
}
@ -711,7 +715,7 @@ const render = function(id, _txt, cb, container) {
select(container)
.append('div')
.attr('id', 'd' + id)
.attr('style', 'font-family: ' + config.fontFamily)
.attr('style', 'font-family: ' + cnf.fontFamily)
.append('svg')
.attr('id', id)
.attr('width', '100%')
@ -752,22 +756,22 @@ const render = function(id, _txt, cb, container) {
const firstChild = svg.firstChild;
// pre-defined theme
let style = themes[config.theme];
let style = themes[cnf.theme];
if (style === undefined) {
style = '';
}
// user provided theme CSS
if (config.themeCSS !== undefined) {
style += `\n${config.themeCSS}`;
if (cnf.themeCSS !== undefined) {
style += `\n${cnf.themeCSS}`;
}
// user provided theme CSS
if (config.fontFamily !== undefined) {
style += `\n:root { --mermaid-font-family: ${config.fontFamily}}`;
if (cnf.fontFamily !== undefined) {
style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
}
// user provided theme CSS
if (config.altFontFamily !== undefined) {
style += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
if (cnf.altFontFamily !== undefined) {
style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
}
// classDef
@ -800,74 +804,74 @@ const render = function(id, _txt, cb, container) {
try {
switch (graphType) {
case 'git':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
gitGraphRenderer.setConf(config.git);
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
gitGraphRenderer.setConf(cnf.git);
gitGraphRenderer.draw(txt, id, false);
break;
case 'flowchart':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRenderer.setConf(cnf.flowchart);
flowRenderer.draw(txt, id, false);
break;
case 'flowchart-v2':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRendererV2.setConf(config.flowchart);
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRendererV2.setConf(cnf.flowchart);
flowRendererV2.draw(txt, id, false);
break;
case 'sequence':
config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
if (config.sequenceDiagram) {
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
if (cnf.sequenceDiagram) {
// backwards compatibility
sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));
sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
console.error(
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
);
} else {
sequenceRenderer.setConf(config.sequence);
sequenceRenderer.setConf(cnf.sequence);
}
sequenceRenderer.draw(txt, id);
break;
case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
ganttRenderer.setConf(config.gantt);
cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
ganttRenderer.setConf(cnf.gantt);
ganttRenderer.draw(txt, id);
break;
case 'class':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
classRenderer.setConf(config.class);
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classRenderer.setConf(cnf.class);
classRenderer.draw(txt, id);
break;
case 'state':
// config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
stateRenderer.setConf(config.state);
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateRenderer.setConf(cnf.state);
stateRenderer.draw(txt, id);
break;
case 'stateDiagram':
// config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
stateRendererV2.setConf(config.state);
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateRendererV2.setConf(cnf.state);
stateRendererV2.draw(txt, id);
break;
case 'info':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
infoRenderer.setConf(config.class);
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
infoRenderer.setConf(cnf.class);
infoRenderer.draw(txt, id, pkg.version);
break;
case 'pie':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
pieRenderer.setConf(config.class);
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
pieRenderer.setConf(cnf.class);
pieRenderer.draw(txt, id, pkg.version);
break;
case 'er':
erRenderer.setConf(config.er);
erRenderer.setConf(cnf.er);
erRenderer.draw(txt, id, pkg.version);
break;
case 'journey':
journeyRenderer.setConf(config.journey);
journeyRenderer.setConf(cnf.journey);
journeyRenderer.draw(txt, id, pkg.version);
break;
}
} catch (e) {
errorRenderer.setConf(config.class);
// errorRenderer.setConf(cnf.class);
errorRenderer.draw(id, pkg.version);
throw e;
}
@ -876,7 +880,7 @@ const render = function(id, _txt, cb, container) {
.selectAll('foreignobject > *')
.attr('xmlns', 'http://www.w3.org/1999/xhtml');
// if (config.arrowMarkerAbsolute) {
// if (cnf.arrowMarkerAbsolute) {
// url =
// window.location.protocol +
// '//' +
@ -889,8 +893,8 @@ const render = function(id, _txt, cb, container) {
// Fix for when the base tag is used
let svgCode = select('#d' + id).node().innerHTML;
if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
logger.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') {
svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
}
@ -925,53 +929,36 @@ const render = function(id, _txt, cb, container) {
return svgCode;
};
const setConf = function(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
const lvl1Keys = Object.keys(cnf);
for (let i = 0; i < lvl1Keys.length; i++) {
if (typeof cnf[lvl1Keys[i]] === 'object' && cnf[lvl1Keys[i]] != null) {
const lvl2Keys = Object.keys(cnf[lvl1Keys[i]]);
for (let j = 0; j < lvl2Keys.length; j++) {
logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j]);
if (typeof config[lvl1Keys[i]] === 'undefined') {
config[lvl1Keys[i]] = {};
}
logger.debug(
'Setting config: ' +
lvl1Keys[i] +
' ' +
lvl2Keys[j] +
' to ' +
cnf[lvl1Keys[i]][lvl2Keys[j]]
);
config[lvl1Keys[i]][lvl2Keys[j]] = cnf[lvl1Keys[i]][lvl2Keys[j]];
}
} else {
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
};
function reinitialize(options) {
// console.log('re-initialize ', options.logLevel, cnf.logLevel, getConfig().logLevel);
if (typeof options === 'object') {
setConf(options);
// setConf(options);
setConfig(options);
}
setConfig(config);
setLogLevel(config.logLevel);
// setConfig(config);
setLogLevel(getConfig().logLevel);
logger.debug('RE-Initializing mermaidAPI ', { version: pkg.version, options, config });
}
let firstInit = true;
function initialize(options) {
let _config = config;
logger.debug('Initializing mermaidAPI ', { version: pkg.version, options, _config });
// Update default config with options supplied at initialization
console.log('mermaidAPI.initialize');
// Set default options
if (typeof options === 'object') {
_config = Object.assign(_config, options);
setConf(_config);
if (firstInit) {
firstInit = false;
setConfig(config);
}
setConfig(options);
}
setConfig(_config);
setLogLevel(_config.logLevel);
console.warn('Initializing mermaidAPI theme', {
version: pkg.version,
options,
config,
current: getConfig().theme
});
setLogLevel(getConfig().logLevel);
}
// function getConfig () {
@ -984,7 +971,12 @@ const mermaidAPI = {
parse,
initialize,
reinitialize,
getConfig
getConfig,
setConfig,
reset: () => {
// console.warn('reset');
firstInit = true;
}
};
export default mermaidAPI;

7
src/mermaidAPI.spec.js
View File

@ -26,8 +26,13 @@ describe('when using mermaidAPI and ', function() {
};
mermaidAPI.initialize({ testObject: object });
let config = mermaidAPI.getConfig();
console.log('1:', config);
expect(config.testObject.test1).toBe(1);
mermaidAPI.initialize({ testObject: { test3: true } });
const config = mermaidAPI.getConfig();
config = mermaidAPI.getConfig();
console.log(config);
expect(config.testObject.test1).toBe(1);
expect(config.testObject.test2).toBe(false);