Added auto wrap option (and grammar) for sequenceDiagrams

Added inline config and init(ialization) grammar
Added reinitialize functionality to mermaidAPI (not to be confused with initialize)
Added actorFontWeight, noteFontWeight, messageFontWeight, wrapEnabled, wrapPadding
Added wrapLabel and breakWord functions to intelligently wrap text based on a pixel-based width instead of column-based
  - The implementation is largely from Carys Mills: https://medium.com/@CarysMills/wrapping-svg-text-without-svg-2-ecbfb58f7ba4
  - Made slight modifications for mermaid-js
Fixed dark theme color inconsistencies for sequence diagrams
Removed !important from sequence scss as this prevents any client overrides
Fixed various invalid css values in sequence scss which prevented proper rendering of various elements
Added detectInit to utils for initialization json detection
Updated detectType to support the existence or absence of the intialization configuration
Updated calculateTextWidth to include fontWeight
This commit is contained in:
Chris Moran
2020-06-08 14:48:03 -04:00
parent 22b0ddfb42
commit bd11663e0a
15 changed files with 1192 additions and 741 deletions

View File

@@ -284,6 +284,11 @@ const config = {
* **Default value "Open-Sans", "sans-serif"**.
*/
actorFontFamily: '"Open-Sans", "sans-serif"',
/**
* This sets the font weight of the actor's description
* **Default value 400.
*/
actorFontWeight: 400,
/**
* This sets the font size of actor-attached notes.
* **Default value 14**.
@@ -294,6 +299,11 @@ const config = {
* **Default value "trebuchet ms", verdana, arial**.
*/
noteFontFamily: '"trebuchet ms", verdana, arial',
/**
* This sets the font weight of the note's description
* **Default value 400.
*/
noteFontWeight: 400,
/**
* This sets the text alignment of actor-attached notes.
* **Default value center**.
@@ -308,7 +318,22 @@ const config = {
* This sets the font family of actor messages.
* **Default value "trebuchet ms", verdana, arial**.
*/
messageFontFamily: '"trebuchet ms", verdana, arial'
messageFontFamily: '"trebuchet ms", verdana, arial',
/**
* This sets the font weight of the message's description
* **Default value 400.
*/
messageFontWeight: 400,
/**
* This sets the auto-wrap state for the diagram
* **Default value false.
*/
wrapEnabled: false,
/**
* This sets the auto-wrap padding for the diagram (sides only)
* **Default value 15.
*/
wrapPadding: 15
},
/**
@@ -710,6 +735,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
@@ -912,15 +941,27 @@ const setConf = function(cnf) {
}
};
function initialize(options) {
logger.debug('Initializing mermaidAPI ', pkg.version);
function reinitialize(options) {
let _config = getConfig();
if (typeof options === 'object') {
_config = Object.assign(_config, options);
setConf(_config);
}
setConfig(_config);
setLogLevel(_config.logLevel);
logger.debug('RE-Initializing mermaidAPI ', { version: pkg.version, options, _config });
}
function initialize(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') {
setConf(options);
_config = Object.assign(_config, options);
setConf(_config);
}
setConfig(config);
setLogLevel(config.logLevel);
setConfig(_config);
setLogLevel(_config.logLevel);
}
// function getConfig () {