Support for comments to the right of the Actor
This commit is contained in:
parent
7e3bd2e574
commit
7de9687911
|
@ -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,6 +15965,7 @@ 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 !== 2) {
|
||||||
if (msg.type === 1) {
|
if (msg.type === 1) {
|
||||||
g.append("line")
|
g.append("line")
|
||||||
.attr("x1", startx)
|
.attr("x1", startx)
|
||||||
|
@ -15943,6 +15997,14 @@ module.exports.draw = function (text, id) {
|
||||||
.attr("y", verticalPos - 10)
|
.attr("y", verticalPos - 10)
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(msg.message);
|
.text(msg.message);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
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;
|
||||||
|
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);
|
drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);
|
||||||
|
// Keep track of width for with setting on the svg
|
||||||
|
maxX = Math.max(maxX,startx + 176);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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,6 +15933,7 @@ 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 !== 2) {
|
||||||
if (msg.type === 1) {
|
if (msg.type === 1) {
|
||||||
g.append("line")
|
g.append("line")
|
||||||
.attr("x1", startx)
|
.attr("x1", startx)
|
||||||
|
@ -15911,6 +15965,14 @@ module.exports.draw = function (text, id) {
|
||||||
.attr("y", verticalPos - 10)
|
.attr("y", verticalPos - 10)
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(msg.message);
|
.text(msg.message);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
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;
|
||||||
|
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);
|
drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);
|
||||||
|
// Keep track of width for with setting on the svg
|
||||||
|
maxX = Math.max(maxX,startx + 176);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -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});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
|
@ -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,6 +125,7 @@ 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 !== 2) {
|
||||||
if (msg.type === 1) {
|
if (msg.type === 1) {
|
||||||
g.append("line")
|
g.append("line")
|
||||||
.attr("x1", startx)
|
.attr("x1", startx)
|
||||||
|
@ -105,6 +157,14 @@ module.exports.draw = function (text, id) {
|
||||||
.attr("y", verticalPos - 10)
|
.attr("y", verticalPos - 10)
|
||||||
.style("text-anchor", "middle")
|
.style("text-anchor", "middle")
|
||||||
.text(msg.message);
|
.text(msg.message);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
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;
|
||||||
|
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);
|
drawMessage(diagram, startx, stopx, verticalPos, txtCenter, msg);
|
||||||
|
// Keep track of width for with setting on the svg
|
||||||
|
maxX = Math.max(maxX,startx + 176);
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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...
|
||||||
|
|
Loading…
Reference in New Issue