mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improved CSS cloning 

Better separation of styles between multiple mermaid SVGs on the same
page
Added support for text label styling
This commit is contained in:
Björn Weström 2015-01-14 00:04:38 +01:00
parent 3fe38237e6
commit 84124c9427
2 changed files with 30 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/utils.js
View File

@ -59,17 +59,17 @@ module.exports.cloneCssStyles = function(svg, classes){
if (classes.hasOwnProperty(className) && typeof(className) != "undefined") {
if (className === 'default') {
if (classes.default.styles instanceof Array) {
defaultStyles += '.node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node' + ' { ' + classes[className].styles.join("; ") + '; }\n';
}
if (classes.default.nodeLabelStyles instanceof Array) {
defaultStyles += '.node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .node text ' + ' { ' + classes[className].nodeLabelStyles.join("; ") + '; }\n';
}
if (classes.default.edgeLabelStyles instanceof Array) {
defaultStyles += '.edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join("; ") + '; }\n';
defaultStyles += "#" + svg.id.trim() + ' .edgeLabel text ' + ' { ' + classes[className].edgeLabelStyles.join("; ") + '; }\n';
}
} else {
if (classes[className].styles instanceof Array) {
embeddedStyles += '.' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
embeddedStyles += "#" + svg.id.trim() + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';
}
}
}
@ -81,7 +81,6 @@ module.exports.cloneCssStyles = function(svg, classes){
s.setAttribute('title', 'mermaid-svg-internal-css');
s.innerHTML = "/* <![CDATA[ */\n";
// Make this CSS local to this SVG
s.innerHTML += "#" + svg.id.trim() + " {\n";
if (defaultStyles !== "") {
s.innerHTML += defaultStyles;
}
@ -91,43 +90,7 @@ module.exports.cloneCssStyles = function(svg, classes){
if (embeddedStyles !== "") {
s.innerHTML += embeddedStyles;
}
s.innerHTML += "}\n";
s.innerHTML += "/* ]]> */\n";
svg.insertBefore(s, svg.firstChild);
}
};
var equals = function (val, variable){
if(typeof variable === 'undefined'){
return false;
}
else{
return (val === variable);
}
};
var mermaid_config_exists = function() {
return (typeof mermaid_config !== 'undefined');
};
var mermaid_config_item_exists = function(item) {
return mermaid_config_exists() && (typeof mermaid_config[item] !== 'undefined');
};
module.exports.config = {};
module.exports.config.startOnLoad = function() {
if (mermaid_config_item_exists(startOnLoad)) {
return mermaid_config.startOnLoad === true;
} else {
return false;
}
};
module.exports.config.labelStyle = function() {
if (mermaid_config_item_exists(labelStyle)) {
return mermaid_config.labelStyle === 'html';
} else {
return false;
}
};

76
src/utils.spec.js
View File

@ -84,26 +84,23 @@ describe('when cloning CSS ',function() {
return styleArrTrim;
}
function addStyleToDocument(title) {
function addStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var s = document.createElement('style');
s.setAttribute('title', title);
s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n';
document.body.appendChild(s);
document.styleSheets[styleSheetCount].title = title;
}
function addSecondStyleToDocument(title) {
function addSecondStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var s = document.createElement('style');
s.setAttribute('title', title);
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n';
document.body.appendChild(s);
document.styleSheets[styleSheetCount].title = title;
}
function generateSVG() {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
var g1 = document.createElement('g');
g1.setAttribute('class', 'node');
svg.appendChild(g1);
@ -113,30 +110,22 @@ describe('when cloning CSS ',function() {
return svg;
}
function addSVGwithStyleToDocument() {
var svg = document.createElement('svg');
var s = document.createElement('style');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfb; }\n';
svg.appendChild(s);
document.body.appendChild(svg);
}
function addMermaidSVGwithStyleToDocument() {
var styleSheetCount = document.styleSheets.length;
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-03');
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.setAttribute('title', 'mermaid-svg-internal-css');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
s.innerHTML = '#mermaid-05 .node2 { stroke:#eee; }\n.node-square { stroke:#bfe; }\n';
svg.appendChild(s);
document.body.appendChild(svg);
// The Mock-browser seems not to support stylesheets title attribute, so we add it manually
var sheets = document.styleSheets;
sheets[styleSheetCount].title = "mermaid-svg-internal-css";
document.styleSheets[styleSheetCount].title = 'mermaid-svg-internal-css';
}
it('should handle an empty set of classes', function () {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
utils.cloneCssStyles(svg, {});
// Should not create style element if not needed
@ -145,57 +134,43 @@ describe('when cloning CSS ',function() {
it('should handle a default class', function () {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }']);
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }' ]);
// Also verify the elements around the styling
expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n.node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
expect(svg.innerHTML).toBe('<style type="text/css" title="mermaid-svg-internal-css">/* <![CDATA[ */\n#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }\n/* ]]> */\n</style>');
});
it('should handle stylesheet in document with no classes in SVG', function () {
var svg = document.createElement('svg');
svg.setAttribute('id', 'mermaid-01');
addStyleToDocument('mermaid');
utils.cloneCssStyles(svg, {});
// Should not create style element if not needed
expect(svg.innerHTML).toBe('');
});
it('should ignore non-mermaid stylesheet in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument('non-mermaid');
utils.cloneCssStyles(svg, {});
expect(svg.innerHTML).toBe('<g class="node"></g><g class="node-square"></g>');
});
it('should handle stylesheet in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
});
it('should handle multiple stylesheets in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addSecondStyleToDocument('mermaid');
addStyleToDocument();
addSecondStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
});
it('should handle multiple stylesheets + ignore styles in other SVG', function () {
it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addSecondStyleToDocument('mermaid');
addSVGwithStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
});
it('should handle multiple stylesheets + ignore styles in mermaid SVG', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addSecondStyleToDocument('mermaid');
addSVGwithStyleToDocument();
addStyleToDocument();
addSecondStyleToDocument();
addMermaidSVGwithStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual([ '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
@ -203,22 +178,23 @@ describe('when cloning CSS ',function() {
it('should handle a default class together with stylesheet in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addStyleToDocument();
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
});
xit('should handle a default class together with stylesheet in document and classDefs', function () {
it('should handle a default class together with stylesheet in document and classDefs', function () {
var svg = generateSVG();
addStyleToDocument('mermaid');
addStyleToDocument();
utils.cloneCssStyles(svg, { "default": { "styles": ["stroke:#fff","stroke-width:1.5px"] },
"node-square": { "styles": ["fill:#eee", "stroke:#aaa"] },
"node-circle": { "styles": ["fill:#444", "stroke:#111"] } });
expect(stylesToArray(svg)).toEqual([ '.node { stroke:#fff; stroke-width:1.5px; }',
expect(stylesToArray(svg)).toEqual([ '#mermaid-01 .node { stroke:#fff; stroke-width:1.5px; }',
'.node { stroke: #eee; }',
'.node-square { stroke: #bbb; }',
'.node-square { fill:#eee; stroke:#aaa; }',
'.node-circle { fill:#444; stroke:#111; }' ]);
'#mermaid-01 .node-square { fill:#eee; stroke:#aaa; }',
'#mermaid-01 .node-circle { fill:#444; stroke:#111; }'
]);
});
});