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

Revert of PR #1482

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-06-19 10:52:20 +02:00
parent 8e1e7fb314
commit 44d5009538
26 changed files with 593 additions and 1195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/mermaidAPI.js
View File

@@ -15,7 +15,7 @@ import scope from 'scope-css';
import pkg from '../package.json';
import { setConfig, getConfig } from './config';
import { logger, setLogLevel } from './logger';
import utils, { assignWithDepth } from './utils';
import utils from './utils';
import flowRenderer from './diagrams/flowchart/flowRenderer';
import flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';
import flowParser from './diagrams/flowchart/parser/flow';
@@ -49,7 +49,6 @@ 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']) {
@@ -557,17 +556,14 @@ const config = {
fontSize: 12
}
};
export const defaultConfig = Object.freeze(assignWithDepth({}, config));
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
config.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
setLogLevel(config.logLevel);
configApi.reset(config);
setConfig(config);
function parse(text) {
const graphInit = utils.detectInit(text);
if (graphInit) {
initialize(graphInit);
reinitialize(graphInit);
logger.debug('Init ', graphInit);
}
const graphType = utils.detectType(text);
@@ -637,7 +633,6 @@ function parse(text) {
};
parser.parse(text);
return parser;
}
export const encodeEntities = function(text) {
@@ -697,24 +692,18 @@ export const decodeEntities = function(text) {
* });
*```
* @param id the id of the element to be rendered
* @param _txt the graph definition
* @param txt the graph definition
* @param cb callback which is called after rendering is finished with the svg code as inparam.
* @param container selector to element in which a div with the graph temporarily will be inserted. In one is
* provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
* completed.
*/
const render = function(id, _txt, cb, container) {
const cnf = getConfig();
// Check the maximum allowed text size
let txt = _txt;
if (_txt.length > cnf.maxTextSize) {
if (_txt.length > config.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
}
const graphInit = utils.detectInit(txt);
if (graphInit) {
initialize(graphInit);
assignWithDepth(cnf, getConfig());
}
if (typeof container !== 'undefined') {
container.innerHTML = '';
@@ -722,7 +711,7 @@ const render = function(id, _txt, cb, container) {
select(container)
.append('div')
.attr('id', 'd' + id)
.attr('style', 'font-family: ' + cnf.fontFamily)
.attr('style', 'font-family: ' + config.fontFamily)
.append('svg')
.attr('id', id)
.attr('width', '100%')
@@ -752,6 +741,10 @@ const render = function(id, _txt, cb, container) {
txt = encodeEntities(txt);
const element = select('#d' + id).node();
const graphInit = utils.detectInit(txt);
if (graphInit) {
reinitialize(graphInit);
}
const graphType = utils.detectType(txt);
// insert inline style into svg
@@ -759,22 +752,22 @@ const render = function(id, _txt, cb, container) {
const firstChild = svg.firstChild;
// pre-defined theme
let style = themes[cnf.theme];
let style = themes[config.theme];
if (style === undefined) {
style = '';
}
// user provided theme CSS
if (cnf.themeCSS !== undefined) {
style += `\n${cnf.themeCSS}`;
if (config.themeCSS !== undefined) {
style += `\n${config.themeCSS}`;
}
// user provided theme CSS
if (cnf.fontFamily !== undefined) {
style += `\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;
if (config.fontFamily !== undefined) {
style += `\n:root { --mermaid-font-family: ${config.fontFamily}}`;
}
// user provided theme CSS
if (cnf.altFontFamily !== undefined) {
style += `\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;
if (config.altFontFamily !== undefined) {
style += `\n:root { --mermaid-alt-font-family: ${config.altFontFamily}}`;
}
// classDef
@@ -807,74 +800,74 @@ const render = function(id, _txt, cb, container) {
try {
switch (graphType) {
case 'git':
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
gitGraphRenderer.setConf(cnf.git);
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
gitGraphRenderer.setConf(config.git);
gitGraphRenderer.draw(txt, id, false);
break;
case 'flowchart':
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRenderer.setConf(cnf.flowchart);
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
flowRenderer.draw(txt, id, false);
break;
case 'flowchart-v2':
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
flowRendererV2.setConf(cnf.flowchart);
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRendererV2.setConf(config.flowchart);
flowRendererV2.draw(txt, id, false);
break;
case 'sequence':
cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
if (cnf.sequenceDiagram) {
config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
if (config.sequenceDiagram) {
// backwards compatibility
sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));
sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram));
console.error(
'`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'
);
} else {
sequenceRenderer.setConf(cnf.sequence);
sequenceRenderer.setConf(config.sequence);
}
sequenceRenderer.draw(txt, id);
break;
case 'gantt':
cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
ganttRenderer.setConf(cnf.gantt);
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
ganttRenderer.setConf(config.gantt);
ganttRenderer.draw(txt, id);
break;
case 'class':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
classRenderer.setConf(cnf.class);
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
classRenderer.setConf(config.class);
classRenderer.draw(txt, id);
break;
case 'state':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateRenderer.setConf(cnf.state);
// config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
stateRenderer.setConf(config.state);
stateRenderer.draw(txt, id);
break;
case 'stateDiagram':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
stateRendererV2.setConf(cnf.state);
// config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
stateRendererV2.setConf(config.state);
stateRendererV2.draw(txt, id);
break;
case 'info':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
infoRenderer.setConf(cnf.class);
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
infoRenderer.setConf(config.class);
infoRenderer.draw(txt, id, pkg.version);
break;
case 'pie':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
pieRenderer.setConf(cnf.class);
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
pieRenderer.setConf(config.class);
pieRenderer.draw(txt, id, pkg.version);
break;
case 'er':
erRenderer.setConf(cnf.er);
erRenderer.setConf(config.er);
erRenderer.draw(txt, id, pkg.version);
break;
case 'journey':
journeyRenderer.setConf(cnf.journey);
journeyRenderer.setConf(config.journey);
journeyRenderer.draw(txt, id, pkg.version);
break;
}
} catch (e) {
// errorRenderer.setConf(cnf.class);
errorRenderer.setConf(config.class);
errorRenderer.draw(id, pkg.version);
throw e;
}
@@ -883,7 +876,7 @@ const render = function(id, _txt, cb, container) {
.selectAll('foreignobject > *')
.attr('xmlns', 'http://www.w3.org/1999/xhtml');
// if (cnf.arrowMarkerAbsolute) {
// if (config.arrowMarkerAbsolute) {
// url =
// window.location.protocol +
// '//' +
@@ -896,8 +889,8 @@ const render = function(id, _txt, cb, container) {
// Fix for when the base tag is used
let svgCode = select('#d' + id).node().innerHTML;
logger.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);
if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') {
if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
}
@@ -932,36 +925,53 @@ const render = function(id, _txt, cb, container) {
return svgCode;
};
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']));
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]];
}
}
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 reinitialize(options) {
if (typeof options === 'object') {
setConf(options);
}
setConfig(config);
setLogLevel(config.logLevel);
logger.debug('RE-Initializing mermaidAPI ', { version: pkg.version, options, config });
}
function initialize(options) {
console.log(`mermaidAPI.initialize: v${pkg.version}`);
// Set default options
let _config = config;
logger.debug('Initializing mermaidAPI ', { version: pkg.version, options, _config });
// Update default config with options supplied at initialization
if (typeof options === 'object') {
assignWithDepth(config, options);
updateRendererConfigs(config);
_config = Object.assign(_config, options);
setConf(_config);
}
setConfig(config);
setLogLevel(config.logLevel);
logger.debug('mermaidAPI.initialize: ', config);
setConfig(_config);
setLogLevel(_config.logLevel);
}
// function getConfig () {
@@ -969,20 +979,13 @@ function initialize(options) {
// return config
// }
const mermaidAPI = Object.freeze({
const mermaidAPI = {
render,
parse,
initialize,
getConfig,
setConfig,
reset: () => {
// console.warn('reset');
configApi.reset(defaultConfig);
assignWithDepth(config, defaultConfig, { clobber: true });
updateRendererConfigs(config);
},
defaultConfig
});
reinitialize,
getConfig
};
export default mermaidAPI;
/**