marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-05 23:29:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix for issues #249. Adding configuration option for when to use absolute references for arrow heads. Default is off.

Browse Source 
Jasmine tests running in browser via karma.
This commit is contained in:
knsv
2015-11-21 11:51:15 +01:00
parent 4eb38e4cfd
commit 51858c02eb
25 changed files with 585 additions and 598 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/diagrams/classDiagram/classDiagram.spec.js
View File

@@ -11,96 +11,96 @@ describe('class diagram, ', function () {
});
it('should handle relation definitions', function () {
var str = `classDiagram
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class1`;
var str = 'classDiagram\n'+
'Class01 <|-- Class02\n'+
'Class03 *-- Class04\n'+
'Class05 o-- Class06\n'+
'Class07 .. Class08\n'+
'Class09 -- Class1';
cd.parse(str);
});
it('should handle relation definition of different types and directions', function () {
var str = `classDiagram
Class11 <|.. Class12
Class13 --> Class14
Class15 ..> Class16
Class17 ..|> Class18
Class19 <--* Class20`;
var str = 'classDiagram\n'+
'Class11 <|.. Class12\n'+
'Class13 --> Class14\n'+
'Class15 ..> Class16\n'+
'Class17 ..|> Class18\n'+
'Class19 <--* Class20';
cd.parse(str);
});
it('should handle cardinality and labels', function () {
var str = `classDiagram
Class01 "1" *-- "many" Class02 : contains
Class03 o-- Class04 : aggregation
Class05 --> "1" Class06`;
var str = 'classDiagram\n'+
'Class01 "1" *-- "many" Class02 : contains\n'+
'Class03 o-- Class04 : aggregation\n'+
'Class05 --> "1" Class06';
cd.parse(str);
});
it('should handle class definitions', function () {
var str = `classDiagram
class Car
Driver -- Car : drives >
Car *-- Wheel : have 4 >
Car -- Person : < owns`;
var str = 'classDiagram\n'+
'class Car\n'+
'Driver -- Car : drives >\n'+
'Car *-- Wheel : have 4 >\n'+
'Car -- Person : < owns';
cd.parse(str);
});
it('should handle method statements', function () {
var str = `classDiagram
Object <|-- ArrayList
Object : equals()
ArrayList : Object[] elementData
ArrayList : size()`;
var str = 'classDiagram\n'+
'Object <|-- ArrayList\n'+
'Object : equals()\n'+
'ArrayList : Object[] elementData\n'+
'ArrayList : size()';
cd.parse(str);
});
it('should handle parsing of method statements grouped by brackets', function () {
var str = `classDiagram
class Dummy {
String data
void methods()
}
class Flight {
flightNumber : Integer
departureTime : Date
}`;
var str = 'classDiagram\n'+
'class Dummy {\n'+
'String data\n'+
' void methods()\n'+
'}\n'+
'\n'+
'class Flight {\n'+
' flightNumber : Integer\n'+
' departureTime : Date\n'+
'}';
cd.parse(str);
});
it('should handle parsing of separators', function () {
var str = `classDiagram
class Foo1 {
You can use
several lines
..
as you want
and group
==
things together.
__
You can have as many groups
as you want
--
End of class
}
class User {
.. Simple Getter ..
+ getName()
+ getAddress()
.. Some setter ..
+ setName()
__ private data __
int age
-- encrypted --
String password
}`;
var str = 'classDiagram\n'+
'class Foo1 {\n'+
' You can use\n'+
' several lines\n'+
'..\n'+
'as you want\n'+
'and group\n'+
'==\n'+
'things together.\n'+
'__\n'+
'You can have as many groups\n'+
'as you want\n'+
'--\n'+
'End of class\n'+
'}\n'+
'\n'+
'class User {\n'+
'.. Simple Getter ..\n'+
'+ getName()\n'+
'+ getAddress()\n'+
'.. Some setter ..\n'+
'+ setName()\n'+
'__ private data __\n'+
'int age\n'+
'-- encrypted --\n'+
'String password\n'+
'}';
cd.parse(str);
});
@@ -116,8 +116,8 @@ class User {
cd.yy.clear();
});
it('should handle relation definitions EXTENSION', function () {
var str = `classDiagram
Class01 <|-- Class02`;
var str = 'classDiagram\n'+
'Class01 <|-- Class02';
cd.parse(str);
@@ -130,8 +130,8 @@ class User {
expect(relations[0].relation.lineType).toBe(cDDb.lineType.LINE);
});
it('should handle relation definitions AGGREGATION and dotted line', function () {
var str = `classDiagram
Class01 o.. Class02`;
var str = 'classDiagram\n'+
'Class01 o.. Class02';
cd.parse(str);
@@ -144,8 +144,8 @@ class User {
expect(relations[0].relation.lineType).toBe(cDDb.lineType.DOTTED_LINE);
});
it('should handle relation definitions COMPOSITION on both sides', function () {
var str = `classDiagram
Class01 *--* Class02`;
var str = 'classDiagram\n'+
'Class01 *--* Class02';
cd.parse(str);
@@ -158,8 +158,8 @@ class User {
expect(relations[0].relation.lineType).toBe(cDDb.lineType.LINE);
});
it('should handle relation definitions no types', function () {
var str = `classDiagram
Class01 -- Class02`;
var str = 'classDiagram\n'+
'Class01 -- Class02';
cd.parse(str);
@@ -172,8 +172,8 @@ class User {
expect(relations[0].relation.lineType).toBe(cDDb.lineType.LINE);
});
it('should handle relation definitions with type only on right side', function () {
var str = `classDiagram
Class01 --|> Class02`;
var str = 'classDiagram\n'+
'Class01 --|> Class02';
cd.parse(str);
@@ -187,12 +187,12 @@ class User {
});
it('should handle multiple classes and relation definitions', function () {
var str = `classDiagram
Class01 <|-- Class02
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- Class10`;
var str = 'classDiagram\n'+
'Class01 <|-- Class02\n'+
'Class03 *-- Class04\n'+
'Class05 o-- Class06\n'+
'Class07 .. Class08\n'+
'Class09 -- Class10';
cd.parse(str);

52
src/diagrams/classDiagram/classRenderer.js
View File

@@ -34,7 +34,6 @@ var getGraphId = function (label) {
return undefined;
}
window.tunk = getGraphId;
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
@@ -160,10 +159,12 @@ var drawEdge = function (elem, path, relation) {
.attr('d', lineFunction(lineData))
.attr('id', 'edge' + edgeCount)
.attr('class', 'relation');
var url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search;
url = url.replace(/\(/g, '\\(');
url = url.replace(/\)/g, '\\)');
var url = '';
if(conf.arrowMarkerAbsolute){
url = window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
url = url.replace(/\(/g,'\\(');
url = url.replace(/\)/g,'\\)');
}
//console.log(relation.relation.type1);
if (relation.relation.type1 !== 'none') {
@@ -265,10 +266,15 @@ var drawClass = function (elem, classDef) {
.attr('class', 'classText');
var isFirst = true;
for (var member of classDef.members) {
addTspan(members, member, isFirst);
isFirst = false;
}
classDef.members.forEach(function(member){
addTspan(members, member, isFirst);
isFirst = false;
});
//for (var member of classDef.members) {
// addTspan(members, member, isFirst);
// isFirst = false;
//}
console.warn(JSON.stringify(classDef));
@@ -287,10 +293,15 @@ var drawClass = function (elem, classDef) {
.attr('class', 'classText');
isFirst = true;
for (var method of classDef.methods) {
addTspan(methods, method, isFirst);
isFirst = false;
}
classDef.methods.forEach(function(method){
addTspan(methods, method, isFirst);
isFirst = false;
});
//for (var method of classDef.methods) {
// addTspan(methods, method, isFirst);
// isFirst = false;
//}
var classBox = g.node().getBBox();
g.insert('rect', ':first-child')
@@ -373,11 +384,16 @@ module.exports.draw = function (text, id) {
var relations = cDDb.getRelations();
var i = 0;
for (var relation of relations) {
i = i + 1;
log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation});
}
relations.forEach(function(relation){
i = i + 1;
log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation});
});
//for (var relation of relations) {
// i = i + 1;
// log.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation));
// g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation});
//}
dagre.layout(g);
g.nodes().forEach(function (v) {
if(typeof v !== 'undefined'){

6
src/diagrams/classDiagram/classRenderer.spec.js
View File

@@ -14,7 +14,7 @@
//};
//var classRenderer = proxyquire('./classRenderer', { '../../d3': d3 });
var testDom = require('testdom')('<html><body><div id="tst"></div></body></html>');
//var testDom = require('testdom')('<html><body><div id="tst"></div></body></html>');
var classRenderer = require('./classRenderer');
var parser = require('./parser/classDiagram').parser;
@@ -101,8 +101,8 @@ describe('class diagram, ', function () {
});
});
it('it should handle one actor', function () {
var str = `classDiagram
Class01 --|> Class02`;
var str = 'classDiagram\n'+
'Class01 --|> Class02';
//classRenderer.draw(str,'tst');

21
src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
View File

@@ -1,7 +1,8 @@
var proxyquire = require('proxyquire');
/**
* Created by knut on 14-11-18.
*/
var proxyquire = require('proxyquire');
//var proxyquire = require('proxyquire');
//var log = require('../../logger').create();
var sq = require('./parser/sequenceDiagram').parser;
@@ -18,6 +19,10 @@ var d3 = {
//var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 });
//
//
//var sd = require('./sequenceRenderer');
var str;
describe('when parsing a sequenceDiagram',function() {
beforeEach(function () {
@@ -574,14 +579,14 @@ describe('when rendering a sequenceDiagram',function() {
sq.yy = require('./sequenceDb');
sq.yy.clear();
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
//var MockBrowser = require('mock-browser').mocks.MockBrowser;
//var mock = new MockBrowser();
delete global.mermaid_config;
// and in the run-code inside some object
global.document = mock.getDocument();
global.window = mock.getWindow();
//global.document = mock.getDocument();
//global.window = mock.getWindow();
//parseError = function(err, hash) {
// log.debug('Syntax error:' + err);
@@ -632,6 +637,12 @@ describe('when rendering a sequenceDiagram',function() {
noteMargin:25
};
sd.setConf(conf);
//document.body.innerHTML = '<div id="tst"></div>';
//document.body.innerHTML = '<svg height="30" width="200"><text id="tst" x="0" y="15" fill="red">I love SVG!</text></svg>';
//document.body.innerHTML = '<svg height="30" width="200"><text x="0" y="15" fill="red"><tspan x="46" id="tst">Alice thinks</tspan></text></svg>';
//console.log('document.body');
//console.log(document.querySelector('#tst').getBBox());
});
it('it should handle one actor', function () {
sd.bounds.init();

9
src/diagrams/sequenceDiagram/sequenceRenderer.js
View File

@@ -225,9 +225,12 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
line.attr('class', 'messageLine0');
}
var url = window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
url = url.replace(/\(/g,'\\(');
url = url.replace(/\)/g,'\\)');
var url = '';
if(conf.arrowMarkerAbsolute){
url = window.location.protocol+'//'+window.location.host+window.location.pathname +window.location.search;
url = url.replace(/\(/g,'\\(');
url = url.replace(/\)/g,'\\)');
}
line.attr('stroke-width', 2);
line.attr('stroke', 'black');

1
src/diagrams/sequenceDiagram/svgDraw.js
View File

@@ -46,6 +46,7 @@ exports.drawText = function(elem, textData, width) {
//span.attr('dy', textData.dy);
span.text(nText);
if(typeof textElem.textwrap !== 'undefined'){
textElem.textwrap({
x: textData.x, // bounding box is 300 pixels from the left
y: textData.y, // bounding box is 400 pixels from the top

36
src/mermaid.spec.js
View File

@@ -4,7 +4,7 @@
/**
* Created by knut on 14-11-23.
*/
var rewire = require('rewire');
//var rewire = require('rewire');
var mermaid = require('./mermaid');
//var log = require('./logger').create();
@@ -14,19 +14,19 @@ describe('when using mermaid and ',function() {
//var document;
//var window;
beforeEach(function () {
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
delete global.mermaid_config;
// and in the run-code inside some object
global.document = mock.getDocument();
global.window = mock.getWindow();
//var MockBrowser = require('mock-browser').mocks.MockBrowser;
//var mock = new MockBrowser();
//
//delete global.mermaid_config;
//
//// and in the run-code inside some object
//global.document = mock.getDocument();
//global.window = mock.getWindow();
});
it('should not start rendering with mermaid_config.startOnLoad set to false', function () {
mermaid = rewire('./mermaid');
//mermaid = rewire('./mermaid');
global.mermaid_config ={startOnLoad : false};
document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
@@ -37,7 +37,7 @@ describe('when using mermaid and ',function() {
});
it('should not start rendering with mermaid.startOnLoad set to false', function () {
mermaid = rewire('./mermaid');
//mermaid = rewire('./mermaid');
global.mermaid.startOnLoad = false;
global.mermaid_config ={startOnLoad : true};
@@ -48,7 +48,7 @@ describe('when using mermaid and ',function() {
});
it('should start rendering with both startOnLoad set', function () {
mermaid = rewire('./mermaid');
//mermaid = rewire('./mermaid');
global.mermaid.startOnLoad = true;
global.mermaid_config ={startOnLoad : true};
document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
@@ -58,7 +58,7 @@ describe('when using mermaid and ',function() {
});
it('should start rendering with mermaid.startOnLoad set and no mermaid_config defined', function () {
mermaid = rewire('./mermaid');
//mermaid = rewire('./mermaid');
global.mermaid.startOnLoad = true;
document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
spyOn(global.mermaid,'init');
@@ -67,7 +67,7 @@ describe('when using mermaid and ',function() {
});
it('should start rendering as a default with no changes performed', function () {
mermaid = rewire('./mermaid');
//mermaid = rewire('./mermaid');
document.body.innerHTML = '<div class="mermaid">graph TD;\na;</div>';
spyOn(global.mermaid,'init');
mermaid.contentLoaded();
@@ -83,12 +83,12 @@ describe('when using mermaid and ',function() {
beforeEach(function () {
global.mermaid_config ={startOnLoad : false};
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
//var MockBrowser = require('mock-browser').mocks.MockBrowser;
//var mock = new MockBrowser();
flow.parser.yy =graph;
graph.clear();
global.document = mock.getDocument();
mermaid = rewire('./mermaid');
//global.document = mock.getDocument();
//mermaid = rewire('./mermaid');
});
it('it should handle edges with text', function () {
flow.parser.parse('graph TD;A-->|text ex|B;');

27
src/mermaidAPI.js
View File

@@ -64,6 +64,12 @@ var config = {
*/
startOnLoad: true,
/**
* **arrowMarkerAbsolute** - This options controls whether or arrow markers in html code will be absolute pats or
* an anchor, #. This matters if you are using base tag settings.
*/
arrowMarkerAbsolute: false,
/**
* ### flowchart
* *The object containing configurations specific for flowcharts*
@@ -225,7 +231,8 @@ var config = {
return d.getMonth();
}]
]
}
},
classDiagram:{}
};
Logger.setLogLevel(config.logLevel);
@@ -385,7 +392,7 @@ var render = function(id, txt, cb, container){
var classes = {};
switch(graphType){
case 'graph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
flowRenderer.draw(txt, id, false);
if(config.cloneCssStyles){
@@ -394,6 +401,7 @@ var render = function(id, txt, cb, container){
}
break;
case 'dotGraph':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
flowRenderer.setConf(config.flowchart);
flowRenderer.draw(txt, id, true);
if(config.cloneCssStyles) {
@@ -402,6 +410,7 @@ var render = function(id, txt, cb, container){
}
break;
case 'sequenceDiagram':
config.sequenceDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
seq.setConf(config.sequenceDiagram);
seq.draw(txt,id);
if(config.cloneCssStyles) {
@@ -409,6 +418,7 @@ var render = function(id, txt, cb, container){
}
break;
case 'gantt':
config.gantt.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
gantt.setConf(config.gantt);
gantt.draw(txt,id);
if(config.cloneCssStyles) {
@@ -416,13 +426,15 @@ var render = function(id, txt, cb, container){
}
break;
case 'classDiagram':
classRenderer.setConf(config.gantt);
config.classDiagram.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
classRenderer.setConf(config.classDiagram);
classRenderer.draw(txt,id);
if(config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []);
}
break;
case 'info':
config.info.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
info.draw(txt,id,exports.version());
if(config.cloneCssStyles) {
utils.cloneCssStyles(element.firstChild, []);
@@ -432,10 +444,13 @@ var render = function(id, txt, cb, container){
d3.select('#d'+id).selectAll('foreignobject div').attr('xmlns','http://www.w3.org/1999/xhtml');
var 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,'\\)');
}
var 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
var svgCode = d3.select('#d'+id).node().innerHTML.replace(/url\(#arrowhead/g,'url('+url +'#arrowhead','g');

12
src/mermaidAPI.spec.js
View File

@@ -13,14 +13,15 @@ describe('when using mermaidAPI and ',function() {
//var document;
//var window;
beforeEach(function () {
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
//var MockBrowser = require('mock-browser').mocks.MockBrowser;
//var mock = new MockBrowser();
delete global.mermaid_config;
// and in the run-code inside some object
global.document = mock.getDocument();
global.window = mock.getWindow();
//global.document = mock.getDocument();
//global.window = mock.getWindow();
document.body.innerHTML = '';
});
it('should copy a literal into the configuration', function () {
@@ -55,6 +56,7 @@ describe('when using mermaidAPI and ',function() {
});
describe('checking validity of input ', function(){
it('it should return false for an invalid definiton',function(){
global.mermaidAPI.parseError= function(){};
spyOn(global.mermaidAPI,'parseError');
var res = api.parse('this is not a mermaid diagram definition');
@@ -63,7 +65,7 @@ describe('when using mermaidAPI and ',function() {
});
it('it should return true for a valid definiton',function(){
spyOn(global.mermaidAPI,'parseError');
var res = global.mermaid.parse('graph TD;A--x|text including URL space|B;');
var res = api.parse('graph TD;A--x|text including URL space|B;');
expect(res).toBe(true);
expect(global.mermaidAPI.parseError).not.toHaveBeenCalled();

2
src/utils.js
View File

@@ -74,7 +74,7 @@ var cloneCssStyles = function(svg, classes){
var elems;
elems = svg.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
usedStyles += rule.selectorText + ' { ' + rule.style.cssText + ' }\n';
usedStyles += rule.selectorText + ' { ' + rule.style.cssText + '}\n';
}
}
}

41
src/utils.spec.js
View File

@@ -35,13 +35,13 @@ describe('when cloning CSS ', function () {
beforeEach(function () {
var MockBrowser = require('mock-browser').mocks.MockBrowser;
var mock = new MockBrowser();
//var MockBrowser = require('mock-browser').mocks.MockBrowser;
//var mock = new MockBrowser();
// and in the run-code inside some object
global.document = mock.getDocument();
//document.body.innerHTML = '';
//document.body.innerHTML = '';
//global.document = mock.getDocument();
document.body.innerHTML = '';
});
function stylesToArray(svg) {
@@ -62,6 +62,7 @@ describe('when cloning CSS ', function () {
styleArrTrim.splice(i, 1);
i--;
}
styleArrTrim[i] = styleArrTrim[i].trim();
}
return styleArrTrim;
@@ -69,13 +70,13 @@ describe('when cloning CSS ', function () {
function addStyleToDocument() {
var s = document.createElement('style');
s.innerHTML = '.node { stroke:#eee; }\n.node-square { stroke:#bbb; }\n';
s.innerHTML = '.node { stroke:#eeeeee; }\n.node-square { stroke:#bbbbbb; }\n';
document.body.appendChild(s);
}
function addSecondStyleToDocument() {
var s = document.createElement('style');
s.innerHTML = '.node2 { stroke:#eee; }\n.node-square { stroke:#beb; }\n';
s.innerHTML = '.node2 { stroke:#eeeeee; }\n.node-square { stroke:#beb; }\n';
document.body.appendChild(s);
}
@@ -151,7 +152,7 @@ describe('when cloning CSS ', function () {
var svg = generateSVG();
addStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee; }', '.node-square { stroke: #bbbbbb; }']);
});
it('should handle multiple stylesheets in document with classes in SVG', function () {
@@ -159,7 +160,7 @@ describe('when cloning CSS ', function () {
addStyleToDocument();
addSecondStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee; }', '.node-square { stroke: #bbbbbb; }', '.node-square { stroke: #bbeebb; }']);
});
it('should handle multiple stylesheets + ignore styles in other mermaid SVG', function () {
@@ -168,29 +169,29 @@ describe('when cloning CSS ', function () {
addSecondStyleToDocument();
addMermaidSVGwithStyleToDocument();
utils.cloneCssStyles(svg, {});
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eee; }', '.node-square { stroke: #bbb; }', '.node-square { stroke: #beb; }']);
expect(stylesToArray(svg)).toEqual(['.node { stroke: #eeeeee; }', '.node-square { stroke: #bbbbbb; }', '.node-square { stroke: #bbeebb; }']);
});
it('should handle a default class together with stylesheet in document with classes in SVG', function () {
var svg = generateSVG();
addStyleToDocument();
utils.cloneCssStyles(svg, {'default': {'styles': ['stroke:#fff', 'stroke-width:1.5px']}});
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }', '.node { stroke: #eee; }', '.node-square { stroke: #bbb; }']);
utils.cloneCssStyles(svg, {'default': {'styles': ['stroke:#ffffff', 'stroke-width:1.5px']}});
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }', '.node { stroke: #eeeeee; }', '.node-square { stroke: #bbbbbb; }']);
});
it('should handle a default class together with stylesheet in document and classDefs', function () {
var svg = generateSVG();
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']}
'default': {'styles': ['stroke:#ffffff', 'stroke-width:1.5px']},
'node-square': {'styles': ['fill:#eeeeee', 'stroke:#aaaaaa']},
'node-circle': {'styles': ['fill:#444444', 'stroke:#111111']}
});
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#fff; stroke-width:1.5px; }',
'.node { stroke: #eee; }',
'.node-square { stroke: #bbb; }',
'#mermaid-01 .node-square>rect { fill:#eee; stroke:#aaa; }',
'#mermaid-01 .node-circle>rect { fill:#444; stroke:#111; }'
expect(stylesToArray(svg)).toEqual(['#mermaid-01 .node>rect { stroke:#ffffff; stroke-width:1.5px; }',
'.node { stroke: #eeeeee; }',
'.node-square { stroke: #bbbbbb; }',
'#mermaid-01 .node-square>rect { fill:#eeeeee; stroke:#aaaaaa; }',
'#mermaid-01 .node-circle>rect { fill:#444444; stroke:#111111; }'
]);
});
});