From d2ab132a182279e8d8a9e5df1aad96f7f1a0c3c2 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 11 Jul 2023 19:39:39 -0300 Subject: [PATCH 1/8] Change class member height to use own BBox --- packages/mermaid/src/dagre-wrapper/nodes.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 410703f6c..b30084e90 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -917,7 +917,9 @@ const class_box = (parent, node) => { ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + //get the height of the bounding box of each member if exists + const memberBBox = lbl ? lbl.getBBox() : null; + verticalPos += (memberBBox.height ?? 0) + rowPadding; }); verticalPos += lineHeight; @@ -935,7 +937,8 @@ const class_box = (parent, node) => { 'transform', 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')' ); - verticalPos += classTitleBBox.height + rowPadding; + const methodBBox = lbl ? lbl.getBBox() : null; + verticalPos += (methodBBox.height ?? 0) + rowPadding; }); rect From 12c657f514f494c9538457d3d3c22b640e8481bf Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Tue, 11 Jul 2023 19:40:26 -0300 Subject: [PATCH 2/8] Add imgSnapshotTests --- .../rendering/classDiagram.spec.js | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 427b4cf0b..cc4a7bfa9 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -423,4 +423,67 @@ describe('Class diagram', () => { ); cy.get('svg'); }); + + it('20: should render class diagram with newlines in title', () => { + imgSnapshotTest(` + classDiagram + Animal <|-- \`Du\nck\` + Animal : +int age + Animal : +String gender + Animal: +isMammal() + Animal: +mate() + class \`Du\nck\` { + +String beakColor + +String featherColor + +swim() + +quack() + } + `); + cy.get('svg'); + }); + + it('21: should render class diagram with many newlines in title', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + `); + }); + + it('22: should render with newlines in title and an annotation', () => { + imgSnapshotTest(` + classDiagram + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + `); + }); + + it('23: should handle newline title in namespace', () => { + imgSnapshotTest(` + classDiagram + namespace testingNamespace { + class \`This\nTitle\nHas\nMany\nNewlines\` { + +String Also + -Stirng Many + #int Members + +And() + -Many() + #Methods() + } + } + `); + }); }); From aeba7a1d0eddd0d61cd54a3b8d50b66d61131db5 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com> Date: Thu, 13 Jul 2023 15:57:28 -0300 Subject: [PATCH 3/8] Update packages/mermaid/src/dagre-wrapper/nodes.js Co-authored-by: Sidharth Vinod --- packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index b30084e90..1e1fbd41e 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -918,8 +918,8 @@ const class_box = (parent, node) => { ')' ); //get the height of the bounding box of each member if exists - const memberBBox = lbl ? lbl.getBBox() : null; - verticalPos += (memberBBox.height ?? 0) + rowPadding; + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); verticalPos += lineHeight; From e9f032ccebb2de301284e047b1c940c2e376da38 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf <104177348+ibrahimWassouf@users.noreply.github.com> Date: Thu, 13 Jul 2023 15:57:58 -0300 Subject: [PATCH 4/8] Update packages/mermaid/src/dagre-wrapper/nodes.js Co-authored-by: Sidharth Vinod --- packages/mermaid/src/dagre-wrapper/nodes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js index 1e1fbd41e..6c6733358 100644 --- a/packages/mermaid/src/dagre-wrapper/nodes.js +++ b/packages/mermaid/src/dagre-wrapper/nodes.js @@ -937,8 +937,8 @@ const class_box = (parent, node) => { 'transform', 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')' ); - const methodBBox = lbl ? lbl.getBBox() : null; - verticalPos += (methodBBox.height ?? 0) + rowPadding; + const memberBBox = lbl?.getBBox(); + verticalPos += (memberBBox?.height ?? 0) + rowPadding; }); rect From 80add648e6d82eb99508b7ffa2acbf52200905c9 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 13 Jul 2023 16:43:52 -0300 Subject: [PATCH 5/8] Refactor integration tests --- .../rendering/classDiagram.spec.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index cc4a7bfa9..3d91426e6 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,7 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; describe('Class diagram', () => { - it('1: should render a simple class diagram', () => { + it('should render a simple class diagram', () => { imgSnapshotTest( ` classDiagram @@ -35,7 +35,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('2: should render a simple class diagrams with cardinality', () => { + it('should render a simple class diagrams with cardinality', () => { imgSnapshotTest( ` classDiagram @@ -64,7 +64,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('3: should render a simple class diagram with different visibilities', () => { + it('should render a simple class diagram with different visibilities', () => { imgSnapshotTest( ` classDiagram @@ -82,7 +82,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('4: should render a simple class diagram with comments', () => { + it('should render a simple class diagram with comments', () => { imgSnapshotTest( ` classDiagram @@ -112,7 +112,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('5: should render a simple class diagram with abstract method', () => { + it('should render a simple class diagram with abstract method', () => { imgSnapshotTest( ` classDiagram @@ -124,7 +124,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('6: should render a simple class diagram with static method', () => { + it('should render a simple class diagram with static method', () => { imgSnapshotTest( ` classDiagram @@ -136,7 +136,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('7: should render a simple class diagram with Generic class', () => { + it('should render a simple class diagram with Generic class', () => { imgSnapshotTest( ` classDiagram @@ -156,7 +156,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('8: should render a simple class diagram with Generic class and relations', () => { + it('should render a simple class diagram with Generic class and relations', () => { imgSnapshotTest( ` classDiagram @@ -177,7 +177,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('9: should render a simple class diagram with clickable link', () => { + it('should render a simple class diagram with clickable link', () => { imgSnapshotTest( ` classDiagram @@ -199,7 +199,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('10: should render a simple class diagram with clickable callback', () => { + it('should render a simple class diagram with clickable callback', () => { imgSnapshotTest( ` classDiagram @@ -221,7 +221,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('11: should render a simple class diagram with return type on method', () => { + it('should render a simple class diagram with return type on method', () => { imgSnapshotTest( ` classDiagram @@ -236,7 +236,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('12: should render a simple class diagram with generic types', () => { + it('should render a simple class diagram with generic types', () => { imgSnapshotTest( ` classDiagram @@ -252,7 +252,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('13: should render a simple class diagram with css classes applied', () => { + it('should render a simple class diagram with css classes applied', () => { imgSnapshotTest( ` classDiagram @@ -270,7 +270,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('14: should render a simple class diagram with css classes applied directly', () => { + it('should render a simple class diagram with css classes applied directly', () => { imgSnapshotTest( ` classDiagram @@ -286,7 +286,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('15: should render a simple class diagram with css classes applied to multiple classes', () => { + it('should render a simple class diagram with css classes applied to multiple classes', () => { imgSnapshotTest( ` classDiagram @@ -301,7 +301,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('16: should render multiple class diagrams', () => { + it('should render multiple class diagrams', () => { imgSnapshotTest( [ ` @@ -354,7 +354,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - // it('17: should render a class diagram when useMaxWidth is true (default)', () => { + // it('should render a class diagram when useMaxWidth is true (default)', () => { // renderGraph( // ` // classDiagram @@ -382,7 +382,7 @@ describe('Class diagram', () => { // }); // }); - // it('18: should render a class diagram when useMaxWidth is false', () => { + // it('should render a class diagram when useMaxWidth is false', () => { // renderGraph( // ` // classDiagram @@ -408,7 +408,7 @@ describe('Class diagram', () => { // }); // }); - it('19: should render a simple class diagram with notes', () => { + it('should render a simple class diagram with notes', () => { imgSnapshotTest( ` classDiagram @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('20: should render class diagram with newlines in title', () => { + it('should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('21: should render class diagram with many newlines in title', () => { + it('should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('22: should render with newlines in title and an annotation', () => { + it('should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -467,11 +467,11 @@ describe('Class diagram', () => { -Many() #Methods() } - <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` `); }); - it('23: should handle newline title in namespace', () => { + it('should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace { From bb220b8b87bfd1043080b415696307972220e918 Mon Sep 17 00:00:00 2001 From: Ibrahim Wassouf Date: Thu, 13 Jul 2023 16:53:29 -0300 Subject: [PATCH 6/8] Add test for string label --- .../integration/rendering/classDiagram.spec.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 3d91426e6..21fe8c726 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -486,4 +486,19 @@ describe('Class diagram', () => { } `); }); + + it('should handle newline in string label', () => { + imgSnapshotTest(` + classDiagram + class A["This has\na newline!"] { + +String boop + -Int beep + #double bop + } + + class B["This title also has\na newline"] + B : +with(more) + B : -methods() + `); + }); }); From b5bcc3b9925d914e2987987a0b9981d64f0b4b6d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 17 Jul 2023 15:11:14 +0530 Subject: [PATCH 7/8] Revert "Refactor integration tests" This reverts commit 80add648e6d82eb99508b7ffa2acbf52200905c9. --- .../rendering/classDiagram.spec.js | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 21fe8c726..21117e8a1 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -1,7 +1,7 @@ import { imgSnapshotTest, renderGraph } from '../../helpers/util.js'; describe('Class diagram', () => { - it('should render a simple class diagram', () => { + it('1: should render a simple class diagram', () => { imgSnapshotTest( ` classDiagram @@ -35,7 +35,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagrams with cardinality', () => { + it('2: should render a simple class diagrams with cardinality', () => { imgSnapshotTest( ` classDiagram @@ -64,7 +64,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with different visibilities', () => { + it('3: should render a simple class diagram with different visibilities', () => { imgSnapshotTest( ` classDiagram @@ -82,7 +82,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with comments', () => { + it('4: should render a simple class diagram with comments', () => { imgSnapshotTest( ` classDiagram @@ -112,7 +112,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with abstract method', () => { + it('5: should render a simple class diagram with abstract method', () => { imgSnapshotTest( ` classDiagram @@ -124,7 +124,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with static method', () => { + it('6: should render a simple class diagram with static method', () => { imgSnapshotTest( ` classDiagram @@ -136,7 +136,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with Generic class', () => { + it('7: should render a simple class diagram with Generic class', () => { imgSnapshotTest( ` classDiagram @@ -156,7 +156,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with Generic class and relations', () => { + it('8: should render a simple class diagram with Generic class and relations', () => { imgSnapshotTest( ` classDiagram @@ -177,7 +177,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with clickable link', () => { + it('9: should render a simple class diagram with clickable link', () => { imgSnapshotTest( ` classDiagram @@ -199,7 +199,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with clickable callback', () => { + it('10: should render a simple class diagram with clickable callback', () => { imgSnapshotTest( ` classDiagram @@ -221,7 +221,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with return type on method', () => { + it('11: should render a simple class diagram with return type on method', () => { imgSnapshotTest( ` classDiagram @@ -236,7 +236,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with generic types', () => { + it('12: should render a simple class diagram with generic types', () => { imgSnapshotTest( ` classDiagram @@ -252,7 +252,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied', () => { + it('13: should render a simple class diagram with css classes applied', () => { imgSnapshotTest( ` classDiagram @@ -270,7 +270,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied directly', () => { + it('14: should render a simple class diagram with css classes applied directly', () => { imgSnapshotTest( ` classDiagram @@ -286,7 +286,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render a simple class diagram with css classes applied to multiple classes', () => { + it('15: should render a simple class diagram with css classes applied to multiple classes', () => { imgSnapshotTest( ` classDiagram @@ -301,7 +301,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render multiple class diagrams', () => { + it('16: should render multiple class diagrams', () => { imgSnapshotTest( [ ` @@ -354,7 +354,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - // it('should render a class diagram when useMaxWidth is true (default)', () => { + // it('17: should render a class diagram when useMaxWidth is true (default)', () => { // renderGraph( // ` // classDiagram @@ -382,7 +382,7 @@ describe('Class diagram', () => { // }); // }); - // it('should render a class diagram when useMaxWidth is false', () => { + // it('18: should render a class diagram when useMaxWidth is false', () => { // renderGraph( // ` // classDiagram @@ -408,7 +408,7 @@ describe('Class diagram', () => { // }); // }); - it('should render a simple class diagram with notes', () => { + it('19: should render a simple class diagram with notes', () => { imgSnapshotTest( ` classDiagram @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render class diagram with newlines in title', () => { + it('20: should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('should render class diagram with many newlines in title', () => { + it('21: should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('should render with newlines in title and an annotation', () => { + it('22: should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -467,11 +467,11 @@ describe('Class diagram', () => { -Many() #Methods() } - <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` + <<Interface>> \`This\nTitle\nHas\nMany\nNewlines\` `); }); - it('should handle newline title in namespace', () => { + it('23: should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace { From d3006f6298be294ad58f6a36a2b875f897b0e434 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 17 Jul 2023 15:16:05 +0530 Subject: [PATCH 8/8] chore: Remove numbers from tests --- cypress/integration/rendering/classDiagram.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js index 21117e8a1..dd79303b8 100644 --- a/cypress/integration/rendering/classDiagram.spec.js +++ b/cypress/integration/rendering/classDiagram.spec.js @@ -424,7 +424,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('20: should render class diagram with newlines in title', () => { + it('should render class diagram with newlines in title', () => { imgSnapshotTest(` classDiagram Animal <|-- \`Du\nck\` @@ -442,7 +442,7 @@ describe('Class diagram', () => { cy.get('svg'); }); - it('21: should render class diagram with many newlines in title', () => { + it('should render class diagram with many newlines in title', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -456,7 +456,7 @@ describe('Class diagram', () => { `); }); - it('22: should render with newlines in title and an annotation', () => { + it('should render with newlines in title and an annotation', () => { imgSnapshotTest(` classDiagram class \`This\nTitle\nHas\nMany\nNewlines\` { @@ -471,7 +471,7 @@ describe('Class diagram', () => { `); }); - it('23: should handle newline title in namespace', () => { + it('should handle newline title in namespace', () => { imgSnapshotTest(` classDiagram namespace testingNamespace {