marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-22 17:56:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#2824 Size changes and updated regressionstest afters diagram sizing changes

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-08-28 11:25:09 +02:00
parent 3b93c39249
commit e6e7bdcb55
13 changed files with 68 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cypress/integration/rendering/erDiagram.spec.js
View File

@@ -112,7 +112,7 @@ describe('Entity Relationship Diagram', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height', '465'); // expect(svg).to.have.attr('height', '465');
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -134,7 +134,7 @@ describe('Entity Relationship Diagram', () => {
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(140 * 0.95, 140 * 1.05); expect(width).to.be.within(140 * 0.95, 140 * 1.05);
expect(svg).to.have.attr('height', '465'); // expect(svg).to.have.attr('height', '465');
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });
}); });
@@ -186,7 +186,7 @@ describe('Entity Relationship Diagram', () => {
renderGraph( renderGraph(
` `
erDiagram erDiagram
PRIVATE_FINANCIAL_INSTITUTION { PRIVATE_FINANCIAL_INSTITUTION {
string name string name
int turnover int turnover
} }
@@ -206,9 +206,9 @@ describe('Entity Relationship Diagram', () => {
string name PK string name PK
} }
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK { BOOK {
float price float price
string author FK string author FK
string title PK string title PK
} }
`, `,
@@ -225,8 +225,8 @@ describe('Entity Relationship Diagram', () => {
string name "comment" string name "comment"
} }
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK { BOOK {
string author string author
string title "author comment" string title "author comment"
float price "price comment" float price "price comment"
} }
@@ -244,11 +244,11 @@ describe('Entity Relationship Diagram', () => {
string name PK "comment" string name PK "comment"
} }
AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
BOOK { BOOK {
string description string description
float price "price comment" float price "price comment"
string title PK "title comment" string title PK "title comment"
string author FK string author FK
} }
`, `,
{ logLevel: 1 } { logLevel: 1 }

10
cypress/integration/rendering/flowchart-v2.spec.js
View File

@@ -92,10 +92,10 @@ describe('Flowchart v2', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -114,10 +114,10 @@ describe('Flowchart v2', () => {
{ flowchart: { useMaxWidth: false } } { flowchart: { useMaxWidth: false } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05); expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });

10
cypress/integration/rendering/flowchart.spec.js
View File

@@ -744,10 +744,10 @@ describe('Graph', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -766,10 +766,10 @@ describe('Graph', () => {
{ flowchart: { useMaxWidth: false } } { flowchart: { useMaxWidth: false } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(446 * 0.95, 446 * 1.05); // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
expect(width).to.be.within(300 * 0.95, 300 * 1.05); expect(width).to.be.within(300 * 0.95, 300 * 1.05);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');
}); });

6
cypress/integration/rendering/gantt.spec.js
View File

@@ -218,10 +218,10 @@ describe('Gantt diagram', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(484 * 0.95, 484 * 1.05); // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

4
cypress/integration/rendering/journey.spec.js
View File

@@ -42,8 +42,8 @@ section Checkout from website
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.eq(565); // expect(height).to.eq(565);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

6
cypress/integration/rendering/pie.spec.js
View File

@@ -48,9 +48,9 @@ describe('Pie Chart', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.eq(450); // expect(height).to.eq(450);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

10
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -734,9 +734,9 @@ context('Sequence diagram', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(920, 971); // expect(height).to.be.within(920, 971);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -773,9 +773,9 @@ context('Sequence diagram', () => {
{ sequence: { useMaxWidth: false } } { sequence: { useMaxWidth: false } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(920, 971); // expect(height).to.be.within(920, 971);
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * 0.95, 820 * 1.05); expect(width).to.be.within(820 * 0.95, 820 * 1.05);
expect(svg).to.not.have.attr('style'); expect(svg).to.not.have.attr('style');

6
cypress/integration/rendering/stateDiagram-v2.spec.js
View File

@@ -480,9 +480,9 @@ stateDiagram-v2
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(177, 178); // expect(height).to.be.within(177, 178);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

10
cypress/integration/rendering/stateDiagram.spec.js
View File

@@ -357,9 +357,9 @@ describe('State diagram', () => {
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
expect(svg).to.have.attr('width', '100%'); expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height'); // expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(176, 178); // expect(height).to.be.within(176, 178);
const style = svg.attr('style'); const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/); expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join('')); const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -379,9 +379,9 @@ describe('State diagram', () => {
{ state: { useMaxWidth: false } } { state: { useMaxWidth: false } }
); );
cy.get('svg').should((svg) => { cy.get('svg').should((svg) => {
const height = parseFloat(svg.attr('height')); // const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width')); const width = parseFloat(svg.attr('width'));
expect(height).to.be.within(176, 178); // expect(height).to.be.within(176, 178);
// use within because the absolute value can be slightly different depending on the environment ±5% // use within because the absolute value can be slightly different depending on the environment ±5%
// Todo investigate difference // Todo investigate difference
// expect(width).to.be.within(112 * .95, 112 * 1.05); // expect(width).to.be.within(112 * .95, 112 * 1.05);

12
cypress/platform/knsv.html
View File

@@ -37,7 +37,7 @@
<div class="mermaid" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -72,16 +72,20 @@ flowchart TD
</div> </div>
<div class="mermaid" style="width: 50%;"> <div class="mermaid" style="width: 50%;">
flowchart TD
id
</div>
<div class="mermaid2" style="width: 50%;">
flowchart LR flowchart LR
a["<strong>Haiya</strong>"]===>b a["<strong>Haiya</strong>"]===>b
</div> </div>
<div class="mermaid" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart TD flowchart TD
A --> B A --> B
A --> C A --> C
B --> C B --> C
</div> </div>
<div class="mermaid" style="width: 50%;"> <div class="mermaid2" style="width: 50%;">
flowchart TD flowchart TD
A([stadium shape test]) A([stadium shape test])
A -->|Get money| B([Go shopping]) A -->|Get money| B([Go shopping])
@@ -283,7 +287,7 @@ flowchart TD
C -->|One| D[Laptop] C -->|One| D[Laptop]
C -->|Two| E[iPhone] C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car] C -->|Three| F[fa:fa-car Car]
</div> <div class="mermaid" style="width: 100%;"> </div> <div class="mermaid2" style="width: 100%;">
classDiagram classDiagram
Animal "1" <|-- Duck Animal "1" <|-- Duck
Animal <|-- Fish Animal <|-- Fish

4
docs/index.html
View File

@@ -18,8 +18,8 @@
<!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> --> <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
<link rel="stylesheet" href="theme.css" /> <link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script> <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script> -->
<!-- <script src="http://localhost:9000/mermaid.js"></script> --> <script src="http://localhost:9000/mermaid.js"></script>
<script> <script>
// prettier-ignore // prettier-ignore
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

2
src/diagrams/state/stateRenderer-v2.js
View File

@@ -305,7 +305,7 @@ export const draw = function (text, id, _version, diag) {
const svgBounds = svg.node().getBBox(); const svgBounds = svg.node().getBBox();
configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth); configureSvgSize(svg, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding // Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`; const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

36
src/utils.js
View File

@@ -761,7 +761,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
* @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100% * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
*/ */
export const configureSvgSize = function (svgElem, height, width, useMaxWidth) { export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
const attrs = calculateSvgSizeAttrs(height, 1.1 * width, useMaxWidth); const attrs = calculateSvgSizeAttrs(height, 1 * width, useMaxWidth);
d3Attrs(svgElem, attrs); d3Attrs(svgElem, attrs);
}; };
export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) { export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
@@ -775,21 +775,22 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
let height = graph._label.height; let height = graph._label.height;
log.info(`Graph bounds: ${width}x${height}`, graph); log.info(`Graph bounds: ${width}x${height}`, graph);
let tx = 0; // let tx = 0;
let ty = 0; // let ty = 0;
if (sWidth > width) { // if (sWidth > width) {
tx = (sWidth - width) / 2 + padding; // tx = (sWidth - width) / 2 + padding;
width = sWidth + padding * 2; width = sWidth + padding * 2;
} else { // } else {
if (Math.abs(sWidth - width) >= 2 * padding + 1) { // if (Math.abs(sWidth - width) >= 2 * padding + 1) {
width = width - padding; // width = width - padding;
} // }
} // }
if (sHeight > height) { // if (sHeight > height) {
ty = (sHeight - height) / 2 + padding; // ty = (sHeight - height) / 2 + padding;
height = sHeight + padding * 2; height = sHeight + padding * 2;
} // }
// width =
log.info(`Calculated bounds: ${width}x${height}`); log.info(`Calculated bounds: ${width}x${height}`);
configureSvgSize(svgElem, height, width, useMaxWidth); configureSvgSize(svgElem, height, width, useMaxWidth);
@@ -809,10 +810,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
width, width,
'height', 'height',
height, height,
'tx',
tx,
'ty',
ty,
'vBox', 'vBox',
vBox vBox
); );