2015-10-17 10:39:20 +02:00
|
|
|
/**
|
|
|
|
* Created by knut on 14-11-23.
|
|
|
|
*/
|
2015-11-15 15:06:24 +01:00
|
|
|
var Logger = require('./logger');
|
2017-04-01 13:51:03 +02:00
|
|
|
var log = Logger.Log;
|
2015-10-17 10:39:20 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @function detectType
|
|
|
|
* Detects the type of the graph text.
|
|
|
|
* ```mermaid
|
|
|
|
* graph LR
|
|
|
|
* a-->b
|
|
|
|
* b-->c
|
|
|
|
* c-->d
|
|
|
|
* d-->e
|
|
|
|
* e-->f
|
|
|
|
* f-->g
|
|
|
|
* g-->h
|
|
|
|
* ```
|
|
|
|
*
|
|
|
|
* @param {string} text The text defining the graph
|
|
|
|
* @returns {string} A graph definition key
|
|
|
|
*/
|
2015-10-17 12:46:36 +02:00
|
|
|
var detectType = function(text){
|
2015-10-17 10:39:20 +02:00
|
|
|
text = text.replace(/^\s*%%.*\n/g,'\n');
|
|
|
|
if(text.match(/^\s*sequenceDiagram/)){
|
|
|
|
return 'sequenceDiagram';
|
|
|
|
}
|
|
|
|
|
|
|
|
if(text.match(/^\s*digraph/)) {
|
|
|
|
//log.debug('Detected dot syntax');
|
|
|
|
return 'dotGraph';
|
|
|
|
}
|
|
|
|
|
|
|
|
if(text.match(/^\s*info/)) {
|
|
|
|
//log.debug('Detected info syntax');
|
|
|
|
return 'info';
|
|
|
|
}
|
|
|
|
|
|
|
|
if(text.match(/^\s*gantt/)) {
|
|
|
|
//log.debug('Detected info syntax');
|
|
|
|
return 'gantt';
|
|
|
|
}
|
|
|
|
|
2015-10-30 10:47:25 +01:00
|
|
|
if(text.match(/^\s*classDiagram/)) {
|
|
|
|
log.debug('Detected classDiagram syntax');
|
|
|
|
return 'classDiagram';
|
|
|
|
}
|
|
|
|
|
2016-03-29 05:03:38 +02:00
|
|
|
if(text.match(/^\s*gitGraph/)) {
|
|
|
|
log.debug('Detected gitGraph syntax');
|
|
|
|
return 'gitGraph';
|
|
|
|
}
|
2015-10-17 10:39:20 +02:00
|
|
|
return 'graph';
|
|
|
|
};
|
2015-11-15 15:06:24 +01:00
|
|
|
exports.detectType= detectType;
|
2015-10-17 10:39:20 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Copies all relevant CSS content into the graph SVG.
|
|
|
|
* This allows the SVG to be copied as is while keeping class based styling
|
|
|
|
* @param {element} svg The root element of the SVG
|
|
|
|
* @param {object} Hash table of class definitions from the graph definition
|
|
|
|
*/
|
|
|
|
var cloneCssStyles = function(svg, classes){
|
|
|
|
var usedStyles = '';
|
|
|
|
var sheets = document.styleSheets;
|
2015-10-17 12:46:36 +02:00
|
|
|
var rule;
|
2015-10-17 10:39:20 +02:00
|
|
|
for (var i = 0; i < sheets.length; i++) {
|
|
|
|
// Avoid multiple inclusion on pages with multiple graphs
|
|
|
|
if (sheets[i].title !== 'mermaid-svg-internal-css') {
|
|
|
|
try {
|
|
|
|
|
|
|
|
var rules = sheets[i].cssRules;
|
|
|
|
if (rules !== null) {
|
|
|
|
for (var j = 0; j < rules.length; j++) {
|
2015-10-17 12:46:36 +02:00
|
|
|
rule = rules[j];
|
2015-10-17 10:39:20 +02:00
|
|
|
if (typeof(rule.style) !== 'undefined') {
|
|
|
|
var elems;
|
|
|
|
elems = svg.querySelectorAll(rule.selectorText);
|
|
|
|
if (elems.length > 0) {
|
2015-11-21 11:51:15 +01:00
|
|
|
usedStyles += rule.selectorText + ' { ' + rule.style.cssText + '}\n';
|
2015-10-17 10:39:20 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-11-05 20:38:36 +01:00
|
|
|
catch (err) {
|
|
|
|
if (typeof(rule) !== 'undefined') {
|
2015-10-17 12:46:36 +02:00
|
|
|
log.warn('Invalid CSS selector "' + rule.selectorText + '"', err);
|
2015-10-17 10:39:20 +02:00
|
|
|
}
|
|
|
|
}
|
2016-03-29 05:03:38 +02:00
|
|
|
}
|
2015-10-17 10:39:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
var defaultStyles = '';
|
|
|
|
var embeddedStyles = '';
|
|
|
|
|
|
|
|
for (var className in classes) {
|
|
|
|
if (classes.hasOwnProperty(className) && typeof(className) != 'undefined') {
|
|
|
|
if (className === 'default') {
|
|
|
|
if (classes.default.styles instanceof Array) {
|
|
|
|
defaultStyles += '#' + svg.id.trim() + ' .node' + '>rect { ' + classes[className].styles.join('; ') + '; }\n';
|
|
|
|
}
|
|
|
|
if (classes.default.nodeLabelStyles instanceof Array) {
|
|
|
|
defaultStyles += '#' + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join('; ') + '; }\n';
|
|
|
|
}
|
|
|
|
if (classes.default.edgeLabelStyles instanceof Array) {
|
|
|
|
defaultStyles += '#' + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join('; ') + '; }\n';
|
|
|
|
}
|
|
|
|
if (classes.default.clusterStyles instanceof Array) {
|
|
|
|
defaultStyles += '#' + svg.id.trim() + ' .cluster rect ' + ' { ' + classes[className].clusterStyles.join('; ') + '; }\n';
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (classes[className].styles instanceof Array) {
|
2017-01-06 04:02:38 +01:00
|
|
|
embeddedStyles += '#' + svg.id.trim() + ' .' + className + '>rect, .' + className + '>polygon, .' + className + '>circle, .' + className + '>ellipse { ' + classes[className].styles.join('; ') + '; }\n';
|
2015-10-17 10:39:20 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (usedStyles !== '' || defaultStyles !== '' || embeddedStyles !== '') {
|
|
|
|
var s = document.createElement('style');
|
|
|
|
s.setAttribute('type', 'text/css');
|
|
|
|
s.setAttribute('title', 'mermaid-svg-internal-css');
|
|
|
|
s.innerHTML = '/* <![CDATA[ */\n';
|
|
|
|
// Make this CSS local to this SVG
|
|
|
|
if (defaultStyles !== '') {
|
|
|
|
s.innerHTML += defaultStyles;
|
|
|
|
}
|
|
|
|
if (usedStyles !== '') {
|
|
|
|
s.innerHTML += usedStyles;
|
|
|
|
}
|
|
|
|
if (embeddedStyles !== '') {
|
|
|
|
s.innerHTML += embeddedStyles;
|
|
|
|
}
|
|
|
|
s.innerHTML += '/* ]]> */\n';
|
|
|
|
svg.insertBefore(s, svg.firstChild);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2015-11-15 15:06:24 +01:00
|
|
|
exports.cloneCssStyles = cloneCssStyles;
|
2017-01-07 18:53:49 +01:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @function isSubstringInArray
|
|
|
|
* Detects whether a substring in present in a given array
|
|
|
|
* @param {string} str The substring to detect
|
|
|
|
* @param {array} arr The array to search
|
|
|
|
* @returns {number} the array index containing the substring or -1 if not present
|
|
|
|
**/
|
|
|
|
var isSubstringInArray = function (str, arr) {
|
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
|
|
if (arr[i].match(str)) return i;
|
|
|
|
}
|
|
|
|
return -1;
|
|
|
|
};
|
|
|
|
|
|
|
|
exports.isSubstringInArray = isSubstringInArray;
|