marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-12 03:49:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix class diagram mermaid

Browse Source
This commit is contained in:
Dan Shai
2019-02-12 10:27:05 +02:00
parent 7d3578b31a
commit ec298185a3
1 changed files with 345 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

599
src/diagrams/class/classRenderer.js
View File

@@ -1,365 +1,456 @@
import dagre from 'dagre-layout' import dagre from "dagre-layout";
import graphlib from 'graphlibrary' import graphlib from "graphlibrary";
import * as d3 from 'd3' import * as d3 from "d3";
import classDb from './classDb' import classDb from "./classDb";
import { logger } from '../../logger' import { logger } from "../../logger";
import { parser } from './parser/classDiagram' import { parser } from "./parser/classDiagram";
parser.yy = classDb Array.prototype.removeIf = function(callback) {
var i = this.length;
while (i--) {
if (callback(this[i], i)) {
this.splice(i, 1);
}
}
};
const idCache = {} parser.yy = classDb;
let classCnt = 0 const idCache = {};
let classCnt = 0;
const conf = { const conf = {
dividerMargin: 10, dividerMargin: 10,
padding: 5, padding: 5,
textHeight: 10 textHeight: 10
} };
// Todo optimize // Todo optimize
const getGraphId = function (label) { const getGraphId = function(label) {
const keys = Object.keys(idCache) const keys = Object.keys(idCache);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
if (idCache[keys[i]].label === label) { if (idCache[keys[i]].label === label) {
return keys[i] return keys[i];
} }
} }
return undefined return undefined;
} };
/** /**
* Setup arrow head and define the marker. The result is appended to the svg. * Setup arrow head and define the marker. The result is appended to the svg.
*/ */
const insertMarkers = function (elem) { const insertMarkers = function(elem) {
elem.append('defs').append('marker') elem
.attr('id', 'extensionStart') .append("defs")
.attr('class', 'extension') .append("marker")
.attr('refX', 0) .attr("id", "extensionStart")
.attr('refY', 7) .attr("class", "extension")
.attr('markerWidth', 190) .attr("refX", 0)
.attr('markerHeight', 240) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 190)
.append('path') .attr("markerHeight", 240)
.attr('d', 'M 1,7 L18,13 V 1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 1,7 L18,13 V 1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'extensionEnd') .append("defs")
.attr('refX', 19) .append("marker")
.attr('refY', 7) .attr("id", "extensionEnd")
.attr('markerWidth', 20) .attr("refX", 19)
.attr('markerHeight', 28) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 20)
.append('path') .attr("markerHeight", 28)
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead .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') elem
.attr('id', 'compositionStart') .append("defs")
.attr('class', 'extension') .append("marker")
.attr('refX', 0) .attr("id", "compositionStart")
.attr('refY', 7) .attr("class", "extension")
.attr('markerWidth', 190) .attr("refX", 0)
.attr('markerHeight', 240) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 190)
.append('path') .attr("markerHeight", 240)
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'compositionEnd') .append("defs")
.attr('refX', 19) .append("marker")
.attr('refY', 7) .attr("id", "compositionEnd")
.attr('markerWidth', 20) .attr("refX", 19)
.attr('markerHeight', 28) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 20)
.append('path') .attr("markerHeight", 28)
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'aggregationStart') .append("defs")
.attr('class', 'extension') .append("marker")
.attr('refX', 0) .attr("id", "aggregationStart")
.attr('refY', 7) .attr("class", "extension")
.attr('markerWidth', 190) .attr("refX", 0)
.attr('markerHeight', 240) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 190)
.append('path') .attr("markerHeight", 240)
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'aggregationEnd') .append("defs")
.attr('refX', 19) .append("marker")
.attr('refY', 7) .attr("id", "aggregationEnd")
.attr('markerWidth', 20) .attr("refX", 19)
.attr('markerHeight', 28) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 20)
.append('path') .attr("markerHeight", 28)
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'dependencyStart') .append("defs")
.attr('class', 'extension') .append("marker")
.attr('refX', 0) .attr("id", "dependencyStart")
.attr('refY', 7) .attr("class", "extension")
.attr('markerWidth', 190) .attr("refX", 0)
.attr('markerHeight', 240) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 190)
.append('path') .attr("markerHeight", 240)
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z') .attr("orient", "auto")
.append("path")
.attr("d", "M 5,7 L9,13 L1,7 L9,1 Z");
elem.append('defs').append('marker') elem
.attr('id', 'dependencyEnd') .append("defs")
.attr('refX', 19) .append("marker")
.attr('refY', 7) .attr("id", "dependencyEnd")
.attr('markerWidth', 20) .attr("refX", 19)
.attr('markerHeight', 28) .attr("refY", 7)
.attr('orient', 'auto') .attr("markerWidth", 20)
.append('path') .attr("markerHeight", 28)
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z') .attr("orient", "auto")
} .append("path")
.attr("d", "M 18,7 L9,13 L14,7 L9,1 Z");
};
let edgeCount = 0 let edgeCount = 0;
const drawEdge = function (elem, path, relation) { let total = 0;
const getRelationType = function (type) { const drawEdge = function(elem, path, relation) {
const getRelationType = function(type) {
switch (type) { switch (type) {
case classDb.relationType.AGGREGATION: case classDb.relationType.AGGREGATION:
return 'aggregation' return "aggregation";
case classDb.relationType.EXTENSION: case classDb.relationType.EXTENSION:
return 'extension' return "extension";
case classDb.relationType.COMPOSITION: case classDb.relationType.COMPOSITION:
return 'composition' return "composition";
case classDb.relationType.DEPENDENCY: case classDb.relationType.DEPENDENCY:
return 'dependency' return "dependency";
} }
} };
path.points.removeIf(function(p, idx) {
return isNaN(p.y);
});
// The data for our line // The data for our line
const lineData = path.points const lineData = path.points;
// This is the accessor function we talked about above // This is the accessor function we talked about above
const lineFunction = d3.line() const lineFunction = d3
.x(function (d) { .line()
return d.x .x(function(d) {
return d.x;
}) })
.y(function (d) { .y(function(d) {
return d.y return d.y;
}) })
.curve(d3.curveBasis) .curve(d3.curveBasis);
const svgPath = elem.append('path') const svgPath = elem
.attr('d', lineFunction(lineData)) .append("path")
.attr('id', 'edge' + edgeCount) .attr("d", lineFunction(lineData))
.attr('class', 'relation') .attr("id", "edge" + edgeCount)
let url = '' .attr("class", "relation");
let url = "";
if (conf.arrowMarkerAbsolute) { if (conf.arrowMarkerAbsolute) {
url = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search url =
url = url.replace(/\(/g, '\\(') window.location.protocol +
url = url.replace(/\)/g, '\\)') "//" +
window.location.host +
window.location.pathname +
window.location.search;
url = url.replace(/\(/g, "\\(");
url = url.replace(/\)/g, "\\)");
} }
if (relation.relation.type1 !== 'none') { if (relation.relation.type1 !== "none") {
svgPath.attr('marker-start', 'url(' + url + '#' + getRelationType(relation.relation.type1) + 'Start' + ')') svgPath.attr(
"marker-start",
"url(" +
url +
"#" +
getRelationType(relation.relation.type1) +
"Start" +
")"
);
} }
if (relation.relation.type2 !== 'none') { if (relation.relation.type2 !== "none") {
svgPath.attr('marker-end', 'url(' + url + '#' + getRelationType(relation.relation.type2) + 'End' + ')') svgPath.attr(
"marker-end",
"url(" +
url +
"#" +
getRelationType(relation.relation.type2) +
"End" +
")"
);
} }
let x, y let x, y;
const l = path.points.length const l = path.points.length;
if ((l % 2) !== 0) { if (l % 2 !== 0 && l > 1) {
const p1 = path.points[Math.floor(l / 2)] const p1 = path.points[Math.floor(l / 2)];
const p2 = path.points[Math.ceil(l / 2)] const p2 = path.points[Math.ceil(l / 2)];
x = (p1.x + p2.x) / 2 x = (p1.x + p2.x) / 2;
y = (p1.y + p2.y) / 2 y = (p1.y + p2.y) / 2;
} else { } else {
const p = path.points[Math.floor(l / 2)] const p = path.points[Math.floor(l / 2)];
x = p.x x = p.x;
y = p.y y = p.y;
} }
if (typeof relation.title !== 'undefined') { if (typeof relation.title !== "undefined") {
const g = elem.append('g') const g = elem.append("g").attr("class", "classLabel");
.attr('class', 'classLabel') const label = g
const label = g.append('text') .append("text")
.attr('class', 'label') .attr("class", "label")
.attr('x', x) .attr("x", x)
.attr('y', y) .attr("y", y)
.attr('fill', 'red') .attr("fill", "red")
.attr('text-anchor', 'middle') .attr("text-anchor", "middle")
.text(relation.title) .text(relation.title);
window.label = label window.label = label;
const bounds = label.node().getBBox() const bounds = label.node().getBBox();
g.insert('rect', ':first-child') g.insert("rect", ":first-child")
.attr('class', 'box') .attr("class", "box")
.attr('x', bounds.x - conf.padding / 2) .attr("x", bounds.x - conf.padding / 2)
.attr('y', bounds.y - conf.padding / 2) .attr("y", bounds.y - conf.padding / 2)
.attr('width', bounds.width + conf.padding) .attr("width", bounds.width + conf.padding)
.attr('height', bounds.height + conf.padding) .attr("height", bounds.height + conf.padding);
} }
edgeCount++ edgeCount++;
} };
const drawClass = function (elem, classDef) { const drawClass = function(elem, classDef) {
logger.info('Rendering class ' + classDef) logger.info("Rendering class " + classDef);
const addTspan = function (textEl, txt, isFirst) { const addTspan = function(textEl, txt, isFirst) {
const tSpan = textEl.append('tspan') const tSpan = textEl
.attr('x', conf.padding) .append("tspan")
.text(txt) .attr("x", conf.padding)
.text(txt);
if (!isFirst) { if (!isFirst) {
tSpan.attr('dy', conf.textHeight) tSpan.attr("dy", conf.textHeight);
} }
} };
const id = 'classId' + classCnt const id = "classId" + (classCnt % total);
const classInfo = { const classInfo = {
id: id, id: id,
label: classDef.id, label: classDef.id,
width: 0, width: 0,
height: 0 height: 0
} };
const g = elem.append('g') const g = elem
.attr('id', id) .append("g")
.attr('class', 'classGroup') .attr("id", id)
const title = g.append('text') .attr("class", "classGroup");
.attr('x', conf.padding) const title = g
.attr('y', conf.textHeight + conf.padding) .append("text")
.text(classDef.id) .attr("x", conf.padding)
.attr("y", conf.textHeight + conf.padding)
.text(classDef.id);
const titleHeight = title.node().getBBox().height const titleHeight = title.node().getBBox().height;
const membersLine = g.append('line') // text label for the x axis const membersLine = g
.attr('x1', 0) .append("line") // text label for the x axis
.attr('y1', conf.padding + titleHeight + conf.dividerMargin / 2) .attr("x1", 0)
.attr('y2', conf.padding + titleHeight + conf.dividerMargin / 2) .attr("y1", conf.padding + titleHeight + conf.dividerMargin / 2)
.attr("y2", conf.padding + titleHeight + conf.dividerMargin / 2);
const members = g.append('text') // text label for the x axis const members = g
.attr('x', conf.padding) .append("text") // text label for the x axis
.attr('y', titleHeight + (conf.dividerMargin) + conf.textHeight) .attr("x", conf.padding)
.attr('fill', 'white') .attr("y", titleHeight + conf.dividerMargin + conf.textHeight)
.attr('class', 'classText') .attr("fill", "white")
.attr("class", "classText");
let isFirst = true let isFirst = true;
classDef.members.forEach(function (member) { classDef.members.forEach(function(member) {
addTspan(members, member, isFirst) addTspan(members, member, isFirst);
isFirst = false isFirst = false;
}) });
const membersBox = members.node().getBBox() const membersBox = members.node().getBBox();
const methodsLine = g.append('line') // text label for the x axis const methodsLine = g
.attr('x1', 0) .append("line") // text label for the x axis
.attr('y1', conf.padding + titleHeight + conf.dividerMargin + membersBox.height) .attr("x1", 0)
.attr('y2', conf.padding + titleHeight + conf.dividerMargin + membersBox.height) .attr(
"y1",
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
)
.attr(
"y2",
conf.padding + titleHeight + conf.dividerMargin + membersBox.height
);
const methods = g.append('text') // text label for the x axis const methods = g
.attr('x', conf.padding) .append("text") // text label for the x axis
.attr('y', titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight) .attr("x", conf.padding)
.attr('fill', 'white') .attr(
.attr('class', 'classText') "y",
titleHeight + 2 * conf.dividerMargin + membersBox.height + conf.textHeight
)
.attr("fill", "white")
.attr("class", "classText");
isFirst = true isFirst = true;
classDef.methods.forEach(function (method) { classDef.methods.forEach(function(method) {
addTspan(methods, method, isFirst) addTspan(methods, method, isFirst);
isFirst = false isFirst = false;
}) });
const classBox = g.node().getBBox() const classBox = g.node().getBBox();
g.insert('rect', ':first-child') g.insert("rect", ":first-child")
.attr('x', 0) .attr("x", 0)
.attr('y', 0) .attr("y", 0)
.attr('width', classBox.width + 2 * conf.padding) .attr("width", classBox.width + 2 * conf.padding)
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin) .attr("height", classBox.height + conf.padding + 0.5 * conf.dividerMargin);
membersLine.attr('x2', classBox.width + 2 * conf.padding) membersLine.attr("x2", classBox.width + 2 * conf.padding);
methodsLine.attr('x2', classBox.width + 2 * conf.padding) methodsLine.attr("x2", classBox.width + 2 * conf.padding);
classInfo.width = classBox.width + 2 * conf.padding classInfo.width = classBox.width + 2 * conf.padding;
classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin classInfo.height = classBox.height + conf.padding + 0.5 * conf.dividerMargin;
idCache[id] = classInfo idCache[id] = classInfo;
classCnt++ classCnt++;
return classInfo return classInfo;
} };
export const setConf = function (cnf) { export const setConf = function(cnf) {
const keys = Object.keys(cnf) const keys = Object.keys(cnf);
keys.forEach(function (key) { keys.forEach(function(key) {
conf[key] = cnf[key] conf[key] = cnf[key];
}) });
} };
/** /**
* Draws a flowchart in the tag with id: id based on the graph definition in text. * Draws a flowchart in the tag with id: id based on the graph definition in text.
* @param text * @param text
* @param id * @param id
*/ */
export const draw = function (text, id) { export const draw = function(text, id) {
parser.yy.clear() parser.yy.clear();
parser.parse(text) parser.parse(text);
logger.info('Rendering diagram ' + text) logger.info("Rendering diagram " + text);
/// / Fetch the default direction, use TD if none was found /// / Fetch the default direction, use TD if none was found
const diagram = d3.select(`[id="${id}"]`) const diagram = d3.select(`[id="${id}"]`);
insertMarkers(diagram) insertMarkers(diagram);
// Layout graph, Create a new directed graph // Layout graph, Create a new directed graph
const g = new graphlib.Graph({ const g = new graphlib.Graph({
multigraph: true multigraph: true
}) });
// Set an object for the graph label // Set an object for the graph label
g.setGraph({ g.setGraph({
isMultiGraph: true isMultiGraph: true
}) });
// Default to assigning a new object as a label for each new edge. // Default to assigning a new object as a label for each new edge.
g.setDefaultEdgeLabel(function () { g.setDefaultEdgeLabel(function() {
return {} return {};
}) });
const classes = classDb.getClasses() const classes = classDb.getClasses();
const keys = Object.keys(classes) const keys = Object.keys(classes);
total = keys.length;
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const classDef = classes[keys[i]] const classDef = classes[keys[i]];
const node = drawClass(diagram, classDef) const node = drawClass(diagram, classDef);
// Add nodes to the graph. The first argument is the node id. The second is // 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 // metadata about the node. In this case we're going to add labels to each of
// our nodes. // our nodes.
g.setNode(node.id, node) g.setNode(node.id, node);
logger.info('Org height: ' + node.height) logger.info("Org height: " + node.height);
} }
const relations = classDb.getRelations() const relations = classDb.getRelations();
relations.forEach(function (relation) { relations.forEach(function(relation) {
logger.info('tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)) logger.info(
g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), { relation: relation }) "tjoho" +
}) getGraphId(relation.id1) +
dagre.layout(g) getGraphId(relation.id2) +
g.nodes().forEach(function (v) { JSON.stringify(relation)
if (typeof v !== 'undefined') { );
logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v))) g.setEdge(getGraphId(relation.id1), getGraphId(relation.id2), {
d3.select('#' + v).attr('transform', 'translate(' + (g.node(v).x - (g.node(v).width / 2)) + ',' + (g.node(v).y - (g.node(v).height / 2)) + ' )') relation: relation
});
});
dagre.layout(g);
g.nodes().forEach(function(v) {
if (typeof v !== "undefined" && typeof g.node(v) !== "undefined") {
logger.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) +
" )"
);
} }
}) });
g.edges().forEach(function (e) { g.edges().forEach(function(e) {
logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e))) if (typeof e !== "undefined" && typeof g.edge(e) !== "undefined") {
drawEdge(diagram, g.edge(e), g.edge(e).relation) logger.debug(
}) "Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(g.edge(e))
);
drawEdge(diagram, g.edge(e), g.edge(e).relation);
}
});
diagram.attr('height', '100%') diagram.attr("height", "100%");
diagram.attr('width', '100%') diagram.attr("width", "100%");
diagram.attr('viewBox', '0 0 ' + (g.graph().width + 20) + ' ' + (g.graph().height + 20)) diagram.attr(
} "viewBox",
"0 0 " + (g.graph().width + 20) + " " + (g.graph().height + 20)
);
};
export default { export default {
setConf, setConf,
draw draw
} };