GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Redering arrow heads depending on relation defined in class diagram.

Browse Source
This commit is contained in:
knsv 2015-11-07 10:00:40 +01:00
parent 2278325822
commit 24d1afd40f
14 changed files with 532 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
dist/mermaid.forest.css vendored
View File

@ -272,6 +272,56 @@ g.classGroup line {
stroke-width: 1;
fill: none;
}
.composition {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
#compositionStart {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
#compositionEnd {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
.aggregation {
fill: #cde498;
stroke: #13540c;
stroke-width: 1;
}
#aggregationStart {
fill: #cde498;
stroke: #13540c;
stroke-width: 1;
}
#aggregationEnd {
fill: #cde498;
stroke: #13540c;
stroke-width: 1;
}
#dependencyStart {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
#dependencyEnd {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
#extensionStart {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
#extensionEnd {
fill: #13540c;
stroke: #13540c;
stroke-width: 1;
}
text {
font-family: 'trebuchet ms', verdana, arial;
font-size: 28px;

86
dist/mermaid.js vendored
View File

@ -31688,7 +31688,6 @@ var funs = [];
* @param style
*/
exports.addClass = function (id) {
log.log('Adding: ' + id);
if (typeof classes.get(id) === 'undefined') {
classes.set(id, {
id: id,
@ -31715,7 +31714,7 @@ module.exports.getRelations = function () {
};
exports.addRelation = function (relation) {
log.log('Adding relation: ' + JSON.stringify(relation));
log.warn('Adding relation: ' + JSON.stringify(relation));
exports.addClass(relation.id1);
exports.addClass(relation.id2);
@ -31822,15 +31821,38 @@ var getGraphId = function getGraphId(label) {
* Setup arrow head and define the marker. The result is appended to the svg.
*/
var insertMarkers = function insertMarkers(elem) {
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
var drawEdge = function drawEdge(elem, path, relation) {
var getRelationType = function getRelationType(type) {
//console.warn(type);
switch (type) {
case cDDb.relationType.AGGREGATION:
return 'aggregation';
case cDDb.relationType.EXTENSION:
return 'extension';
case cDDb.relationType.COMPOSITION:
return 'composition';
case cDDb.relationType.DEPENDENCY:
return 'dependency';
}
};
//The data for our line
var lineData = path.points;
@ -31843,13 +31865,18 @@ var drawEdge = function drawEdge(elem, path, relation) {
//.interpolate('cardinal');
.interpolate('basis');
var path = elem.append('path').attr('d', lineFunction(lineData)).attr('class', 'relation');
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).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, '\\)');
path.attr('marker-end', 'url(' + url + '#extensionEnd)');
path.attr('marker-start', 'url(' + url + '#extensionStart)');
//console.log(relation.relation.type1);
if (relation.relation.type1 !== 'none') {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')');
}
if (relation.relation.type2 !== 'none') {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
}
};
var drawClass = function drawClass(elem, classDef) {
@ -32038,7 +32065,7 @@ module.exports.draw = function (text, id) {
for (var _iterator5 = relations[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var relation = _step5.value;
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation });
}
} catch (err) {
_didIteratorError5 = true;
@ -32064,7 +32091,7 @@ module.exports.draw = function (text, id) {
});
g.edges().forEach(function (e) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
drawEdge(diagram, g.edge(e), e);
drawEdge(diagram, g.edge(e), g.edge(e).relation);
});
//
@ -38745,8 +38772,11 @@ exports.PLACEMENT = {
exports.addNote = function (actor, placement, message) {
var note = { actor: actor, placement: placement, message: message };
// Coerce actor into a [to, from, ...] array
var actors = [].concat(actor, actor);
notes.push(note);
messages.push({ from: actor, to: actor, message: message, type: exports.LINETYPE.NOTE, placement: placement });
messages.push({ from: actors[0], to: actors[1], message: message, type: exports.LINETYPE.NOTE, placement: placement });
};
exports.parseError = function (err, hash) {
@ -38940,11 +38970,11 @@ exports.bounds = {
* @param pos The position if the actor in the liost of actors
* @param description The text in the box
*/
var drawNote = function drawNote(elem, startx, verticalPos, msg) {
var drawNote = function drawNote(elem, startx, verticalPos, msg, forceWidth) {
var rect = svgDraw.getNoteRect();
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
rect.width = forceWidth || conf.width;
rect['class'] = 'note';
var g = elem.append('g');
@ -38958,21 +38988,19 @@ var drawNote = function drawNote(elem, startx, verticalPos, msg) {
textObj.text = msg.message;
textObj['class'] = 'noteText';
var textElem = svgDraw.drawText(g, textObj, conf.width - conf.noteMargin);
var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin);
var textHeight = textElem[0][0].getBBox().height;
if (textHeight > conf.width) {
if (!forceWidth && textHeight > conf.width) {
textElem.remove();
g = elem.append('g');
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * conf.width - conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * rect.width - conf.noteMargin);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width', 2 * conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
rectElem.attr('width', 2 * rect.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
} else {
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
}
rectElem.attr('height', textHeight + 2 * conf.noteMargin);
@ -39089,6 +39117,7 @@ module.exports.draw = function (text, id) {
var startx;
var stopx;
var forceWidth;
// Fetch data from the parsing
var actors = sq.yy.getActors();
@ -39111,12 +39140,17 @@ module.exports.draw = function (text, id) {
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
if (msg.placement !== 0) {
// Right of
if (msg.placement === sq.yy.PLACEMENT.RIGHTOF) {
drawNote(diagram, startx + (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else {
// Left of
} else if (msg.placement === sq.yy.PLACEMENT.LEFTOF) {
drawNote(diagram, startx - (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else if (msg.to === msg.from) {
// Single-actor over
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
} else {
// Multi-actor over
forceWidth = Math.abs(startx - stopx) + conf.actorMargin;
drawNote(diagram, (startx + stopx + conf.width - forceWidth) / 2, exports.bounds.getVerticalPos(), msg, forceWidth);
}
break;
case sq.yy.LINETYPE.LOOP_START:

34
dist/mermaid.min.js vendored
View File

File diff suppressed because one or more lines are too long

86
dist/mermaid.slim.js vendored
View File

@ -22183,7 +22183,6 @@ var funs = [];
* @param style
*/
exports.addClass = function (id) {
log.log('Adding: ' + id);
if (typeof classes.get(id) === 'undefined') {
classes.set(id, {
id: id,
@ -22210,7 +22209,7 @@ module.exports.getRelations = function () {
};
exports.addRelation = function (relation) {
log.log('Adding relation: ' + JSON.stringify(relation));
log.warn('Adding relation: ' + JSON.stringify(relation));
exports.addClass(relation.id1);
exports.addClass(relation.id2);
@ -22317,15 +22316,38 @@ var getGraphId = function getGraphId(label) {
* Setup arrow head and define the marker. The result is appended to the svg.
*/
var insertMarkers = function insertMarkers(elem) {
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
var drawEdge = function drawEdge(elem, path, relation) {
var getRelationType = function getRelationType(type) {
//console.warn(type);
switch (type) {
case cDDb.relationType.AGGREGATION:
return 'aggregation';
case cDDb.relationType.EXTENSION:
return 'extension';
case cDDb.relationType.COMPOSITION:
return 'composition';
case cDDb.relationType.DEPENDENCY:
return 'dependency';
}
};
//The data for our line
var lineData = path.points;
@ -22338,13 +22360,18 @@ var drawEdge = function drawEdge(elem, path, relation) {
//.interpolate('cardinal');
.interpolate('basis');
var path = elem.append('path').attr('d', lineFunction(lineData)).attr('class', 'relation');
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).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, '\\)');
path.attr('marker-end', 'url(' + url + '#extensionEnd)');
path.attr('marker-start', 'url(' + url + '#extensionStart)');
//console.log(relation.relation.type1);
if (relation.relation.type1 !== 'none') {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')');
}
if (relation.relation.type2 !== 'none') {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
}
};
var drawClass = function drawClass(elem, classDef) {
@ -22533,7 +22560,7 @@ module.exports.draw = function (text, id) {
for (var _iterator5 = relations[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var relation = _step5.value;
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation });
}
} catch (err) {
_didIteratorError5 = true;
@ -22559,7 +22586,7 @@ module.exports.draw = function (text, id) {
});
g.edges().forEach(function (e) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
drawEdge(diagram, g.edge(e), e);
drawEdge(diagram, g.edge(e), g.edge(e).relation);
});
//
@ -29240,8 +29267,11 @@ exports.PLACEMENT = {
exports.addNote = function (actor, placement, message) {
var note = { actor: actor, placement: placement, message: message };
// Coerce actor into a [to, from, ...] array
var actors = [].concat(actor, actor);
notes.push(note);
messages.push({ from: actor, to: actor, message: message, type: exports.LINETYPE.NOTE, placement: placement });
messages.push({ from: actors[0], to: actors[1], message: message, type: exports.LINETYPE.NOTE, placement: placement });
};
exports.parseError = function (err, hash) {
@ -29435,11 +29465,11 @@ exports.bounds = {
* @param pos The position if the actor in the liost of actors
* @param description The text in the box
*/
var drawNote = function drawNote(elem, startx, verticalPos, msg) {
var drawNote = function drawNote(elem, startx, verticalPos, msg, forceWidth) {
var rect = svgDraw.getNoteRect();
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
rect.width = forceWidth || conf.width;
rect['class'] = 'note';
var g = elem.append('g');
@ -29453,21 +29483,19 @@ var drawNote = function drawNote(elem, startx, verticalPos, msg) {
textObj.text = msg.message;
textObj['class'] = 'noteText';
var textElem = svgDraw.drawText(g, textObj, conf.width - conf.noteMargin);
var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin);
var textHeight = textElem[0][0].getBBox().height;
if (textHeight > conf.width) {
if (!forceWidth && textHeight > conf.width) {
textElem.remove();
g = elem.append('g');
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * conf.width - conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * rect.width - conf.noteMargin);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width', 2 * conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
rectElem.attr('width', 2 * rect.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
} else {
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
}
rectElem.attr('height', textHeight + 2 * conf.noteMargin);
@ -29584,6 +29612,7 @@ module.exports.draw = function (text, id) {
var startx;
var stopx;
var forceWidth;
// Fetch data from the parsing
var actors = sq.yy.getActors();
@ -29606,12 +29635,17 @@ module.exports.draw = function (text, id) {
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
if (msg.placement !== 0) {
// Right of
if (msg.placement === sq.yy.PLACEMENT.RIGHTOF) {
drawNote(diagram, startx + (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else {
// Left of
} else if (msg.placement === sq.yy.PLACEMENT.LEFTOF) {
drawNote(diagram, startx - (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else if (msg.to === msg.from) {
// Single-actor over
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
} else {
// Multi-actor over
forceWidth = Math.abs(startx - stopx) + conf.actorMargin;
drawNote(diagram, (startx + stopx + conf.width - forceWidth) / 2, exports.bounds.getVerticalPos(), msg, forceWidth);
}
break;
case sq.yy.LINETYPE.LOOP_START:

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

File diff suppressed because one or more lines are too long

86
dist/mermaidAPI.js vendored
View File

@ -31355,7 +31355,6 @@ var funs = [];
* @param style
*/
exports.addClass = function (id) {
log.log('Adding: ' + id);
if (typeof classes.get(id) === 'undefined') {
classes.set(id, {
id: id,
@ -31382,7 +31381,7 @@ module.exports.getRelations = function () {
};
exports.addRelation = function (relation) {
log.log('Adding relation: ' + JSON.stringify(relation));
log.warn('Adding relation: ' + JSON.stringify(relation));
exports.addClass(relation.id1);
exports.addClass(relation.id2);
@ -31489,15 +31488,38 @@ var getGraphId = function getGraphId(label) {
* Setup arrow head and define the marker. The result is appended to the svg.
*/
var insertMarkers = function insertMarkers(elem) {
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
var drawEdge = function drawEdge(elem, path, relation) {
var getRelationType = function getRelationType(type) {
//console.warn(type);
switch (type) {
case cDDb.relationType.AGGREGATION:
return 'aggregation';
case cDDb.relationType.EXTENSION:
return 'extension';
case cDDb.relationType.COMPOSITION:
return 'composition';
case cDDb.relationType.DEPENDENCY:
return 'dependency';
}
};
//The data for our line
var lineData = path.points;
@ -31510,13 +31532,18 @@ var drawEdge = function drawEdge(elem, path, relation) {
//.interpolate('cardinal');
.interpolate('basis');
var path = elem.append('path').attr('d', lineFunction(lineData)).attr('class', 'relation');
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).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, '\\)');
path.attr('marker-end', 'url(' + url + '#extensionEnd)');
path.attr('marker-start', 'url(' + url + '#extensionStart)');
//console.log(relation.relation.type1);
if (relation.relation.type1 !== 'none') {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')');
}
if (relation.relation.type2 !== 'none') {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
}
};
var drawClass = function drawClass(elem, classDef) {
@ -31705,7 +31732,7 @@ module.exports.draw = function (text, id) {
for (var _iterator5 = relations[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var relation = _step5.value;
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation });
}
} catch (err) {
_didIteratorError5 = true;
@ -31731,7 +31758,7 @@ module.exports.draw = function (text, id) {
});
g.edges().forEach(function (e) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
drawEdge(diagram, g.edge(e), e);
drawEdge(diagram, g.edge(e), g.edge(e).relation);
});
//
@ -38412,8 +38439,11 @@ exports.PLACEMENT = {
exports.addNote = function (actor, placement, message) {
var note = { actor: actor, placement: placement, message: message };
// Coerce actor into a [to, from, ...] array
var actors = [].concat(actor, actor);
notes.push(note);
messages.push({ from: actor, to: actor, message: message, type: exports.LINETYPE.NOTE, placement: placement });
messages.push({ from: actors[0], to: actors[1], message: message, type: exports.LINETYPE.NOTE, placement: placement });
};
exports.parseError = function (err, hash) {
@ -38607,11 +38637,11 @@ exports.bounds = {
* @param pos The position if the actor in the liost of actors
* @param description The text in the box
*/
var drawNote = function drawNote(elem, startx, verticalPos, msg) {
var drawNote = function drawNote(elem, startx, verticalPos, msg, forceWidth) {
var rect = svgDraw.getNoteRect();
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
rect.width = forceWidth || conf.width;
rect['class'] = 'note';
var g = elem.append('g');
@ -38625,21 +38655,19 @@ var drawNote = function drawNote(elem, startx, verticalPos, msg) {
textObj.text = msg.message;
textObj['class'] = 'noteText';
var textElem = svgDraw.drawText(g, textObj, conf.width - conf.noteMargin);
var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin);
var textHeight = textElem[0][0].getBBox().height;
if (textHeight > conf.width) {
if (!forceWidth && textHeight > conf.width) {
textElem.remove();
g = elem.append('g');
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * conf.width - conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * rect.width - conf.noteMargin);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width', 2 * conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
rectElem.attr('width', 2 * rect.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
} else {
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
}
rectElem.attr('height', textHeight + 2 * conf.noteMargin);
@ -38756,6 +38784,7 @@ module.exports.draw = function (text, id) {
var startx;
var stopx;
var forceWidth;
// Fetch data from the parsing
var actors = sq.yy.getActors();
@ -38778,12 +38807,17 @@ module.exports.draw = function (text, id) {
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
if (msg.placement !== 0) {
// Right of
if (msg.placement === sq.yy.PLACEMENT.RIGHTOF) {
drawNote(diagram, startx + (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else {
// Left of
} else if (msg.placement === sq.yy.PLACEMENT.LEFTOF) {
drawNote(diagram, startx - (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else if (msg.to === msg.from) {
// Single-actor over
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
} else {
// Multi-actor over
forceWidth = Math.abs(startx - stopx) + conf.actorMargin;
drawNote(diagram, (startx + stopx + conf.width - forceWidth) / 2, exports.bounds.getVerticalPos(), msg, forceWidth);
}
break;
case sq.yy.LINETYPE.LOOP_START:

9
dist/mermaidAPI.min.js vendored
View File

File diff suppressed because one or more lines are too long

86
dist/mermaidAPI.slim.js vendored
View File

@ -21850,7 +21850,6 @@ var funs = [];
* @param style
*/
exports.addClass = function (id) {
log.log('Adding: ' + id);
if (typeof classes.get(id) === 'undefined') {
classes.set(id, {
id: id,
@ -21877,7 +21876,7 @@ module.exports.getRelations = function () {
};
exports.addRelation = function (relation) {
log.log('Adding relation: ' + JSON.stringify(relation));
log.warn('Adding relation: ' + JSON.stringify(relation));
exports.addClass(relation.id1);
exports.addClass(relation.id2);
@ -21984,15 +21983,38 @@ var getGraphId = function getGraphId(label) {
* Setup arrow head and define the marker. The result is appended to the svg.
*/
var insertMarkers = function insertMarkers(elem) {
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'extensionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'extensionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('fill', 'white').attr('stroke', 'black').attr('stroke-width', 1).attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker').attr('id', 'compositionStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'compositionEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'aggregationEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyStart').attr('class', 'extension').attr('refX', 0).attr('refY', 7).attr('markerWidth', 190).attr('markerHeight', 240).attr('orient', 'auto').append('path').attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker').attr('id', 'dependencyEnd').attr('refX', 19).attr('refY', 7).attr('markerWidth', 20).attr('markerHeight', 28).attr('orient', 'auto').append('path').attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
var drawEdge = function drawEdge(elem, path, relation) {
var getRelationType = function getRelationType(type) {
//console.warn(type);
switch (type) {
case cDDb.relationType.AGGREGATION:
return 'aggregation';
case cDDb.relationType.EXTENSION:
return 'extension';
case cDDb.relationType.COMPOSITION:
return 'composition';
case cDDb.relationType.DEPENDENCY:
return 'dependency';
}
};
//The data for our line
var lineData = path.points;
@ -22005,13 +22027,18 @@ var drawEdge = function drawEdge(elem, path, relation) {
//.interpolate('cardinal');
.interpolate('basis');
var path = elem.append('path').attr('d', lineFunction(lineData)).attr('class', 'relation');
var svgPath = elem.append('path').attr('d', lineFunction(lineData)).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, '\\)');
path.attr('marker-end', 'url(' + url + '#extensionEnd)');
path.attr('marker-start', 'url(' + url + '#extensionStart)');
//console.log(relation.relation.type1);
if (relation.relation.type1 !== 'none') {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')');
}
if (relation.relation.type2 !== 'none') {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')');
}
};
var drawClass = function drawClass(elem, classDef) {
@ -22200,7 +22227,7 @@ module.exports.draw = function (text, id) {
for (var _iterator5 = relations[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
var relation = _step5.value;
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation });
}
} catch (err) {
_didIteratorError5 = true;
@ -22226,7 +22253,7 @@ module.exports.draw = function (text, id) {
});
g.edges().forEach(function (e) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
drawEdge(diagram, g.edge(e), e);
drawEdge(diagram, g.edge(e), g.edge(e).relation);
});
//
@ -28907,8 +28934,11 @@ exports.PLACEMENT = {
exports.addNote = function (actor, placement, message) {
var note = { actor: actor, placement: placement, message: message };
// Coerce actor into a [to, from, ...] array
var actors = [].concat(actor, actor);
notes.push(note);
messages.push({ from: actor, to: actor, message: message, type: exports.LINETYPE.NOTE, placement: placement });
messages.push({ from: actors[0], to: actors[1], message: message, type: exports.LINETYPE.NOTE, placement: placement });
};
exports.parseError = function (err, hash) {
@ -29102,11 +29132,11 @@ exports.bounds = {
* @param pos The position if the actor in the liost of actors
* @param description The text in the box
*/
var drawNote = function drawNote(elem, startx, verticalPos, msg) {
var drawNote = function drawNote(elem, startx, verticalPos, msg, forceWidth) {
var rect = svgDraw.getNoteRect();
rect.x = startx;
rect.y = verticalPos;
rect.width = conf.width;
rect.width = forceWidth || conf.width;
rect['class'] = 'note';
var g = elem.append('g');
@ -29120,21 +29150,19 @@ var drawNote = function drawNote(elem, startx, verticalPos, msg) {
textObj.text = msg.message;
textObj['class'] = 'noteText';
var textElem = svgDraw.drawText(g, textObj, conf.width - conf.noteMargin);
var textElem = svgDraw.drawText(g, textObj, rect.width - conf.noteMargin);
var textHeight = textElem[0][0].getBBox().height;
if (textHeight > conf.width) {
if (!forceWidth && textHeight > conf.width) {
textElem.remove();
g = elem.append('g');
//textObj.x = textObj.x - conf.width;
//textElem = svgDraw.drawText(g,textObj, 2*conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * conf.width - conf.noteMargin);
textElem = svgDraw.drawText(g, textObj, 2 * rect.width - conf.noteMargin);
textHeight = textElem[0][0].getBBox().height;
rectElem.attr('width', 2 * conf.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
rectElem.attr('width', 2 * rect.width);
exports.bounds.insert(startx, verticalPos, startx + 2 * rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
} else {
exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2 * conf.noteMargin + textHeight);
exports.bounds.insert(startx, verticalPos, startx + rect.width, verticalPos + 2 * conf.noteMargin + textHeight);
}
rectElem.attr('height', textHeight + 2 * conf.noteMargin);
@ -29251,6 +29279,7 @@ module.exports.draw = function (text, id) {
var startx;
var stopx;
var forceWidth;
// Fetch data from the parsing
var actors = sq.yy.getActors();
@ -29273,12 +29302,17 @@ module.exports.draw = function (text, id) {
startx = actors[msg.from].x;
stopx = actors[msg.to].x;
if (msg.placement !== 0) {
// Right of
if (msg.placement === sq.yy.PLACEMENT.RIGHTOF) {
drawNote(diagram, startx + (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else {
// Left of
} else if (msg.placement === sq.yy.PLACEMENT.LEFTOF) {
drawNote(diagram, startx - (conf.width + conf.actorMargin) / 2, exports.bounds.getVerticalPos(), msg);
} else if (msg.to === msg.from) {
// Single-actor over
drawNote(diagram, startx, exports.bounds.getVerticalPos(), msg);
} else {
// Multi-actor over
forceWidth = Math.abs(startx - stopx) + conf.actorMargin;
drawNote(diagram, (startx + stopx + conf.width - forceWidth) / 2, exports.bounds.getVerticalPos(), msg, forceWidth);
}
break;
case sq.yy.LINETYPE.LOOP_START:

11
dist/mermaidAPI.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/diagrams/classDiagram/classDb.js
View File

@ -19,7 +19,6 @@ var funs = [];
* @param style
*/
exports.addClass = function (id) {
log.log('Adding: '+id);
if(typeof classes.get(id) === 'undefined'){
classes.set(id, {
id:id,
@ -46,7 +45,7 @@ module.exports.getRelations = function () {
};
exports.addRelation = function (relation) {
log.log('Adding relation: ' + JSON.stringify(relation));
log.warn('Adding relation: ' + JSON.stringify(relation));
exports.addClass(relation.id1);
exports.addClass(relation.id2);

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

@ -45,9 +45,6 @@ var insertMarkers = function (elem) {
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('fill', 'white')
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('d', 'M 1,7 L18,13 V 1 Z');
elem.append('defs').append('marker')
@ -58,13 +55,89 @@ var insertMarkers = function (elem) {
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('fill', 'white')
.attr('stroke', 'black')
.attr('stroke-width', 1)
.attr('d', 'M 1,1 V 13 L18,7 Z'); //this is actual shape for arrowhead
elem.append('defs').append('marker')
.attr('id', 'compositionStart')
.attr('class', 'extension')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker')
.attr('id', 'compositionEnd')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker')
.attr('id', 'aggregationStart')
.attr('class', 'extension')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker')
.attr('id', 'aggregationEnd')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker')
.attr('id', 'dependencyStart')
.attr('class', 'extension')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');
elem.append('defs').append('marker')
.attr('id', 'dependencyEnd')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
};
var drawEdge = function (elem, path, relation) {
var getRelationType = function(type){
//console.warn(type);
switch(type){
case cDDb.relationType.AGGREGATION:
return 'aggregation';
case cDDb.relationType.EXTENSION:
return 'extension';
case cDDb.relationType.COMPOSITION:
return 'composition';
case cDDb.relationType.DEPENDENCY:
return 'dependency';
}
};
//The data for our line
var lineData = path.points;
@ -79,15 +152,20 @@ var drawEdge = function (elem, path, relation) {
//.interpolate('cardinal');
.interpolate('basis');
var path = elem.append('path')
var svgPath = elem.append('path')
.attr('d', lineFunction(lineData))
.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, '\\)');
path.attr('marker-end', 'url(' + url + '#extensionEnd)');
path.attr('marker-start', 'url(' + url + '#extensionStart)');
//console.log(relation.relation.type1);
if(relation.relation.type1 !== 'none'){
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1)+'Start' + ')');
}
if(relation.relation.type2 !== 'none'){
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2)+'End' + ')');
}
}
var drawClass = function (elem, classDef) {
@ -233,7 +311,7 @@ module.exports.draw = function (text, id) {
let relations = cDDb.getRelations();
for (let relation of relations) {
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2),{relation:relation});
}
dagre.layout(g);
g.nodes().forEach(function (v) {
@ -244,7 +322,7 @@ module.exports.draw = function (text, id) {
});
g.edges().forEach(function (e) {
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
drawEdge(diagram, g.edge(e), e)
drawEdge(diagram, g.edge(e), g.edge(e).relation);
});

134
src/diagrams/sequenceDiagram/parser/sequenceDiagram.js
View File

@ -72,19 +72,19 @@
}
*/
var sequenceDiagram = (function(){
var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[6,8,10,11,15,17,19,20,22,33],$V1=[2,2],$V2=[1,6],$V3=[1,8],$V4=[1,9],$V5=[1,12],$V6=[1,13],$V7=[1,14],$V8=[1,15],$V9=[1,17],$Va=[1,18],$Vb=[2,7],$Vc=[6,8,10,11,15,17,18,19,20,21,22,33],$Vd=[6,8,10,11,15,17,18,19,20,22,33],$Ve=[1,46],$Vf=[1,49],$Vg=[1,53];
var o=function(k,v,o,l){for(o=o||{},l=k.length;l--;o[k[l]]=v);return o},$V0=[2,2],$V1=[1,5],$V2=[1,7],$V3=[1,8],$V4=[1,11],$V5=[1,12],$V6=[1,13],$V7=[1,14],$V8=[1,16],$V9=[1,17],$Va=[1,7,9,10,14,16,18,19,20,21,22,33],$Vb=[7,9,10,14,16,18,19,20,22,33],$Vc=[1,51];
var parser = {trace: function trace() { },
yy: {},
symbols_: {"error":2,"start":3,"SD":4,"document":5,"EOF":6,"line":7,"SPACE":8,"statement":9,"NL":10,"participant":11,"actor":12,"signal":13,"note_statement":14,"title":15,"text":16,"loop":17,"end":18,"opt":19,"alt":20,"else":21,"note":22,"placement":23,"text2":24,"over":25,"spaceList":26,"actor_pair":27,",":28,"left_of":29,"right_of":30,"signaltype":31,"actors":32,"ACTOR":33,"SOLID_OPEN_ARROW":34,"DOTTED_OPEN_ARROW":35,"SOLID_ARROW":36,"DOTTED_ARROW":37,"SOLID_CROSS":38,"DOTTED_CROSS":39,"TXT":40,"$accept":0,"$end":1},
terminals_: {2:"error",4:"SD",6:"EOF",8:"SPACE",10:"NL",11:"participant",15:"title",16:"text",17:"loop",18:"end",19:"opt",20:"alt",21:"else",22:"note",25:"over",28:",",29:"left_of",30:"right_of",33:"ACTOR",34:"SOLID_OPEN_ARROW",35:"DOTTED_OPEN_ARROW",36:"SOLID_ARROW",37:"DOTTED_ARROW",38:"SOLID_CROSS",39:"DOTTED_CROSS",40:"TXT"},
productions_: [0,[3,3],[5,0],[5,2],[7,2],[7,1],[7,1],[7,1],[9,3],[9,2],[9,2],[9,4],[9,4],[9,4],[9,7],[14,4],[14,5],[26,2],[26,1],[27,1],[27,3],[23,1],[23,1],[13,4],[32,2],[32,1],[12,1],[31,1],[31,1],[31,1],[31,1],[31,1],[31,1],[24,1]],
symbols_: {"error":2,"start":3,"SD":4,"document":5,"line":6,"SPACE":7,"statement":8,"NL":9,"participant":10,"actor":11,"signal":12,"note_statement":13,"title":14,"text":15,"loop":16,"restOfLine":17,"end":18,"opt":19,"alt":20,"else":21,"note":22,"placement":23,"text2":24,"over":25,"actor_pair":26,"spaceList":27,",":28,"left_of":29,"right_of":30,"signaltype":31,"actors":32,"ACTOR":33,"SOLID_OPEN_ARROW":34,"DOTTED_OPEN_ARROW":35,"SOLID_ARROW":36,"DOTTED_ARROW":37,"SOLID_CROSS":38,"DOTTED_CROSS":39,"TXT":40,"$accept":0,"$end":1},
terminals_: {2:"error",4:"SD",7:"SPACE",9:"NL",10:"participant",14:"title",15:"text",16:"loop",17:"restOfLine",18:"end",19:"opt",20:"alt",21:"else",22:"note",25:"over",28:",",29:"left_of",30:"right_of",33:"ACTOR",34:"SOLID_OPEN_ARROW",35:"DOTTED_OPEN_ARROW",36:"SOLID_ARROW",37:"DOTTED_ARROW",38:"SOLID_CROSS",39:"DOTTED_CROSS",40:"TXT"},
productions_: [0,[3,2],[5,0],[5,2],[6,2],[6,1],[6,1],[8,3],[8,2],[8,2],[8,4],[8,4],[8,4],[8,7],[13,4],[13,4],[27,2],[27,1],[26,3],[26,1],[23,1],[23,1],[12,4],[32,2],[32,1],[11,1],[31,1],[31,1],[31,1],[31,1],[31,1],[31,1],[24,1]],
performAction: function anonymous(yytext, yyleng, yylineno, yy, yystate /* action[1] */, $$ /* vstack */, _$ /* lstack */) {
/* this == yyval */
var $0 = $$.length - 1;
switch (yystate) {
case 1:
yy.apply($$[$0-1]);return $$[$0-1];
yy.apply($$[$0]);return $$[$0];
break;
case 2:
this.$ = []
@ -95,31 +95,31 @@ break;
case 4: case 5:
this.$ = $$[$0]
break;
case 6: case 7:
case 6:
this.$=[];
break;
case 8:
case 7:
this.$=$$[$0-1];
break;
case 11:
$$[$0-1].unshift({type: 'loopStart', loopText:$$[$0-2], signalType: yy.LINETYPE.LOOP_START});
$$[$0-1].push({type: 'loopEnd', loopText:$$[$0-2], signalType: yy.LINETYPE.LOOP_END});
this.$=$$[$0-1];
break;
case 12:
$$[$0-1].unshift({type: 'loopStart', loopText:$$[$0-2].actor, signalType: yy.LINETYPE.LOOP_START});
$$[$0-1].push({type: 'loopEnd', loopText:$$[$0-2], signalType: yy.LINETYPE.LOOP_END});
$$[$0-1].unshift({type: 'optStart', optText:$$[$0-2], signalType: yy.LINETYPE.OPT_START});
$$[$0-1].push({type: 'optEnd', optText:$$[$0-2], signalType: yy.LINETYPE.OPT_END});
this.$=$$[$0-1];
break;
case 13:
$$[$0-1].unshift({type: 'optStart', optText:$$[$0-2].actor, signalType: yy.LINETYPE.OPT_START});
$$[$0-1].push({type: 'optEnd', optText:$$[$0-2].actor, signalType: yy.LINETYPE.OPT_END});
this.$=$$[$0-1];
break;
case 14:
// Alt start
$$[$0-4].unshift({type: 'altStart', altText:$$[$0-5].actor, signalType: yy.LINETYPE.ALT_START});
$$[$0-4].unshift({type: 'altStart', altText:$$[$0-5], signalType: yy.LINETYPE.ALT_START});
// Content in alt is already in $$[$0-4]
// Else
$$[$0-4].push({type: 'else', altText:$$[$0-2].actor, signalType: yy.LINETYPE.ALT_ELSE});
$$[$0-4].push({type: 'else', altText:$$[$0-2], signalType: yy.LINETYPE.ALT_ELSE});
// Content in other alt
$$[$0-4] = $$[$0-4].concat($$[$0-1]);
// End
@ -127,52 +127,61 @@ case 14:
this.$=$$[$0-4];
break;
case 14:
this.$ = [$$[$0-1], {type:'addNote', placement:$$[$0-2], actor:$$[$0-1].actor, text:$$[$0]}];
break;
case 15:
this.$=[$$[$0-1],{type:'addNote', placement:$$[$0-2], actor:$$[$0-1].actor, text:$$[$0]}];
// Coerce actor_pair into a [to, from, ...] array
$$[$0-2] = [].concat($$[$0-1], $$[$0-1]).slice(0, 2);
$$[$0-2][0] = $$[$0-2][0].actor;
$$[$0-2][1] = $$[$0-2][1].actor;
this.$ = [$$[$0-1], {type:'addNote', placement:yy.PLACEMENT.OVER, actor:$$[$0-2].slice(0, 2), text:$$[$0]}];
break;
case 18:
this.$ = [$$[$0-2], $$[$0]];
break;
case 19:
this.$ = $$[$0];
break;
case 20:
this.$ = [$$[$0-2], $$[$0]];
break;
case 21:
this.$ = yy.PLACEMENT.LEFTOF;
break;
case 22:
case 21:
this.$ = yy.PLACEMENT.RIGHTOF;
break;
case 23:
case 22:
this.$ = [$$[$0-3],$$[$0-1],{type: 'addMessage', from:$$[$0-3].actor, to:$$[$0-1].actor, signalType:$$[$0-2], msg:$$[$0]}]
break;
case 26:
case 25:
this.$={type: 'addActor', actor:$$[$0]}
break;
case 27:
case 26:
this.$ = yy.LINETYPE.SOLID_OPEN;
break;
case 28:
case 27:
this.$ = yy.LINETYPE.DOTTED_OPEN;
break;
case 29:
case 28:
this.$ = yy.LINETYPE.SOLID;
break;
case 30:
case 29:
this.$ = yy.LINETYPE.DOTTED;
break;
case 31:
case 30:
this.$ = yy.LINETYPE.SOLID_CROSS;
break;
case 32:
case 31:
this.$ = yy.LINETYPE.DOTTED_CROSS;
break;
case 33:
case 32:
this.$ = $$[$0].substring(1).trim().replace(/\\n/gm, "\n");
break;
}
},
table: [{3:1,4:[1,2]},{1:[3]},o($V0,$V1,{5:3}),{6:[1,4],7:5,8:$V2,9:7,10:$V3,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,19:$V7,20:$V8,22:$V9,33:$Va},o($V0,$Vb,{1:[2,1]}),o($Vc,[2,3]),{9:19,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,19:$V7,20:$V8,22:$V9,33:$Va},o($Vc,[2,5]),o($Vc,[2,6]),{12:20,33:$Va},{10:[1,21]},{10:[1,22]},{8:[1,23]},{12:24,33:$Va},{12:25,33:$Va},{12:26,33:$Va},{31:27,34:[1,28],35:[1,29],36:[1,30],37:[1,31],38:[1,32],39:[1,33]},{23:34,25:[1,35],29:[1,36],30:[1,37]},o([6,8,10,11,15,17,18,19,20,21,22,28,33,34,35,36,37,38,39,40],[2,26]),o($Vc,[2,4]),{10:[1,38]},o($Vc,[2,9]),o($Vc,[2,10]),{16:[1,39]},o($Vd,$V1,{5:40}),o($Vd,$V1,{5:41}),o([6,8,10,11,15,17,19,20,21,22,33],$V1,{5:42}),{12:43,33:$Va},{33:[2,27]},{33:[2,28]},{33:[2,29]},{33:[2,30]},{33:[2,31]},{33:[2,32]},{12:44,33:$Va},{8:$Ve,26:45},{33:[2,21]},{33:[2,22]},o($Vc,[2,8]),{10:[1,47]},{6:$Vf,7:5,8:$V2,9:7,10:$V3,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,18:[1,48],19:$V7,20:$V8,22:$V9,33:$Va},{6:$Vf,7:5,8:$V2,9:7,10:$V3,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,18:[1,50],19:$V7,20:$V8,22:$V9,33:$Va},{6:$Vf,7:5,8:$V2,9:7,10:$V3,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,19:$V7,20:$V8,21:[1,51],22:$V9,33:$Va},{24:52,40:$Vg},{24:54,40:$Vg},{12:56,27:55,33:$Va},{8:$Ve,26:57,33:[2,18]},o($Vc,[2,11]),o($Vc,[2,12]),o($Vc,$Vb),o($Vc,[2,13]),{12:58,33:$Va},{10:[2,23]},{10:[2,33]},{10:[2,15]},{12:59,33:$Va},{28:[1,60],33:[2,19]},{33:[2,17]},o($Vd,$V1,{5:61}),{10:[2,16]},{12:62,33:$Va},{6:$Vf,7:5,8:$V2,9:7,10:$V3,11:$V4,12:16,13:10,14:11,15:$V5,17:$V6,18:[1,63],19:$V7,20:$V8,22:$V9,33:$Va},{33:[2,20]},o($Vc,[2,14])],
defaultActions: {28:[2,27],29:[2,28],30:[2,29],31:[2,30],32:[2,31],33:[2,32],36:[2,21],37:[2,22],52:[2,23],53:[2,33],54:[2,15],57:[2,17],59:[2,16],62:[2,20]},
table: [{3:1,4:[1,2]},{1:[3]},o([1,7,9,10,14,16,19,20,22,33],$V0,{5:3}),{1:[2,1],6:4,7:$V1,8:6,9:$V2,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,19:$V6,20:$V7,22:$V8,33:$V9},o($Va,[2,3]),{8:18,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,19:$V6,20:$V7,22:$V8,33:$V9},o($Va,[2,5]),o($Va,[2,6]),{11:19,33:$V9},{9:[1,20]},{9:[1,21]},{7:[1,22]},{17:[1,23]},{17:[1,24]},{17:[1,25]},{31:26,34:[1,27],35:[1,28],36:[1,29],37:[1,30],38:[1,31],39:[1,32]},{23:33,25:[1,34],29:[1,35],30:[1,36]},o([9,28,34,35,36,37,38,39,40],[2,25]),o($Va,[2,4]),{9:[1,37]},o($Va,[2,8]),o($Va,[2,9]),{15:[1,38]},o($Vb,$V0,{5:39}),o($Vb,$V0,{5:40}),o([7,9,10,14,16,19,20,21,22,33],$V0,{5:41}),{11:42,33:$V9},{33:[2,26]},{33:[2,27]},{33:[2,28]},{33:[2,29]},{33:[2,30]},{33:[2,31]},{11:43,33:$V9},{11:45,26:44,33:$V9},{33:[2,20]},{33:[2,21]},o($Va,[2,7]),{9:[1,46]},{6:4,7:$V1,8:6,9:$V2,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,18:[1,47],19:$V6,20:$V7,22:$V8,33:$V9},{6:4,7:$V1,8:6,9:$V2,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,18:[1,48],19:$V6,20:$V7,22:$V8,33:$V9},{6:4,7:$V1,8:6,9:$V2,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,19:$V6,20:$V7,21:[1,49],22:$V8,33:$V9},{24:50,40:$Vc},{24:52,40:$Vc},{24:53,40:$Vc},{28:[1,54],40:[2,19]},o($Va,[2,10]),o($Va,[2,11]),o($Va,[2,12]),{17:[1,55]},{9:[2,22]},{9:[2,32]},{9:[2,14]},{9:[2,15]},{11:56,33:$V9},o($Vb,$V0,{5:57}),{40:[2,18]},{6:4,7:$V1,8:6,9:$V2,10:$V3,11:15,12:9,13:10,14:$V4,16:$V5,18:[1,58],19:$V6,20:$V7,22:$V8,33:$V9},o($Va,[2,13])],
defaultActions: {27:[2,26],28:[2,27],29:[2,28],30:[2,29],31:[2,30],32:[2,31],35:[2,20],36:[2,21],50:[2,22],51:[2,32],52:[2,14],53:[2,15],56:[2,18]},
parseError: function parseError(str, hash) {
if (hash.recoverable) {
this.trace(str);
@ -323,6 +332,7 @@ parse: function parse(input) {
}
return true;
}};
/* generated by jison-lex 0.3.4 */
var lexer = (function(){
var lexer = ({
@ -649,74 +659,72 @@ stateStackSize:function stateStackSize() {
},
options: {"case-insensitive":true},
performAction: function anonymous(yy,yy_,$avoiding_name_collisions,YY_START) {
// Pre-lexer code can go here
var YYSTATE=YY_START;
switch($avoiding_name_collisions) {
case 0:return 10;
case 0:return 9;
break;
case 1: return 38;
case 1:/* skip all whitespace */
break;
case 2: return 39;
case 2:/* skip same-line whitespace */
break;
case 3: return 36;
case 3:/* skip comments */
break;
case 4: return 37;
case 4:/* skip comments */
break;
case 5:/* skip whitespace */
case 5:return 10;
break;
case 6:/* skip comments */
case 6: this.begin('LINE'); return 16;
break;
case 7:/* skip comments */
case 7: this.begin('LINE'); return 19;
break;
case 8:return 11;
case 8: this.begin('LINE'); return 20;
break;
case 9:return 19;
case 9: this.begin('LINE'); return 21;
break;
case 10:return 17;
case 10: this.popState(); return 17;
break;
case 11:return 20;
case 11:return 18;
break;
case 12:return 21;
case 12:return 29;
break;
case 13:return 18;
case 13:return 30;
break;
case 14:return 29;
case 14:return 25;
break;
case 15:return 30;
case 15:return 22;
break;
case 16:return 25;
case 16:return 14;
break;
case 17:return 22;
case 17:return 4;
break;
case 18:return 15;
case 18:return 28;
break;
case 19:return 4;
case 19:return 9;
break;
case 20:return 28;
case 20:return 33;
break;
case 21:return 10;
case 21:return 36;
break;
case 22:return 33;
case 22:return 37;
break;
case 23:return 34;
break;
case 24:return 35;
break;
case 25:return 36;
case 25:return 38;
break;
case 26:return 37;
case 26:return 39;
break;
case 27:return 40;
break;
case 28:return 6;
case 28:return 9;
break;
case 29:return 'INVALID';
break;
}
},
rules: [/^(?:[\n]+)/i,/^(?:[\-][x])/i,/^(?:[\-][\-][x])/i,/^(?:[\-][>][>])/i,/^(?:[\-][\-][>][>])/i,/^(?:\s+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:participant\b)/i,/^(?:opt\b)/i,/^(?:loop\b)/i,/^(?:alt\b)/i,/^(?:else\b)/i,/^(?:end\b)/i,/^(?:left of\b)/i,/^(?:right of\b)/i,/^(?:over\b)/i,/^(?:note\b)/i,/^(?:title\b)/i,/^(?:sequenceDiagram\b)/i,/^(?:,)/i,/^(?:;)/i,/^(?:[^\->:\n,;]+)/i,/^(?:->)/i,/^(?:-->)/i,/^(?:->>)/i,/^(?:-->>)/i,/^(?::[^#\n;]+)/i,/^(?:$)/i,/^(?:.)/i],
conditions: {"INITIAL":{"rules":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],"inclusive":true}}
rules: [/^(?:[\n]+)/i,/^(?:\s+)/i,/^(?:((?!\n)\s)+)/i,/^(?:#[^\n]*)/i,/^(?:%[^\n]*)/i,/^(?:participant\b)/i,/^(?:loop\b)/i,/^(?:opt\b)/i,/^(?:alt\b)/i,/^(?:else\b)/i,/^(?:[^#\n;]*)/i,/^(?:end\b)/i,/^(?:left of\b)/i,/^(?:right of\b)/i,/^(?:over\b)/i,/^(?:note\b)/i,/^(?:title\b)/i,/^(?:sequenceDiagram\b)/i,/^(?:,)/i,/^(?:;)/i,/^(?:[^\->:\n,;]+)/i,/^(?:->>)/i,/^(?:-->>)/i,/^(?:->)/i,/^(?:-->)/i,/^(?:-[x])/i,/^(?:--[x])/i,/^(?::[^#\n;]+)/i,/^(?:$)/i,/^(?:.)/i],
conditions: {"LINE":{"rules":[2,3,10],"inclusive":false},"INITIAL":{"rules":[0,1,3,4,5,6,7,8,9,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29],"inclusive":true}}
});
return lexer;
})();

36
src/less/forest/classDiagram.less
View File

@ -19,4 +19,40 @@ g.classGroup line {
stroke: @nodeBorder;
stroke-width: 1;
fill:none;
}
.composition{
fill : @nodeBorder;
stroke: @nodeBorder;
stroke-width:1;
}
#compositionStart {
.composition;
}
#compositionEnd {
.composition;
}
.aggregation{
fill : @nodeBkg;
stroke: @nodeBorder;
stroke-width:1;
}
#aggregationStart {
.aggregation;
}
#aggregationEnd {
.aggregation;
}
#dependencyStart {
.composition;
}
#dependencyEnd {
.composition;
}
#extensionStart {
.composition;
}
#extensionEnd {
.composition;
}

8
test/examples/classDiagram.html
View File

@ -39,15 +39,15 @@ A should have a red background with styling from class.
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 -- C2
Class09 -- C3
Class09 -- Class07
Class09 --> C2
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 -- C2
Class08 <--> C2
</div>