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

Improved class styling for nodes

Browse Source 
Added unit testing
classDefs are now exported to the common style of the SVG
Styling is no longer copied from other mermaid SVGs on the same webpage
This commit is contained in:
Björn Weström
2014-12-14 22:15:47 +01:00
parent 6ef6d79b48
commit f656269a50
10 changed files with 539 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/utils.js
View File

@@ -30,26 +30,55 @@ module.exports.detectType = function(text,a){
* 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 {string} defaultStyle Default style definitions (for elements without classes)
* @param {object} Hash table of class definitions from the graph definition
*/
module.exports.cloneCssStyles = function(svg, defaultStyle){
var used = "";
module.exports.cloneCssStyles = function(svg, classes){
var usedStyles = "";
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var rules = sheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (typeof(rule.style) != "undefined") {
var elems = svg.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
used += rule.selectorText + " { " + rule.style.cssText + " }\n";
// Avoid multiple inclusion on pages with multiple graphs
if (sheets[i].title != 'mermaid-svg-internal-css') {
var rules = sheets[i].cssRules;
for (var j = 0; j < rules.length; j++) {
var rule = rules[j];
if (typeof(rule.style) != "undefined") {
var elems = svg.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
usedStyles += rule.selectorText + " { " + rule.style.cssText + " }\n";
}
}
}
}
}
var defaultStyles = "";
var embeddedStyles = "";
for (var className in classes) {
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
defaultStyles = '.node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
} else {
embeddedStyles += '.' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = "/* <![CDATA[ */\n" + defaultStyle + "\n" + used + "\n/* ]]> */";
svg.insertBefore(s, svg.firstChild);
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";
if (defaultStyles !== "") {
s.innerHTML += defaultStyles;
}
if (usedStyles !== "") {
s.innerHTML += usedStyles;
}
if (embeddedStyles !== "") {
s.innerHTML += embeddedStyles;
}
s.innerHTML += "/* ]]> */\n";
svg.insertBefore(s, svg.firstChild);
}
};