mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-13 12:29:42 +02:00
Simple rendering of class diagrams
This commit is contained in:
@@ -7,22 +7,44 @@ var cDDb = require('./classDb');
|
||||
cd.yy = cDDb;
|
||||
var d3 = require('../../d3');
|
||||
import * as Logger from '../../logger';
|
||||
import * as dagre from 'dagre';
|
||||
var log = new Logger.Log();
|
||||
|
||||
|
||||
let idCache = new Map();
|
||||
let classCnt = 0;
|
||||
var conf = {
|
||||
|
||||
};
|
||||
|
||||
// Todo optimize
|
||||
var getGraphId = function(label){
|
||||
for (var [id, classInfo] of idCache) {
|
||||
if(classInfo.label === label){
|
||||
return id;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
var drawEdge = function(elem, path) {
|
||||
//The data for our line
|
||||
var lineData = path.points;
|
||||
|
||||
//This is the accessor function we talked about above
|
||||
var lineFunction = d3.svg.line()
|
||||
.x(function(d) { return d.x; })
|
||||
.y(function(d) { return d.y; })
|
||||
.interpolate('linear');
|
||||
|
||||
elem.append('path')
|
||||
.attr('d', lineFunction(lineData))
|
||||
.attr('stroke', 'black')
|
||||
.attr('stroke-width', 1)
|
||||
.attr('fill', 'none');
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 drawClass = function(elem, classDef){
|
||||
log.info('Rendering class '+classDef);
|
||||
//var rect = svgDraw.getNoteRect();
|
||||
//rect.x = startx;
|
||||
//rect.y = verticalPos;
|
||||
@@ -59,12 +81,37 @@ var drawClass = function(elem, classDef){
|
||||
//
|
||||
//rectElem.attr('height',textHeight+ 2*conf.noteMargin);
|
||||
//exports.bounds.bumpVerticalPos(textHeight+ 2*conf.noteMargin);
|
||||
var g = elem.append('g');
|
||||
let id = 'classId'+classCnt;
|
||||
let classInfo = {
|
||||
id:id,
|
||||
label:classDef.id,
|
||||
width:0,
|
||||
height:0
|
||||
};
|
||||
|
||||
var g = elem.append('g')
|
||||
.attr('id',id);
|
||||
var textElem = g.append('text') // text label for the x axis
|
||||
.style('text-anchor', 'middle')
|
||||
.attr('x', '10')
|
||||
.attr('y', '17')
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'classText')
|
||||
.text(classDef.id);
|
||||
var box = textElem.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);
|
||||
|
||||
classInfo.width = box.width+20;
|
||||
classInfo.height = box.height+10;
|
||||
|
||||
idCache.set(id,classInfo);
|
||||
classCnt++;
|
||||
return classInfo;
|
||||
};
|
||||
|
||||
|
||||
@@ -85,18 +132,58 @@ module.exports.draw = function (text, id) {
|
||||
cd.yy.clear();
|
||||
cd.parse(text);
|
||||
|
||||
log.info('Rendering diagram '+text);
|
||||
|
||||
|
||||
//// Fetch the default direction, use TD if none was found
|
||||
var diagram = d3.select('#'+id);
|
||||
var svg = diagram.append('svg');
|
||||
//var svg = diagram.append('svg');
|
||||
|
||||
// Layout graph, Create a new directed graph
|
||||
var g = new dagre.graphlib.Graph();
|
||||
|
||||
// Set an object for the graph label
|
||||
g.setGraph({});
|
||||
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
g.setDefaultEdgeLabel(function() { return {}; });
|
||||
|
||||
let classes = cDDb.getClasses();
|
||||
for(let classDef of classes.values()){
|
||||
drawClass(svg, 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.
|
||||
g.setNode(node.id, node);
|
||||
log.info('Org height: '+node.height);
|
||||
//g.setNode("swilliams", { label: "Saul Williams", width: 160, height: 100 });
|
||||
//g.setNode("bpitt", { label: "Brad Pitt", width: 108, height: 100 });
|
||||
//g.setNode("hford", { label: "Harrison Ford", width: 168, height: 100 });
|
||||
//g.setNode("lwilson", { label: "Luke Wilson", width: 144, height: 100 });
|
||||
//g.setNode("kbacon", { label: "Kevin Bacon", width: 121, height: 100 });
|
||||
}
|
||||
|
||||
//
|
||||
let relations = cDDb.getRelations();
|
||||
for(let relation of relations){
|
||||
|
||||
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2));
|
||||
}
|
||||
dagre.layout(g);
|
||||
g.nodes().forEach(function(v) {
|
||||
log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
|
||||
d3.select('#'+v).attr('transform','translate(' + (g.node(v).x-(g.node(v).width/2)) + ',' + (g.node(v).y-(g.node(v).height/2)) + ' )');
|
||||
//d3.select('#' +v +' rect').attr('x',(g.node(v).x-(g.node(v).width/2)))
|
||||
//.attr('y',(g.node(v).y-(g.node(v).height/2)));
|
||||
});
|
||||
g.edges().forEach(function(e) {
|
||||
log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
|
||||
drawEdge(diagram, g.edge(e))
|
||||
});
|
||||
|
||||
|
||||
//
|
||||
diagram.attr('height', '100%');
|
||||
diagram.attr('width', '100%');
|
||||
//
|
||||
//
|
||||
//
|
||||
|
Reference in New Issue
Block a user