#931 Last code standard fixes

This commit is contained in:
knsv
2019-09-12 12:59:13 -07:00
parent 0e8164d805
commit 7e5802e799
4 changed files with 497 additions and 452 deletions

View File

@@ -9,38 +9,38 @@
* In addition to the render function, a number of behavioral configuration options are available.
*
* @name mermaidAPI
*/
import * as d3 from 'd3'
import scope from 'scope-css'
import pkg from '../package.json'
import { setConfig, getConfig } from './config'
import { logger, setLogLevel } from './logger'
import utils from './utils'
import flowRenderer from './diagrams/flowchart/flowRenderer'
import flowParser from './diagrams/flowchart/parser/flow'
import flowDb from './diagrams/flowchart/flowDb'
import sequenceRenderer from './diagrams/sequence/sequenceRenderer'
import sequenceParser from './diagrams/sequence/parser/sequenceDiagram'
import sequenceDb from './diagrams/sequence/sequenceDb'
import ganttRenderer from './diagrams/gantt/ganttRenderer'
import ganttParser from './diagrams/gantt/parser/gantt'
import ganttDb from './diagrams/gantt/ganttDb'
import classRenderer from './diagrams/class/classRenderer'
import classParser from './diagrams/class/parser/classDiagram'
import classDb from './diagrams/class/classDb'
import gitGraphRenderer from './diagrams/git/gitGraphRenderer'
import gitGraphParser from './diagrams/git/parser/gitGraph'
import gitGraphAst from './diagrams/git/gitGraphAst'
import infoRenderer from './diagrams/info/infoRenderer'
import infoParser from './diagrams/info/parser/info'
import infoDb from './diagrams/info/infoDb'
import pieRenderer from './diagrams/pie/pieRenderer'
import pieParser from './diagrams/pie/parser/pie'
import pieDb from './diagrams/pie/pieDb'
*/
import * as d3 from 'd3';
import scope from 'scope-css';
import pkg from '../package.json';
import { setConfig, getConfig } from './config';
import { logger, setLogLevel } from './logger';
import utils from './utils';
import flowRenderer from './diagrams/flowchart/flowRenderer';
import flowParser from './diagrams/flowchart/parser/flow';
import flowDb from './diagrams/flowchart/flowDb';
import sequenceRenderer from './diagrams/sequence/sequenceRenderer';
import sequenceParser from './diagrams/sequence/parser/sequenceDiagram';
import sequenceDb from './diagrams/sequence/sequenceDb';
import ganttRenderer from './diagrams/gantt/ganttRenderer';
import ganttParser from './diagrams/gantt/parser/gantt';
import ganttDb from './diagrams/gantt/ganttDb';
import classRenderer from './diagrams/class/classRenderer';
import classParser from './diagrams/class/parser/classDiagram';
import classDb from './diagrams/class/classDb';
import gitGraphRenderer from './diagrams/git/gitGraphRenderer';
import gitGraphParser from './diagrams/git/parser/gitGraph';
import gitGraphAst from './diagrams/git/gitGraphAst';
import infoRenderer from './diagrams/info/infoRenderer';
import infoParser from './diagrams/info/parser/info';
import infoDb from './diagrams/info/infoDb';
import pieRenderer from './diagrams/pie/pieRenderer';
import pieParser from './diagrams/pie/parser/pie';
import pieDb from './diagrams/pie/pieDb';
const themes = {}
const themes = {};
for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
themes[themeName] = require(`./themes/${themeName}/index.scss`)
themes[themeName] = require(`./themes/${themeName}/index.scss`);
}
/**
@@ -75,22 +75,21 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
* @name Configuration
*/
const config = {
/** theme , the CSS style sheet
*
* **theme** - Choose one of the built-in themes:
* * default
* * forest
* * dark
* * neutral.
* To disable any pre-defined mermaid theme, use "null".
*
* **themeCSS** - Use your own CSS. This overrides **theme**.
* <pre>
* "theme": "forest",
* "themeCSS": ".node rect { fill: red; }"
* </pre>
*/
*
* **theme** - Choose one of the built-in themes:
* * default
* * forest
* * dark
* * neutral.
* To disable any pre-defined mermaid theme, use "null".
*
* **themeCSS** - Use your own CSS. This overrides **theme**.
* <pre>
* "theme": "forest",
* "themeCSS": ".node rect { fill: red; }"
* </pre>
*/
theme: 'default',
themeCSS: undefined,
@@ -149,7 +148,6 @@ const config = {
* The object containing configurations specific for sequence diagrams
*/
sequence: {
/**
* margin to the right and left of the sequence diagram.
* **Default value 50**.
@@ -234,7 +232,6 @@ const config = {
* **Default value false**.
*/
showSequenceNumbers: false
},
/**
@@ -303,100 +300,100 @@ const config = {
},
class: {},
git: {}
}
};
setLogLevel(config.logLevel)
setConfig(config)
setLogLevel(config.logLevel);
setConfig(config);
function parse (text) {
const graphType = utils.detectType(text)
let parser
function parse(text) {
const graphType = utils.detectType(text);
let parser;
logger.debug('Type ' + graphType)
logger.debug('Type ' + graphType);
switch (graphType) {
case 'git':
parser = gitGraphParser
parser.parser.yy = gitGraphAst
break
parser = gitGraphParser;
parser.parser.yy = gitGraphAst;
break;
case 'flowchart':
parser = flowParser
parser.parser.yy = flowDb
break
parser = flowParser;
parser.parser.yy = flowDb;
break;
case 'sequence':
parser = sequenceParser
parser.parser.yy = sequenceDb
break
parser = sequenceParser;
parser.parser.yy = sequenceDb;
break;
case 'gantt':
parser = ganttParser
parser.parser.yy = ganttDb
break
parser = ganttParser;
parser.parser.yy = ganttDb;
break;
case 'class':
parser = classParser
parser.parser.yy = classDb
break
parser = classParser;
parser.parser.yy = classDb;
break;
case 'info':
logger.debug('info info info')
console.warn('In API', pkg.version)
logger.debug('info info info');
console.warn('In API', pkg.version);
parser = infoParser
parser.parser.yy = infoDb
break
parser = infoParser;
parser.parser.yy = infoDb;
break;
case 'pie':
logger.debug('pie')
parser = pieParser
parser.parser.yy = pieDb
break
logger.debug('pie');
parser = pieParser;
parser.parser.yy = pieDb;
break;
}
parser.parser.yy.parseError = (str, hash) => {
const error = { str, hash }
throw error
}
const error = { str, hash };
throw error;
};
parser.parse(text)
parser.parse(text);
}
export const encodeEntities = function (text) {
let txt = text
export const encodeEntities = function(text) {
let txt = text;
txt = txt.replace(/style.*:\S*#.*;/g, function (s) {
const innerTxt = s.substring(0, s.length - 1)
return innerTxt
})
txt = txt.replace(/classDef.*:\S*#.*;/g, function (s) {
const innerTxt = s.substring(0, s.length - 1)
return innerTxt
})
txt = txt.replace(/style.*:\S*#.*;/g, function(s) {
const innerTxt = s.substring(0, s.length - 1);
return innerTxt;
});
txt = txt.replace(/classDef.*:\S*#.*;/g, function(s) {
const innerTxt = s.substring(0, s.length - 1);
return innerTxt;
});
txt = txt.replace(/#\w+;/g, function (s) {
const innerTxt = s.substring(1, s.length - 1)
txt = txt.replace(/#\w+;/g, function(s) {
const innerTxt = s.substring(1, s.length - 1);
const isInt = /^\+?\d+$/.test(innerTxt)
const isInt = /^\+?\d+$/.test(innerTxt);
if (isInt) {
return 'fl°°' + innerTxt + '¶ß'
return 'fl°°' + innerTxt + '¶ß';
} else {
return 'fl°' + innerTxt + '¶ß'
return 'fl°' + innerTxt + '¶ß';
}
})
});
return txt
}
return txt;
};
export const decodeEntities = function (text) {
let txt = text
export const decodeEntities = function(text) {
let txt = text;
txt = txt.replace(/fl°°/g, function () {
return '&#'
})
txt = txt.replace(/fl°/g, function () {
return '&'
})
txt = txt.replace(/¶ß/g, function () {
return ';'
})
txt = txt.replace(/fl°°/g, function() {
return '&#';
});
txt = txt.replace(/fl°/g, function() {
return '&';
});
txt = txt.replace(/¶ß/g, function() {
return ';';
});
return txt
}
return txt;
};
/**
* Function that renders an svg with a graph from a chart definition. Usage example below.
*
@@ -419,183 +416,209 @@ export const decodeEntities = function (text) {
* 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 render = function(id, txt, cb, container) {
if (typeof container !== 'undefined') {
container.innerHTML = ''
container.innerHTML = '';
d3.select(container).append('div')
d3.select(container)
.append('div')
.attr('id', 'd' + id)
.append('svg')
.attr('id', id)
.attr('width', '100%')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.append('g')
.append('g');
} else {
const element = document.querySelector('#' + 'd' + id)
const element = document.querySelector('#' + 'd' + id);
if (element) {
element.innerHTML = ''
element.innerHTML = '';
}
d3.select('body').append('div')
d3.select('body')
.append('div')
.attr('id', 'd' + id)
.append('svg')
.attr('id', id)
.attr('width', '100%')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.append('g')
.append('g');
}
window.txt = txt
txt = encodeEntities(txt)
window.txt = txt;
txt = encodeEntities(txt);
const element = d3.select('#d' + id).node()
const graphType = utils.detectType(txt)
const element = d3.select('#d' + id).node();
const graphType = utils.detectType(txt);
// insert inline style into svg
const svg = element.firstChild
const firstChild = svg.firstChild
const svg = element.firstChild;
const firstChild = svg.firstChild;
// pre-defined theme
let style = themes[config.theme]
let style = themes[config.theme];
if (style === undefined) {
style = ''
style = '';
}
// user provided theme CSS
if (config.themeCSS !== undefined) {
style += `\n${config.themeCSS}`
style += `\n${config.themeCSS}`;
}
// classDef
if (graphType === 'flowchart') {
const classes = flowRenderer.getClasses(txt)
const classes = flowRenderer.getClasses(txt);
for (const className in classes) {
style += `\n.${className} > * { ${classes[className].styles.join(' !important; ')} !important; }`
style += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
}
}
const style1 = document.createElement('style')
style1.innerHTML = scope(style, `#${id}`)
svg.insertBefore(style1, firstChild)
const style1 = document.createElement('style');
style1.innerHTML = scope(style, `#${id}`);
svg.insertBefore(style1, firstChild);
const style2 = document.createElement('style')
const cs = window.getComputedStyle(svg)
const style2 = document.createElement('style');
const cs = window.getComputedStyle(svg);
style2.innerHTML = `#${id} {
color: ${cs.color};
font: ${cs.font};
}`
svg.insertBefore(style2, firstChild)
}`;
svg.insertBefore(style2, firstChild);
switch (graphType) {
case 'git':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
gitGraphRenderer.setConf(config.git)
gitGraphRenderer.draw(txt, id, false)
break
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
gitGraphRenderer.setConf(config.git);
gitGraphRenderer.draw(txt, id, false);
break;
case 'flowchart':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
flowRenderer.setConf(config.flowchart)
flowRenderer.draw(txt, id, false)
break
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
flowRenderer.draw(txt, id, false);
break;
case 'sequence':
config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute
if (config.sequenceDiagram) { // backwards compatibility
sequenceRenderer.setConf(Object.assign(config.sequence, config.sequenceDiagram))
console.error('`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.')
config.sequence.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
if (config.sequenceDiagram) {
// backwards compatibility
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(config.sequence)
sequenceRenderer.setConf(config.sequence);
}
sequenceRenderer.draw(txt, id)
break
sequenceRenderer.draw(txt, id);
break;
case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute
ganttRenderer.setConf(config.gantt)
ganttRenderer.draw(txt, id)
break
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
ganttRenderer.setConf(config.gantt);
ganttRenderer.draw(txt, id);
break;
case 'class':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute
classRenderer.setConf(config.class)
classRenderer.draw(txt, id)
break
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
classRenderer.setConf(config.class);
classRenderer.draw(txt, id);
break;
case 'info':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute
infoRenderer.setConf(config.class)
infoRenderer.draw(txt, id, pkg.version)
break
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
infoRenderer.setConf(config.class);
infoRenderer.draw(txt, id, pkg.version);
break;
case 'pie':
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute
pieRenderer.setConf(config.class)
pieRenderer.draw(txt, id, pkg.version)
break
config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
pieRenderer.setConf(config.class);
pieRenderer.draw(txt, id, pkg.version);
break;
}
d3.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
d3.select(`[id="${id}"]`)
.selectAll('foreignobject > *')
.attr('xmlns', 'http://www.w3.org/1999/xhtml');
let url = ''
let url = '';
if (config.arrowMarkerAbsolute) {
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search
url = url.replace(/\(/g, '\\(')
url = url.replace(/\)/g, '\\)')
url =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
window.location.search;
url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)');
}
// Fix for when the base tag is used
let svgCode = d3.select('#d' + id).node().innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g')
let svgCode = d3
.select('#d' + id)
.node()
.innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
svgCode = decodeEntities(svgCode)
svgCode = decodeEntities(svgCode);
if (typeof cb !== 'undefined') {
switch (graphType) {
case 'flowchart':
cb(svgCode, flowDb.bindFunctions)
break
cb(svgCode, flowDb.bindFunctions);
break;
case 'gantt':
cb(svgCode, ganttDb.bindFunctions)
break
cb(svgCode, ganttDb.bindFunctions);
break;
default:
cb(svgCode)
cb(svgCode);
}
} else {
logger.debug('CB = undefined!')
logger.debug('CB = undefined!');
}
const node = d3.select('#d' + id).node()
const node = d3.select('#d' + id).node();
if (node !== null && typeof node.remove === 'function') {
d3.select('#d' + id).node().remove()
d3.select('#d' + id)
.node()
.remove();
}
return svgCode
}
return svgCode;
};
const setConf = function (cnf) {
const setConf = function(cnf) {
// Top level initially mermaid, gflow, sequenceDiagram and gantt
const lvl1Keys = Object.keys(cnf)
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]])
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]] = {}
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]]
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]]
config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
}
}
}
};
function initialize (options) {
logger.debug('Initializing mermaidAPI ', pkg.version)
function initialize(options) {
logger.debug('Initializing mermaidAPI ', pkg.version);
// Update default config with options supplied at initialization
if (typeof options === 'object') {
setConf(options)
setConf(options);
}
setConfig(config)
setLogLevel(config.logLevel)
setConfig(config);
setLogLevel(config.logLevel);
}
// function getConfig () {
@@ -608,9 +631,9 @@ const mermaidAPI = {
parse,
initialize,
getConfig
}
};
export default mermaidAPI
export default mermaidAPI;
/**
* ## mermaidAPI configuration defaults
* <pre>