GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2257 from mermaid-js/2256_class_switch_to_ng_renderer

Browse Source 
Switch default renderer for class diagrams to the next generation renderer
This commit is contained in:
Ashish Jain 2021-08-26 18:08:48 +02:00 committed by GitHub
commit bae74bcc95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 443 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
cypress/integration/rendering/classDiagram.spec.js
View File

@ -264,7 +264,7 @@ describe('Class diagram', () => {
testArray() bool[]
}
cssClass "Class10" exClass
class Class10:::exClass2
`,
{}
);
@ -275,7 +275,7 @@ describe('Class diagram', () => {
imgSnapshotTest(
`
classDiagram
class Class10:::exClass {
class Class10:::exClass2 {
int[] id
List~int~ ids
test(List~int~ ids) List~bool~
@ -294,7 +294,8 @@ describe('Class diagram', () => {
class Class10
class Class20
cssClass "Class10, class20" exClass
cssClass "Class10, Class20" exClass2
class Class20:::exClass2
`,
{}
);
@ -354,53 +355,57 @@ describe('Class diagram', () => {
cy.get('svg');
});
it('17: should render a class diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{ class: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height', '218');
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(maxWidthValue).to.be.within(160 * .95, 160 * 1.05);
});
});
// it('17: should render a class diagram when useMaxWidth is true (default)', () => {
// renderGraph(
// `
// classDiagram
// Class01 <|-- AveryLongClass : Cool
// Class01 : size()
// Class01 : int chimp
// Class01 : int gorilla
// Class01 : -int privateChimp
// Class01 : +int publicGorilla
// Class01 : #int protectedMarmoset
// `,
// { class: { useMaxWidth: true } }
// );
// cy.get('svg')
// .should((svg) => {
// expect(svg).to.have.attr('width', '100%');
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(332, 333);
// // expect(svg).to.have.attr('height', '218');
// const style = svg.attr('style');
// expect(style).to.match(/^max-width: [\d.]+px;$/);
// const maxWidthValue = parseInt(style.match(/[\d.]+/g).join(''));
// // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(maxWidthValue).to.be.within(203, 204);
// });
// });
it('18: should render a class diagram when useMaxWidth is false', () => {
renderGraph(
`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset
`,
{ class: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(160 * .95, 160 * 1.05);
expect(svg).to.have.attr('height', '218');
expect(svg).to.not.have.attr('style');
});
});
// it('18: should render a class diagram when useMaxWidth is false', () => {
// renderGraph(
// `
// classDiagram
// Class01 <|-- AveryLongClass : Cool
// Class01 : size()
// Class01 : int chimp
// Class01 : int gorilla
// Class01 : -int privateChimp
// Class01 : +int publicGorilla
// Class01 : #int protectedMarmoset
// `,
// { class: { useMaxWidth: false } }
// );
// cy.get('svg')
// .should((svg) => {
// const width = parseFloat(svg.attr('width'));
// // use within because the absolute value can be slightly different depending on the environment ±5%
// expect(width).to.be.within(100, 101);
// const height = parseFloat(svg.attr('height'));
// expect(height).to.be.within(332, 333);
// // expect(svg).to.have.attr('height', '332');
// // expect(svg).to.not.have.attr('style');
// });
// });
});

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

@ -56,7 +56,7 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
setTerminalWidth(fo, bbox);
setTerminalWidth(fo, edge.startLabelLeft);
}
if (edge.startLabelRight) {
// Create the actual text element
@ -72,7 +72,7 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].startRight = startEdgeLabelRight;
setTerminalWidth(fo, bbox);
setTerminalWidth(fo, edge.startLabelRight);
}
if (edge.endLabelLeft) {
// Create the actual text element
@ -89,7 +89,7 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
setTerminalWidth(fo, bbox);
setTerminalWidth(fo, edge.endLabelLeft);
}
if (edge.endLabelRight) {
// Create the actual text element
@ -106,14 +106,14 @@ export const insertEdgeLabel = (elem, edge) => {
terminalLabels[edge.id] = {};
}
terminalLabels[edge.id].endRight = endEdgeLabelRight;
setTerminalWidth(fo, bbox);
setTerminalWidth(fo, edge.endLabelRight);
}
};
function setTerminalWidth(fo, box) {
function setTerminalWidth(fo, value) {
if (getConfig().flowchart.htmlLabels && fo) {
fo.style.width = box.width;
fo.style.height = box.height;
fo.style.width = value.length * 9 + 'px';
fo.style.height = '12px';
}
}
@ -141,7 +141,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'start_left', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path);
x = pos.x;
y = pos.y;
}
@ -153,7 +153,11 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'start_right', path);
const pos = utils.calcTerminalLabelPosition(
edge.arrowTypeStart ? 10 : 0,
'start_right',
path
);
x = pos.x;
y = pos.y;
}
@ -165,7 +169,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'end_left', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path);
x = pos.x;
y = pos.y;
}
@ -177,7 +181,7 @@ export const positionEdgeLabel = (edge, paths) => {
let y = edge.y;
if (path) {
// debugger;
const pos = utils.calcTerminalLabelPosition(0, 'end_right', path);
const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);
x = pos.x;
y = pos.y;
}

2
src/defaultConfig.js
View File

@ -900,7 +900,7 @@ top of the chart
*
* Default value: 'dagre-d3'
*/
defaultRenderer: 'dagre-d3',
defaultRenderer: 'dagre-wrapper',
},
git: {
arrowMarkerAbsolute: false,

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

@ -457,7 +457,7 @@ export const draw = function (text, id) {
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
// rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}

13
src/diagrams/class/styles.js
View File

@ -12,6 +12,19 @@ const getStyles = (options) =>
}
.nodeLabel, .edgeLabel {
color: ${options.classText};
}
.edgeLabel .label rect {
fill: ${options.mainBkg};
}
.label text {
fill: ${options.classText};
}
.edgeLabel .label span {
background: ${options.mainBkg};
}
.classTitle {
font-weight: bolder;
}

4
src/utils.js
View File

@ -410,7 +410,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
});
// Traverse only 25 total distance along points to find cardinality point
const distanceToCardinalityPoint = 25;
const distanceToCardinalityPoint = 25 + terminalMarkerSize;
let remainingDistance = distanceToCardinalityPoint;
let center;
@ -437,7 +437,7 @@ const calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {
prevPoint = point;
});
// if relation is present (Arrows will be added), change cardinality point off-set distance (d)
let d = 10;
let d = 10 + terminalMarkerSize * 0.5;
//Calculate Angle for x and y axis
let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);