Added notation for titles on subgraphs
This commit is contained in:
parent
3027882847
commit
27687fc742
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -250,8 +250,10 @@ exports.draw = function (text, id,isDot) {
|
|||
subGraphs.forEach(function(subG){
|
||||
i = i + 1;
|
||||
var id = 'subG'+i;
|
||||
//console.log('Setting id '+id);
|
||||
subG.forEach(function(node){
|
||||
|
||||
d3.selectAll('cluster').append('text');
|
||||
|
||||
subG.nodes.forEach(function(node){
|
||||
//console.log('Setting node',node,' to subgraph '+id);
|
||||
g.setParent(node,id);
|
||||
});
|
||||
|
@ -333,8 +335,55 @@ exports.draw = function (text, id,isDot) {
|
|||
render(d3.select("#" + id + " g"), g);
|
||||
var svgb = document.querySelector('#mermaidChart0');
|
||||
|
||||
/*
|
||||
var xPos = document.querySelectorAll('.clusters rect')[0].x.baseVal.value;
|
||||
var width = document.querySelectorAll('.clusters rect')[0].width.baseVal.value;
|
||||
var cluster = d3.selectAll('.cluster');
|
||||
var te = cluster.append('text');
|
||||
te.attr('x', xPos+width/2);
|
||||
te.attr('y', 12);
|
||||
//te.stroke('black');
|
||||
te.attr('id', 'apa12');
|
||||
te.style('text-anchor', 'middle');
|
||||
te.text('Title for cluster');
|
||||
*/
|
||||
// Center the graph
|
||||
svg.attr("height", g.graph().height );
|
||||
svg.attr("width", g.graph().width );
|
||||
svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
console.log('Fixing titles');
|
||||
var i = 0;
|
||||
subGraphs.forEach(function(subG){
|
||||
console.log('Setting id '+id);
|
||||
|
||||
|
||||
var clusterRects = document.querySelectorAll('#' + id + ' .clusters rect');
|
||||
var clusters = document.querySelectorAll('#' + id + ' .cluster');
|
||||
|
||||
|
||||
if(subG.title !== 'undefined'){
|
||||
console.log(clusterRects[i]);
|
||||
var xPos = clusterRects[i].x.baseVal.value;
|
||||
var yPos = clusterRects[i].y.baseVal.value;
|
||||
var width = clusterRects[i].width.baseVal.value;
|
||||
var cluster = d3.select(clusters[i]);
|
||||
var te = cluster.append('text');
|
||||
te.attr('x', xPos+width/2);
|
||||
te.attr('y', yPos +14);
|
||||
te.attr('fill', 'black');
|
||||
te.attr('stroke','none');
|
||||
te.attr('id', id+'Text');
|
||||
te.style('text-anchor', 'middle');
|
||||
console.log('Title '+subG.title);
|
||||
console.log('i',i);
|
||||
console.log('x'+xPos+width/2);
|
||||
console.log('y'+xPos);
|
||||
te.text(subG.title);
|
||||
}
|
||||
i = i + 1;
|
||||
});
|
||||
},200);
|
||||
};
|
|
@ -212,7 +212,7 @@ exports.defaultStyle = function () {
|
|||
/**
|
||||
* Clears the internal graph db so that a new graph can be parsed.
|
||||
*/
|
||||
exports.addSubGraph = function (list) {
|
||||
exports.addSubGraph = function (list, title) {
|
||||
function uniq(a) {
|
||||
var prims = {"boolean":{}, "number":{}, "string":{}}, objs = [];
|
||||
|
||||
|
@ -229,7 +229,7 @@ exports.addSubGraph = function (list) {
|
|||
|
||||
subG = uniq(subG.concat.apply(subG,list));
|
||||
|
||||
subGraphs.push(subG);
|
||||
subGraphs.push({nodes:subG,title:title});
|
||||
};
|
||||
exports.getSubGraphs = function (list) {
|
||||
return subGraphs;
|
||||
|
|
|
@ -204,8 +204,10 @@ statement
|
|||
{$$=[];}
|
||||
| clickStatement separator
|
||||
{$$=[];}
|
||||
| subgraph document endStatement separator
|
||||
{yy.addSubGraph($2);}
|
||||
| subgraph text separator document endStatement separator
|
||||
{yy.addSubGraph($4,$2);}
|
||||
| subgraph separator document endStatement separator
|
||||
{yy.addSubGraph($3,undefined);}
|
||||
;
|
||||
|
||||
endStatement: end
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -249,7 +249,7 @@ describe('when parsing ',function(){
|
|||
expect(edges[0].type).toBe('arrow_circle');
|
||||
});
|
||||
it('should handle subgraphs',function(){
|
||||
var res = flow.parser.parse('graph TD;A-->B;subgraph;c-->d;end;');
|
||||
var res = flow.parser.parse('graph TD;A-->B;subgraph myTitle;c-->d;end;');
|
||||
|
||||
var vert = flow.parser.yy.getVertices();
|
||||
var edges = flow.parser.yy.getEdges();
|
||||
|
@ -259,7 +259,7 @@ describe('when parsing ',function(){
|
|||
});
|
||||
|
||||
it('should handle subgraphs',function(){
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-->d\nend\n');
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-->d\nend\n');
|
||||
|
||||
var vert = flow.parser.yy.getVertices();
|
||||
var edges = flow.parser.yy.getEdges();
|
||||
|
@ -269,7 +269,7 @@ describe('when parsing ',function(){
|
|||
});
|
||||
|
||||
it('should handle subgraphs',function(){
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-->d\nend;');
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-->d\nend;');
|
||||
|
||||
var vert = flow.parser.yy.getVertices();
|
||||
var edges = flow.parser.yy.getEdges();
|
||||
|
@ -279,7 +279,7 @@ describe('when parsing ',function(){
|
|||
});
|
||||
|
||||
it('should handle subgraphs',function(){
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph\nc-- text -->d\nd-->e\n end;');
|
||||
var res = flow.parser.parse('graph TD\nA-->B\nsubgraph myTitle\nc-- text -->d\nd-->e\n end;');
|
||||
|
||||
var vert = flow.parser.yy.getVertices();
|
||||
var edges = flow.parser.yy.getEdges();
|
||||
|
|
|
@ -39,6 +39,19 @@
|
|||
class green B;
|
||||
</div>
|
||||
<h1>Sub graphs</h1>
|
||||
<div class="mermaid">graph TB
|
||||
subgraph one
|
||||
a1-->a2
|
||||
end
|
||||
subgraph two
|
||||
b1-->b2
|
||||
end
|
||||
subgraph three
|
||||
c1-->c2
|
||||
end
|
||||
c1-->a2
|
||||
|
||||
</div>
|
||||
<div class="mermaid">graph TB
|
||||
subgraph
|
||||
sq[Square shape] -.-> ci((Circle shape))
|
||||
|
@ -48,7 +61,7 @@
|
|||
end
|
||||
|
||||
%% Notice that no text in shape are added here instead that is appended further down
|
||||
subgraph
|
||||
subgraph Go go
|
||||
e --> od3>Really long text with linebreak<br>in an Odd shape]
|
||||
|
||||
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
|
||||
|
|
Loading…
Reference in New Issue