mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #2255 from mermaid-js/2253_class_diagram_v2_fixes 

2253 class diagram v2 fixes
This commit is contained in:
Knut Sveidqvist 2021-08-19 19:31:29 +02:00 committed by GitHub
parent d09dea7e5e 798a0ad783
commit c04aac4ae0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/dagre-wrapper/edges.js
View File

@ -43,25 +43,27 @@ export const insertEdgeLabel = (elem, edge) => {
edge.width = bbox.width;
edge.height = bbox.height;
let fo;
if (edge.startLabelLeft) {
// Create the actual text element
const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);
const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');
inner.node().appendChild(startLabelElement);
fo=inner.node().appendChild(startLabelElement);
const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
if (!terminalLabels[edge.id]) {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
setTerminalWidth(fo,bbox);
}
if (edge.startLabelRight) {
// Create the actual text element
const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);
const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');
startEdgeLabelRight.node().appendChild(startLabelElement);
fo=startEdgeLabelRight.node().appendChild(startLabelElement);
inner.node().appendChild(startLabelElement);
const slBox = startLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
@ -70,21 +72,25 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startRight = startEdgeLabelRight;
setTerminalWidth(fo,bbox);
}
if (edge.endLabelLeft) {
// Create the actual text element
const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);
const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');
const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');
inner.node().appendChild(endLabelElement);
fo=inner.node().appendChild(endLabelElement);
const slBox = endLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
endEdgeLabelLeft.node().appendChild(endLabelElement);
if (!terminalLabels[edge.id]) {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
setTerminalWidth(fo,bbox);
}
if (edge.endLabelRight) {
// Create the actual text element
@ -92,7 +98,7 @@ export const insertEdgeLabel = (elem, edge) => {
const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');
const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');
inner.node().appendChild(endLabelElement);
fo=inner.node().appendChild(endLabelElement);
const slBox = endLabelElement.getBBox();
inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');
@ -101,9 +107,18 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endRight = endEdgeLabelRight;
setTerminalWidth(fo,bbox);
}
};
function setTerminalWidth(fo, box){
if(getConfig().flowchart.htmlLabels && fo){
fo.style.width=box.width;
fo.style.height=box.height;
}
}
export const positionEdgeLabel = (edge, paths) => {
log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;

26
src/dagre-wrapper/nodes.js
View File

@ -648,7 +648,11 @@ const class_box = (parent, node) => {
let classTitleString = node.classData.id;
if (node.classData.type !== undefined && node.classData.type !== '') {
classTitleString += '<' + node.classData.type + '>';
if (getConfig().flowchart.htmlLabels) {
classTitleString += '&lt;' + node.classData.type + '&gt;';
} else {
classTitleString += '<' + node.classData.type + '>';
}
}
const classTitleLabel = labelContainer
.node()
@ -668,7 +672,10 @@ const class_box = (parent, node) => {
}
const classAttributes = [];
node.classData.members.forEach((str) => {
const parsedText = parseMember(str).displayText;
let parsedText = parseMember(str).displayText;
if (getConfig().flowchart.htmlLabels) {
parsedText = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
const lbl = labelContainer
.node()
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
@ -691,10 +698,21 @@ const class_box = (parent, node) => {
const classMethods = [];
node.classData.methods.forEach((str) => {
const parsedText = parseMember(str).displayText;
const parsedInfo = parseMember(str);
let displayText =parsedInfo.displayText;
if (getConfig().flowchart.htmlLabels) {
displayText = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
const lbl = labelContainer
.node()
.appendChild(createLabel(parsedText, node.labelStyle, true, true));
.appendChild(
createLabel(
displayText,
parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,
true,
true
)
);
let bbox = lbl.getBBox();
if (evaluate(getConfig().flowchart.htmlLabels)) {
const div = lbl.children[0];

2
src/diagrams/class/classRenderer-v2.js
View File

@ -207,7 +207,7 @@ export const addRelations = function (relations, g) {
edgeData.arrowheadStyle = 'fill: #333';
edgeData.labelpos = 'c';
if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line
if (getConfig().flowchart.htmlLabels) { // eslint-disable-line
edgeData.labelType = 'html';
edgeData.label = '<span class="edgeLabel">' + edge.text + '</span>';
} else {

14
src/diagrams/pie/pieRenderer.js
View File

@ -85,7 +85,7 @@ export const draw = (txt, id) => {
// Compute the position of each group on the pie:
var pie = d3pie().value(function (d) {
return d.value;
return d[1];
});
var dataReady = pie(Object.entries(data));
@ -100,7 +100,7 @@ export const draw = (txt, id) => {
.append('path')
.attr('d', arcGenerator)
.attr('fill', function (d) {
return color(d.data.key);
return color(d.data[0]);
})
.attr('class', 'pieCircle');
@ -108,11 +108,11 @@ export const draw = (txt, id) => {
// Use the centroid method to get the best coordinates.
svg
.selectAll('mySlices')
.data(dataReady.filter((value) => value.data.value !== 0))
.data(dataReady)
.enter()
.append('text')
.text(function (d) {
return ((d.data.value / sum) * 100).toFixed(0) + '%';
return ((d.data[1] / sum) * 100).toFixed(0) + '%';
})
.attr('transform', function (d) {
return 'translate(' + arcGenerator.centroid(d) + ')';
@ -150,15 +150,15 @@ export const draw = (txt, id) => {
.style('stroke', color);
legend
.data(dataReady.filter((value) => value.data.value !== 0))
.data(dataReady)
.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function (d) {
if (parser.yy.getShowData() || conf.showData || conf.pie.showData) {
return d.data.key + ' [' + d.data.value + ']';
return d.data[0] + ' [' + d.data[1]+ ']';
} else {
return d.data.key;
return d.data[0];
}
});
} catch (e) {