marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-13 20:39:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Rendering of class diagrams with methods and members represented

Browse Source
This commit is contained in:
knsv
2015-11-01 19:00:14 +01:00
parent 068b7ce6a9
commit 7fe5b5af7a
4 changed files with 96 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,8 @@ exports.addClass = function (id) {
if(typeof classes.get(id) === 'undefined'){
classes.set(id, {
id:id,
methods:[]
methods:[],
members:[]
});
}
};
@@ -53,6 +54,16 @@ exports.addRelation = function (relation) {
};
exports.addMembers = function (className, MembersArr) {
var theClass = classes.get(className);
if(typeof MembersArr === 'string'){
if(MembersArr.substr(-1) === ')'){
theClass.methods.push(MembersArr.substr(2));
}
else{
theClass.members.push(MembersArr.substr(2));
}
}
//console.warn('MembersArr:'+MembersArr);
};
exports.lineType = {

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

@@ -16,7 +16,9 @@ if(typeof Map !== 'undefined'){
}
let classCnt = 0;
var conf = {
dividerMargin:10,
padding:5 ,
textHeight:15
};
// Todo optimize
@@ -37,7 +39,8 @@ var drawEdge = function(elem, path) {
var lineFunction = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate('cardinal');
//.interpolate('cardinal');
.interpolate('basis');
elem.append('path')
.attr('d', lineFunction(lineData))
@@ -48,42 +51,16 @@ var drawEdge = function(elem, path) {
var drawClass = function(elem, classDef){
log.info('Rendering class '+classDef);
//var rect = svgDraw.getNoteRect();
//rect.x = startx;
//rect.y = verticalPos;
//rect.width = conf.width;
//rect.class = 'note';
//
//var g = elem.append('g');
//var rectElem = svgDraw.drawRect(g, rect);
//
//var textObj = svgDraw.getTextObj();
//textObj.x = startx-4;
//textObj.y = verticalPos-13;
//textObj.textMargin = conf.noteMargin;
//textObj.dy = '1em';
//textObj.text = msg.message;
//textObj.class = 'noteText';
//
//var textElem = svgDraw.drawText(g,textObj, conf.width-conf.noteMargin);
//
//var textHeight = textElem[0][0].getBBox().height;
//if(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);
// 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);
//}else{
// exports.bounds.insert(startx, verticalPos, startx + conf.width, verticalPos + 2*conf.noteMargin + textHeight);
//}
//
//rectElem.attr('height',textHeight+ 2*conf.noteMargin);
//exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
var addTspan = function(textEl, txt,isFirst){
var tSpan = textEl.append('tspan')
.attr('x',conf.padding)
.text(txt);
if(!isFirst){
tSpan.attr('dy',15);
}
};
let id = 'classId'+classCnt;
let classInfo = {
id:id,
@@ -94,23 +71,75 @@ var drawClass = function(elem, classDef){
var g = elem.append('g')
.attr('id',id);
var textElem = g.append('text') // text label for the x axis
.attr('x', '10')
.attr('y', '17')
var title = g.append('text') // text label for the x axis
.attr('x', conf.padding)
.attr('y', conf.textHeight+conf.padding)
.attr('fill', 'white')
.attr('class', 'classText')
.text(classDef.id);
var box = textElem.node().getBBox();
var titleHeight = title.node().getBBox().height;
var membersLine = g.append('line') // text label for the x axis
.attr('x1',0)
.attr('y1',conf.padding+titleHeight + conf.dividerMargin/2)
.attr('y2',conf.padding+titleHeight + conf.dividerMargin/2)
.attr('fill', 'white')
.attr('class', 'classText')
.attr('style','stroke:rgb(255,255,255);stroke-width:1');
var members = g.append('text') // text label for the x axis
.attr('x', conf.padding)
.attr('y', titleHeight+(conf.dividerMargin)+conf.textHeight)
.attr('fill', 'white')
.attr('class', 'classText');
let isFirst = true;
for(let member of classDef.members){
addTspan(members,member, isFirst);
isFirst = false;
}
//console.warn(JSON.stringify(classDef));
var membersBox = members.node().getBBox();
var methodsLine = g.append('line') // text label for the x axis
.attr('x1',0)
.attr('y1',conf.padding + titleHeight + 3*conf.dividerMargin/2+membersBox.height)
.attr('y2',conf.padding + titleHeight + 3*conf.dividerMargin/2+membersBox.height)
.attr('fill', 'white')
.attr('class', 'classText')
.attr('style','stroke:rgb(255,255,255);stroke-width:1');
var methods = g.append('text') // text label for the x axis
.attr('x', conf.padding)
.attr('y', titleHeight+2*conf.dividerMargin+membersBox.height + conf.textHeight)
.attr('fill', 'white')
.attr('class', 'classText');
isFirst = true;
for(let method of classDef.methods){
addTspan(methods,method,isFirst);
isFirst = false;
}
var classBox = g.node().getBBox();
g.insert('rect',':first-child')
.attr('x',0)
.attr('y',0)
.attr('fill','darkgrey')
.attr('width',box.width+20)
.attr('height',box.height+10);
.attr('width', classBox.width+2*conf.padding)
.attr('height', classBox.height+conf.padding+0.5*conf.dividerMargin);
classInfo.width = box.width+20;
classInfo.height = box.height+10;
membersLine.attr('x2',classBox.width+2*conf.padding);
methodsLine.attr('x2',classBox.width+2*conf.padding);
classInfo.width = classBox.width+2*conf.padding;
classInfo.height = classBox.height+conf.padding+0.5*conf.dividerMargin;
idCache.set(id,classInfo);
classCnt++;
@@ -153,7 +182,7 @@ module.exports.draw = function (text, id) {
let classes = cDDb.getClasses();
for(let classDef of classes.values()){
let node = drawClass(diagram, classDef)
let node = drawClass(diagram, classDef);
// Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of
// our nodes.

4
src/diagrams/classDiagram/parser/classDiagram.jison
View File

@@ -155,8 +155,8 @@ members
methodStatement
: className {/*console.log('Rel found',$1);*/}
| className LABEL
| MEMBER
| className LABEL {yy.addMembers($1,$2);}
| MEMBER {console.warn('Member',$1);}
| SEPARATOR {/*console.log('sep found',$1);*/}
;

6
src/diagrams/classDiagram/parser/classDiagram.js
View File

@@ -107,6 +107,12 @@ break;
case 15:
/*console.log('Rel found',$$[$0]);*/
break;
case 16:
yy.addMembers($$[$0-1],$$[$0]);
break;
case 17:
console.warn('Member',$$[$0]);
break;
case 18:
/*console.log('sep found',$$[$0]);*/
break;