/g,">"),l=l.replace(/';var h=u.detectType(l);switch(h){case"graph":console.log("FC"),a.draw(l,c,!1),n.bindFunctions();break;case"dotGraph":a.draw(l,c,!0);break;case"sequenceDiagram":o.draw(l,c)}}}};r.tester=function(){},r.version=function(){return e("../package.json").version};var l=function(e,t){return"undefined"==typeof t?!1:e===t};"undefined"!=typeof document&&document.addEventListener("DOMContentLoaded",function(){"undefined"!=typeof mermaid_config?l(!0,mermaid_config.startOnLoad)&&c():c()},!1),t.mermaid={init:function(){c()},version:function(){return r.version()},getParser:function(){return i.parser}}}).call(this,"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../package.json":102,"./diagrams/flowchart/flowRenderer":103,"./diagrams/flowchart/graphDb":104,"./diagrams/flowchart/parser/flow":106,"./diagrams/sequenceDiagram/sequenceRenderer":109,"./utils":111,he:100}],111:[function(e,t){t.exports.detectType=function(e){return e.match(/^\s*sequenceDiagram/)?(console.log("Detected sequenceDiagram syntax"),"sequenceDiagram"):e.match(/^\s*sequence/)?"sequence":e.match(/^\s*digraph/)?(console.log("Detected flow syntax"),"dotGraph"):"graph"}},{}]},{},[110]);
\ No newline at end of file
diff --git a/src/diagrams/sequenceDiagram/sequenceDb.js b/src/diagrams/sequenceDiagram/sequenceDb.js
index 4ece1c24b..c6b051276 100644
--- a/src/diagrams/sequenceDiagram/sequenceDb.js
+++ b/src/diagrams/sequenceDiagram/sequenceDb.js
@@ -42,7 +42,8 @@ exports.clear = function(){
exports.LINETYPE = {
SOLID : 0,
- DOTTED : 1
+ DOTTED : 1,
+ NOTE : 2
};
exports.ARROWTYPE = {
@@ -60,6 +61,7 @@ exports.addNote = function (actor, placement, message){
var note = {actor:actor, placement: placement, message:message};
notes.push(note);
+ messages.push({from:actor, to:actor, message:message, type:exports.LINETYPE.NOTE});
};
diff --git a/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js b/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
index f098c4514..655aa37af 100644
--- a/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
+++ b/src/diagrams/sequenceDiagram/sequenceDiagram.spec.js
@@ -52,11 +52,11 @@ describe('when parsing a sequenceDiagram',function() {
var messages = sq.yy.getMessages();
- expect(messages.length).toBe(2);
- //console.log('messages');
- //console.log(messages);
+ expect(messages.length).toBe(3);
+ console.log('messages');
+ console.log(messages);
expect(messages[0].from).toBe('Alice');
- expect(messages[1].from).toBe('Bob');
+ expect(messages[2].from).toBe('Bob');
});
});
\ No newline at end of file
diff --git a/src/diagrams/sequenceDiagram/sequenceRenderer.js b/src/diagrams/sequenceDiagram/sequenceRenderer.js
index dd824d859..b2325527a 100644
--- a/src/diagrams/sequenceDiagram/sequenceRenderer.js
+++ b/src/diagrams/sequenceDiagram/sequenceRenderer.js
@@ -6,6 +6,57 @@
var sq = require('./parser/sequenceDiagram').parser;
sq.yy = require('./sequenceDb');
+/**
+ * Draws an actor in the diagram with the attaced line
+ * @param center - The center of the the actor
+ * @param pos The position if the actor in the liost of actors
+ * @param description The text in the box
+ */
+var drawNote = function(elem, startX, verticalPos, msg){
+ var insertLinebreaks = function (d) {
+ var el = d3.select(this);
+ var words = d.split(' ');
+ el.text('');
+
+ for (var i = 0; i < words.length; i++) {
+ var tspan = el.append('tspan').text(words[i]);
+ if (i > 0)
+ tspan.attr('x', 0).attr('dy', '15');
+ }
+ };
+
+ var g = elem.append("g");
+ var rectElem = g.append("rect")
+ .attr("x", startX + 25)
+ .attr("y", verticalPos -25)
+ .attr("fill", '#EDF2AE')
+ .attr("stroke", '#666')
+ .attr("width", 150)
+ .attr("height", 100)
+ .attr("rx", 0)
+ .attr("ry", 0);
+ var textElem = g.append("text")
+ .attr("x", startX + 10)
+ .attr("y", verticalPos - 15)
+ .style("text-anchor", "start");
+ msg.message.split('
').forEach(function(rowText){
+ textElem.append("tspan")
+ .attr("x", startX + 35)
+ .attr("dy", '1em')
+ .text(rowText);
+ });
+
+ console.log('textElem.height');
+ console.log(textElem[0][0].getBBox());
+ rectElem.attr('height',textElem[0][0].getBBox().height+20);
+ //console.log(textElem.getBBox().height);
+
+ //.text(msg.message + '\n' + msg.message)
+
+
+ return verticalPos + textElem[0][0].getBBox().height - 10;
+};
+
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text
@@ -74,37 +125,46 @@ module.exports.draw = function (text, id) {
var g = elem.append("g");
//Make an SVG Container
//Draw the line
- if(msg.type===1){
- g.append("line")
- .attr("x1", startx)
- .attr("y1", verticalPos)
- .attr("x2", stopx)
- .attr("y2", verticalPos)
- .attr("stroke-width", 2)
- .attr("stroke", "black")
- .style("stroke-dasharray", ("3, 3"))
- .attr("class", "link")
- .attr("marker-end", "url(#arrowhead)");
- //.attr("d", diagonal);
+ if(msg.type !== 2) {
+ if (msg.type === 1) {
+ g.append("line")
+ .attr("x1", startx)
+ .attr("y1", verticalPos)
+ .attr("x2", stopx)
+ .attr("y2", verticalPos)
+ .attr("stroke-width", 2)
+ .attr("stroke", "black")
+ .style("stroke-dasharray", ("3, 3"))
+ .attr("class", "link")
+ .attr("marker-end", "url(#arrowhead)");
+ //.attr("d", diagonal);
+ }
+ else {
+ g.append("line")
+ .attr("x1", startx)
+ .attr("y1", verticalPos)
+ .attr("x2", stopx)
+ .attr("y2", verticalPos)
+ .attr("stroke-width", 2)
+ .attr("stroke", "black")
+ .attr("class", "link")
+ .attr("marker-end", "url(#arrowhead)");
+ //.attr("d", diagonal);
+ }
+
+ g.append("text") // text label for the x axis
+ .attr("x", txtCenter)
+ .attr("y", verticalPos - 10)
+ .style("text-anchor", "middle")
+ .text(msg.message);
}
else{
- g.append("line")
- .attr("x1", startx)
- .attr("y1", verticalPos)
- .attr("x2", stopx)
- .attr("y2", verticalPos)
- .attr("stroke-width", 2)
- .attr("stroke", "black")
- .attr("class", "link")
- .attr("marker-end", "url(#arrowhead)");
- //.attr("d", diagonal);
+ g.append("text") // text label for the x axis
+ .attr("x", txtCenter)
+ .attr("y", verticalPos - 10)
+ .style("text-anchor", "middle")
+ .text(msg.message);
}
-
- g.append("text") // text label for the x axis
- .attr("x", txtCenter)
- .attr("y", verticalPos-10)
- .style("text-anchor", "middle")
- .text(msg.message);
};
// Fetch data from the parsing
@@ -146,7 +206,15 @@ module.exports.draw = function (text, id) {
var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/2;
- drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);
+ if(msg.type === 2){
+ console.log('VP before:',verticalPos);
+ verticalPos = drawNote(diagram, startx, verticalPos, msg);
+ console.log('VP after:',verticalPos);
+ } else {
+ drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);
+ // Keep track of width for with setting on the svg
+ maxX = Math.max(maxX,startx + 176);
+ }
});
diff --git a/test/web.html b/test/web.html
index dca527a4f..ea669f000 100644
--- a/test/web.html
+++ b/test/web.html
@@ -38,7 +38,7 @@
di{Diamond is
broken}-->ro(Rounded
square
shape);
di-->ro2(Rounded square shape);
%% Comments after double percent signs
- e((Inner circle))-->f(,.?!+-*ز);
+ e((Inner / circle))-->f(,.?!+-*ز);
cyr[Cyrillic]-->cyr2((Circle shape Начало));
style e red;
@@ -57,7 +57,7 @@
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
- Note right of Bob: Bob thinks
+ Note right of Alice: Bob thinks about
things
Bob-->Alice: I am good thanks!
Bob-->John the Long: How about you John?
Bob-->Alice: Checking with John...