diff --git a/src/diagrams/classDiagram/classDb.js b/src/diagrams/classDiagram/classDb.js index c647c85b8..04ef557fb 100644 --- a/src/diagrams/classDiagram/classDb.js +++ b/src/diagrams/classDiagram/classDb.js @@ -56,15 +56,26 @@ exports.addMembers = function (className, MembersArr) { var theClass = classes.get(className); if(typeof MembersArr === 'string'){ if(MembersArr.substr(-1) === ')'){ - theClass.methods.push(MembersArr.substr(2)); + theClass.methods.push(MembersArr); } else{ - theClass.members.push(MembersArr.substr(2)); + theClass.members.push(MembersArr); } } //console.warn('MembersArr:'+MembersArr); }; +exports.cleanupLabel = function (label) { + + if(label.substring(0,1) === ':'){ + //console.warn('Fixing label:'+label.substr(2).trim()); + return label.substr(2).trim(); + } + else{ + return label.trim(); + } +}; + exports.lineType = { LINE:0, DOTTED_LINE:1 diff --git a/src/diagrams/classDiagram/classRenderer.js b/src/diagrams/classDiagram/classRenderer.js index 7f7c2f259..fe3812bcb 100644 --- a/src/diagrams/classDiagram/classRenderer.js +++ b/src/diagrams/classDiagram/classRenderer.js @@ -122,10 +122,11 @@ var insertMarkers = function (elem) { .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z'); }; +var edgeCount = 0; var drawEdge = function (elem, path, relation) { - var getRelationType = function(type){ + var getRelationType = function (type) { //console.warn(type); - switch(type){ + switch (type) { case cDDb.relationType.AGGREGATION: return 'aggregation'; case cDDb.relationType.EXTENSION: @@ -154,18 +155,69 @@ var drawEdge = function (elem, path, relation) { var svgPath = elem.append('path') .attr('d', lineFunction(lineData)) + .attr('id', 'edge' + edgeCount) .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, '\\)'); //console.log(relation.relation.type1); - if(relation.relation.type1 !== 'none'){ - svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1)+'Start' + ')'); + 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' + ')'); + if (relation.relation.type2 !== 'none') { + svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')'); } + + console.warn(path); + + //var bbox = svgPath[0][0].getBBox(); + //var x = Math.floor(bbox.x + bbox.width/2.0); + //var y = Math.floor(bbox.y + bbox.height/2.0); + var x, y; + var l = path.points.length; + if ((l % 2) !== 0) { + var p1 = path.points[Math.floor(l / 2)]; + var p2 = path.points[Math.ceil(l / 2)]; + x = (p1.x + p2.x) / 2; + y = (p1.y + p2.y) / 2; + } + else { + var p = path.points[Math.floor(l / 2)]; + x = p.x; + y = p.y; + } + + if (typeof relation.title !== 'undefined') { + var g = elem.append('g'). + attr('class','classLabel'); + var label = g.append('text') + .attr('class', 'label') + .attr('x', x) + .attr('y', y) + .attr('fill', 'red') + .attr('text-anchor', 'middle') + .text(relation.title); + + window.label = label; + var bounds = label.node().getBBox(); + console.log(bounds); + + g.insert('rect', ':first-child') + .attr('class', 'box') + .attr('x', bounds.x-conf.padding/2) + .attr('y', bounds.y-conf.padding/2) + .attr('width', bounds.width + 2 * conf.padding/2) + .attr('height', bounds.height + 2 * conf.padding/2); + //.append('textpath') + //.attr('xlink:href','#edge'+edgeCount) + //.attr('text-anchor','middle') + //.attr('startOffset','50%') + + } + + edgeCount++; } var drawClass = function (elem, classDef) { @@ -283,10 +335,14 @@ module.exports.draw = function (text, id) { //var svg = diagram.append('svg'); // Layout graph, Create a new directed graph - var g = new dagre.graphlib.Graph(); + var g = new dagre.graphlib.Graph({ + multigraph: true + }); // Set an object for the graph label - g.setGraph({}); + g.setGraph({ + isMultiGraph: true + }); // Default to assigning a new object as a label for each new edge. g.setDefaultEdgeLabel(function () { @@ -309,9 +365,10 @@ module.exports.draw = function (text, id) { } let relations = cDDb.getRelations(); + var i = 0; for (let relation of relations) { - - g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2),{relation:relation}); + i = i + 1; + g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {relation: relation}); } dagre.layout(g); g.nodes().forEach(function (v) { diff --git a/src/diagrams/classDiagram/parser/classDiagram.jison b/src/diagrams/classDiagram/parser/classDiagram.jison index b90f4e7d7..4c8cef763 100644 --- a/src/diagrams/classDiagram/parser/classDiagram.jison +++ b/src/diagrams/classDiagram/parser/classDiagram.jison @@ -138,7 +138,7 @@ className statement : relationStatement { yy.addRelation($1); } - | relationStatement LABEL { $1.title = $2; yy.addRelation($1); } + | relationStatement LABEL { $1.title = yy.cleanupLabel($2); yy.addRelation($1); } | classStatement | methodStatement ; @@ -155,7 +155,7 @@ members methodStatement : className {/*console.log('Rel found',$1);*/} - | className LABEL {yy.addMembers($1,$2);} + | className LABEL {yy.addMembers($1,yy.cleanupLabel($2));} | MEMBER {console.warn('Member',$1);} | SEPARATOR {/*console.log('sep found',$1);*/} ; diff --git a/src/diagrams/classDiagram/parser/classDiagram.js b/src/diagrams/classDiagram/parser/classDiagram.js index 7a3bdbffe..21f813dfb 100644 --- a/src/diagrams/classDiagram/parser/classDiagram.js +++ b/src/diagrams/classDiagram/parser/classDiagram.js @@ -93,7 +93,7 @@ case 7: yy.addRelation($$[$0]); break; case 8: - $$[$0-1].title = $$[$0]; yy.addRelation($$[$0-1]); + $$[$0-1].title = yy.cleanupLabel($$[$0]); yy.addRelation($$[$0-1]); break; case 12: /*console.log($$[$0-3],JSON.stringify($$[$0-1]));*/yy.addMembers($$[$0-3],$$[$0-1]); @@ -108,7 +108,7 @@ case 15: /*console.log('Rel found',$$[$0]);*/ break; case 16: -yy.addMembers($$[$0-1],$$[$0]); +yy.addMembers($$[$0-1],yy.cleanupLabel($$[$0])); break; case 17: console.warn('Member',$$[$0]); diff --git a/src/less/forest/classDiagram.less b/src/less/forest/classDiagram.less index c59df655f..8671bd7c9 100644 --- a/src/less/forest/classDiagram.less +++ b/src/less/forest/classDiagram.less @@ -15,6 +15,17 @@ g.classGroup line { stroke-width:1; } +svg .classLabel .box { + stroke: none; + stroke-width:0; + fill: @nodeBkg; + opacity: 0.5; +} + +svg .classLabel .label { + fill: @nodeBorder; +} + .relation { stroke: @nodeBorder; stroke-width: 1;