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

Support for comments to the right of the Actor

This commit is contained in:
knsv 2014-12-14 19:13:04 +01:00
parent 7e3bd2e574
commit 7de9687911
8 changed files with 316 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
dist/mermaid.full.js vendored
View File

@ -15811,7 +15811,8 @@ exports.clear = function(){
exports.LINETYPE = { exports.LINETYPE = {
SOLID : 0, SOLID : 0,
DOTTED : 1 DOTTED : 1,
NOTE : 2
}; };
exports.ARROWTYPE = { exports.ARROWTYPE = {
@ -15829,6 +15830,7 @@ exports.addNote = function (actor, placement, message){
var note = {actor:actor, placement: placement, message:message}; var note = {actor:actor, placement: placement, message:message};
notes.push(note); notes.push(note);
messages.push({from:actor, to:actor, message:message, type:exports.LINETYPE.NOTE});
}; };
@ -15844,6 +15846,57 @@ exports.parseError = function(err, hash) {
var sq = require('./parser/sequenceDiagram').parser; var sq = require('./parser/sequenceDiagram').parser;
sq.yy = require('./sequenceDb'); 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('<br>').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. * Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text * @param text
@ -15912,37 +15965,46 @@ module.exports.draw = function (text, id) {
var g = elem.append("g"); var g = elem.append("g");
//Make an SVG Container //Make an SVG Container
//Draw the line //Draw the line
if(msg.type===1){ if(msg.type !== 2) {
g.append("line") if (msg.type === 1) {
.attr("x1", startx) g.append("line")
.attr("y1", verticalPos) .attr("x1", startx)
.attr("x2", stopx) .attr("y1", verticalPos)
.attr("y2", verticalPos) .attr("x2", stopx)
.attr("stroke-width", 2) .attr("y2", verticalPos)
.attr("stroke", "black") .attr("stroke-width", 2)
.style("stroke-dasharray", ("3, 3")) .attr("stroke", "black")
.attr("class", "link") .style("stroke-dasharray", ("3, 3"))
.attr("marker-end", "url(#arrowhead)"); .attr("class", "link")
//.attr("d", diagonal); .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{ else{
g.append("line") g.append("text") // text label for the x axis
.attr("x1", startx) .attr("x", txtCenter)
.attr("y1", verticalPos) .attr("y", verticalPos - 10)
.attr("x2", stopx) .style("text-anchor", "middle")
.attr("y2", verticalPos) .text(msg.message);
.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);
}; };
// Fetch data from the parsing // Fetch data from the parsing
@ -15984,7 +16046,15 @@ module.exports.draw = function (text, id) {
var startx = actors[msg.from].x + width/2; var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2; var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/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);
}
}); });

10
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

130
dist/mermaid.slim.js vendored
View File

@ -15779,7 +15779,8 @@ exports.clear = function(){
exports.LINETYPE = { exports.LINETYPE = {
SOLID : 0, SOLID : 0,
DOTTED : 1 DOTTED : 1,
NOTE : 2
}; };
exports.ARROWTYPE = { exports.ARROWTYPE = {
@ -15797,6 +15798,7 @@ exports.addNote = function (actor, placement, message){
var note = {actor:actor, placement: placement, message:message}; var note = {actor:actor, placement: placement, message:message};
notes.push(note); notes.push(note);
messages.push({from:actor, to:actor, message:message, type:exports.LINETYPE.NOTE});
}; };
@ -15812,6 +15814,57 @@ exports.parseError = function(err, hash) {
var sq = require('./parser/sequenceDiagram').parser; var sq = require('./parser/sequenceDiagram').parser;
sq.yy = require('./sequenceDb'); 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('<br>').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. * Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text * @param text
@ -15880,37 +15933,46 @@ module.exports.draw = function (text, id) {
var g = elem.append("g"); var g = elem.append("g");
//Make an SVG Container //Make an SVG Container
//Draw the line //Draw the line
if(msg.type===1){ if(msg.type !== 2) {
g.append("line") if (msg.type === 1) {
.attr("x1", startx) g.append("line")
.attr("y1", verticalPos) .attr("x1", startx)
.attr("x2", stopx) .attr("y1", verticalPos)
.attr("y2", verticalPos) .attr("x2", stopx)
.attr("stroke-width", 2) .attr("y2", verticalPos)
.attr("stroke", "black") .attr("stroke-width", 2)
.style("stroke-dasharray", ("3, 3")) .attr("stroke", "black")
.attr("class", "link") .style("stroke-dasharray", ("3, 3"))
.attr("marker-end", "url(#arrowhead)"); .attr("class", "link")
//.attr("d", diagonal); .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{ else{
g.append("line") g.append("text") // text label for the x axis
.attr("x1", startx) .attr("x", txtCenter)
.attr("y1", verticalPos) .attr("y", verticalPos - 10)
.attr("x2", stopx) .style("text-anchor", "middle")
.attr("y2", verticalPos) .text(msg.message);
.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);
}; };
// Fetch data from the parsing // Fetch data from the parsing
@ -15952,7 +16014,15 @@ module.exports.draw = function (text, id) {
var startx = actors[msg.from].x + width/2; var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2; var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/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);
}
}); });

10
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/diagrams/sequenceDiagram/sequenceDb.js
View File

@ -42,7 +42,8 @@ exports.clear = function(){
exports.LINETYPE = { exports.LINETYPE = {
SOLID : 0, SOLID : 0,
DOTTED : 1 DOTTED : 1,
NOTE : 2
}; };
exports.ARROWTYPE = { exports.ARROWTYPE = {
@ -60,6 +61,7 @@ exports.addNote = function (actor, placement, message){
var note = {actor:actor, placement: placement, message:message}; var note = {actor:actor, placement: placement, message:message};
notes.push(note); notes.push(note);
messages.push({from:actor, to:actor, message:message, type:exports.LINETYPE.NOTE});
}; };

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

@ -52,11 +52,11 @@ describe('when parsing a sequenceDiagram',function() {
var messages = sq.yy.getMessages(); var messages = sq.yy.getMessages();
expect(messages.length).toBe(2); expect(messages.length).toBe(3);
//console.log('messages'); console.log('messages');
//console.log(messages); console.log(messages);
expect(messages[0].from).toBe('Alice'); expect(messages[0].from).toBe('Alice');
expect(messages[1].from).toBe('Bob'); expect(messages[2].from).toBe('Bob');
}); });
}); });

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

@ -6,6 +6,57 @@
var sq = require('./parser/sequenceDiagram').parser; var sq = require('./parser/sequenceDiagram').parser;
sq.yy = require('./sequenceDb'); 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('<br>').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. * Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text * @param text
@ -74,37 +125,46 @@ module.exports.draw = function (text, id) {
var g = elem.append("g"); var g = elem.append("g");
//Make an SVG Container //Make an SVG Container
//Draw the line //Draw the line
if(msg.type===1){ if(msg.type !== 2) {
g.append("line") if (msg.type === 1) {
.attr("x1", startx) g.append("line")
.attr("y1", verticalPos) .attr("x1", startx)
.attr("x2", stopx) .attr("y1", verticalPos)
.attr("y2", verticalPos) .attr("x2", stopx)
.attr("stroke-width", 2) .attr("y2", verticalPos)
.attr("stroke", "black") .attr("stroke-width", 2)
.style("stroke-dasharray", ("3, 3")) .attr("stroke", "black")
.attr("class", "link") .style("stroke-dasharray", ("3, 3"))
.attr("marker-end", "url(#arrowhead)"); .attr("class", "link")
//.attr("d", diagonal); .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{ else{
g.append("line") g.append("text") // text label for the x axis
.attr("x1", startx) .attr("x", txtCenter)
.attr("y1", verticalPos) .attr("y", verticalPos - 10)
.attr("x2", stopx) .style("text-anchor", "middle")
.attr("y2", verticalPos) .text(msg.message);
.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);
}; };
// Fetch data from the parsing // Fetch data from the parsing
@ -146,7 +206,15 @@ module.exports.draw = function (text, id) {
var startx = actors[msg.from].x + width/2; var startx = actors[msg.from].x + width/2;
var stopx = actors[msg.to].x + width/2; var stopx = actors[msg.to].x + width/2;
var txtCenter = startx + (stopx-startx)/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);
}
}); });

4
test/web.html
View File

@ -38,7 +38,7 @@
di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape); di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
di-->ro2(Rounded square shape); di-->ro2(Rounded square shape);
%% Comments after double percent signs %% Comments after double percent signs
e((Inner circle))-->f(,.?!+-*ز); e((Inner / circle))-->f(,.?!+-*ز);
cyr[Cyrillic]-->cyr2((Circle shape Начало)); cyr[Cyrillic]-->cyr2((Circle shape Начало));
style e red; style e red;
</div> </div>
@ -57,7 +57,7 @@
<div class="mermaid"> <div class="mermaid">
sequenceDiagram sequenceDiagram
Alice->Bob: Hello Bob, how are you? Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks Note right of Alice: Bob thinks about <br/> things
Bob-->Alice: I am good thanks! Bob-->Alice: I am good thanks!
Bob-->John the Long: How about you John? Bob-->John the Long: How about you John?
Bob-->Alice: Checking with John... Bob-->Alice: Checking with John...