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

Merge pull request #1642 from Mogztter/issue/1490-svg-height-width 

resolves #1490 consistent SVG height and width between diagrams
This commit is contained in:
Knut Sveidqvist 2020-09-02 18:11:51 +02:00 committed by GitHub
parent 1ac3611e6e 99844b4ca3
commit 2a4344ace3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 777 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cypress/helpers/util.js
View File

@ -1,4 +1,5 @@
/* eslint-env jest */
/* global cy */
import { Base64 } from 'js-base64';
export const mermaidUrl = (graphStr, options, api) => {

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Class diagram', () => {
it('1: should render a simple class diagram', () => {
@ -65,7 +65,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
@ -83,59 +83,6 @@ describe('Class diagram', () => {
cy.get('svg');
});
it('should render multiple class diagrams', () => {
imgSnapshotTest(
[
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
],
{}
);
cy.get('svg');
});
it('4: should render a simple class diagram with comments', () => {
imgSnapshotTest(
`
@ -353,4 +300,107 @@ describe('Class diagram', () => {
);
cy.get('svg');
});
it('16: should render multiple class diagrams', () => {
imgSnapshotTest(
[
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
`
classDiagram
Class01 "1" <|--|> "*" AveryLongClass : Cool
&lt;&lt;interface&gt;&gt; Class01
Class03 "1" *-- "*" Class04
Class05 "1" o-- "many" Class06
Class07 "1" .. "*" Class08
Class09 "1" --> "*" C2 : Where am i?
Class09 "*" --* "*" C3
Class09 "1" --|> "1" Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 "1" <--> "*" C2: Cool label
class Class10 {
&lt;&lt;service&gt;&gt;
int id
test()
}
`,
],
{}
);
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('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');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Entity Relationship Diagram', () => {
it('should render a simple ER diagram', () => {
@ -101,4 +101,44 @@ describe('Entity Relationship Diagram', () => {
);
cy.get('svg');
});
it('should render an ER diagrams when useMaxWidth is true (default)', () => {
renderGraph(
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
{ er: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height', '465');
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(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(140 * .95, 140 * 1.05);
});
});
it('should render an ER when useMaxWidth is false', () => {
renderGraph(
`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
`,
{ er: { 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(140 * .95, 140 * 1.05);
expect(svg).to.have.attr('height', '465');
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Flowchart v2', () => {
it('1: should render a simple flowchart', () => {
@ -47,7 +47,7 @@ describe('Flowchart v2', () => {
);
});
it('Length of edges', () => {
it('4: Length of edges', () => {
imgSnapshotTest(
`flowchart TD
L1 --- L2
@ -64,7 +64,7 @@ describe('Flowchart v2', () => {
{ flowchart: { diagramPadding: 0 } }
);
});
it('36: should render escaped without html labels', () => {
it('5: should render escaped without html labels', () => {
imgSnapshotTest(
`flowchart TD
a["<strong>Haiya</strong>"]---->b
@ -72,13 +72,57 @@ describe('Flowchart v2', () => {
{htmlLabels: false, flowchart: {htmlLabels: false}}
);
});
it('37: should render non-escaped with html labels', () => {
it('6: should render non-escaped with html labels', () => {
imgSnapshotTest(
`flowchart TD
a["<strong>Haiya</strong>"]===>b
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('7: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
`flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * .95, 446 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
renderGraph(
`flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(446 * .95, 446 * 1.05);
expect(width).to.be.within(300 * .95, 300 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('Flowchart', () => {
it('1: should render a simple flowchart no htmlLabels', () => {
@ -731,4 +731,49 @@ describe('Flowchart', () => {
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('38: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(446 * .95, 446 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
});
});
it('39: should render a flowchart when useMaxWidth is false', () => {
renderGraph(
`graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{ flowchart: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(446 * .95, 446 * 1.05);
expect(width).to.be.within(300 * .95, 300 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Gantt diagram', () => {
beforeEach(()=>{
@ -163,4 +163,99 @@ describe('Gantt diagram', () => {
{}
);
});
it('should render a gantt diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
`,
{ gantt: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
// use within because the absolute value can be slightly different depending on the environment ±5%
const height = parseFloat(svg.attr('height'));
expect(height).to.be.within(484 * .95, 484 * 1.05);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.be.within(984 * .95, 984 * 1.05);
});
});
it('should render a gantt diagram when useMaxWidth is false', () => {
renderGraph(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
`,
{ gantt: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(height).to.be.within(484 * .95, 484 * 1.05);
expect(width).to.be.within(984 * .95, 984 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('User journey diagram', () => {
it('Simple test', () => {
@ -28,4 +28,43 @@ section Order from website
{}
);
});
it('should render a user journey diagram when useMaxWidth is true (default)', () => {
renderGraph(
`journey
title Adding journey diagram functionality to mermaid
section Order from website
`,
{ journey: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(20);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.eq(400);
});
});
it('should render a user journey diagram when useMaxWidth is false', () => {
renderGraph(
`journey
title Adding journey diagram functionality to mermaid
section Order from website
`,
{ journey: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(20);
expect(width).to.eq(400);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util.js';
import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
describe('Pie Chart', () => {
it('should render a simple pie diagram', () => {
@ -37,4 +37,45 @@ describe('Pie Chart', () => {
);
cy.get('svg');
});
it('should render a pie diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
{ pie: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(450);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
expect(maxWidthValue).to.eq(984);
});
});
it('should render a pie diagram when useMaxWidth is false', () => {
renderGraph(
`
pie title Sports in Sweden
"Bandy" : 40
"Ice-Hockey" : 80
"Football" : 90
`,
{ pie: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(450);
expect(width).to.eq(984);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,6 +1,6 @@
/// <reference types="Cypress" />
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
context('Sequence diagram', () => {
it('should render a simple sequence diagram', () => {
@ -505,7 +505,7 @@ context('Sequence diagram', () => {
});
});
context('directives', () => {
it('should overide config with directive settings', () => {
it('should override config with directive settings', () => {
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": true }}}%%
@ -517,7 +517,7 @@ context('Sequence diagram', () => {
{ logLevel:0, sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
);
});
it('should overide config with directive settings', () => {
it('should override config with directive settings', () => {
imgSnapshotTest(
`
%%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
@ -530,4 +530,85 @@ context('Sequence diagram', () => {
);
});
});
context('svg size', () => {
it('should render a sequence diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
sequenceDiagram
participant Alice
participant Bob
participant John as John<br/>Second Line
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end
`,
{ sequence: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(920);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(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(820 * .95, 820 * 1.05);
});
});
it('should render a sequence diagram when useMaxWidth is false', () => {
renderGraph(
`
sequenceDiagram
participant Alice
participant Bob
participant John as John<br/>Second Line
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end
`,
{ sequence: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(920);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(820 * .95, 820 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('State diagram', () => {
it('v2 should render a simple info', () => {
@ -47,7 +47,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('v2 should render a single state with short descr', () => {
it('v2 should render a single state with short descriptions', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -58,7 +58,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('v2 should render a transition descrions with new lines', () => {
it('v2 should render a transition descriptions with new lines', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -201,7 +201,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('v2 should render composit states', () => {
it('v2 should render composite states', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -220,7 +220,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('v2 should render multiple composit states', () => {
it('v2 should render multiple composite states', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -249,7 +249,7 @@ describe('State diagram', () => {
{ logLevel: 0, fontFamily: 'courier' }
);
});
it('v2 should render forks in composit states', () => {
it('v2 should render forks in composite states', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -329,7 +329,7 @@ describe('State diagram', () => {
}
);
});
it('v2 Simplest composit state', () => {
it('v2 Simplest composite state', () => {
imgSnapshotTest(
`
stateDiagram-v2
@ -354,5 +354,47 @@ describe('State diagram', () => {
}
);
});
it('v2 should render a state diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
stateDiagram-v2
[*] --> State1
State1 --> [*]
`,
{ state: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(177);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(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(135 * .95, 135 * 1.05);
});
});
it('v2 should render a state diagram when useMaxWidth is false', () => {
renderGraph(
`
stateDiagram-v2
[*] --> State1
State1 --> [*]
`,
{ state: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(177);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(135 * .95, 135 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});

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

@ -1,5 +1,5 @@
/* eslint-env jest */
import { imgSnapshotTest } from '../../helpers/util';
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
describe('State diagram', () => {
it('should render a simple state diagrams', () => {
@ -37,7 +37,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a single state with short descr', () => {
it('should render a single state with short descriptions', () => {
imgSnapshotTest(
`
stateDiagram
@ -48,7 +48,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render a transition descrions with new lines', () => {
it('should render a transition descriptions with new lines', () => {
imgSnapshotTest(
`
stateDiagram
@ -191,7 +191,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render composit states', () => {
it('should render composite states', () => {
imgSnapshotTest(
`
stateDiagram
@ -280,7 +280,7 @@ describe('State diagram', () => {
);
cy.get('svg');
});
it('should render conurrency states', () => {
it('should render concurrency states', () => {
imgSnapshotTest(
`
stateDiagram
@ -319,7 +319,7 @@ describe('State diagram', () => {
}
);
});
it('Simplest composit state', () => {
it('Simplest composite state', () => {
imgSnapshotTest(
`
stateDiagram
@ -344,5 +344,45 @@ describe('State diagram', () => {
}
);
});
it('should render a state diagram when useMaxWidth is true (default)', () => {
renderGraph(
`
stateDiagram
[*] --> State1
State1 --> [*]
`,
{ state: { useMaxWidth: true } }
);
cy.get('svg')
.should((svg) => {
expect(svg).to.have.attr('width', '100%');
expect(svg).to.have.attr('height');
const height = parseFloat(svg.attr('height'));
expect(height).to.eq(139);
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(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(112 * .95, 112 * 1.05);
});
});
it('should render a state diagram when useMaxWidth is false', () => {
renderGraph(
`
stateDiagram
[*] --> State1
State1 --> [*]
`,
{ state: { useMaxWidth: false } }
);
cy.get('svg')
.should((svg) => {
const height = parseFloat(svg.attr('height'));
const width = parseFloat(svg.attr('width'));
expect(height).to.eq(139);
// use within because the absolute value can be slightly different depending on the environment ±5%
expect(width).to.be.within(112 * .95, 112 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
});

95
src/defaultConfig.js
View File

@ -173,8 +173,20 @@ const config = {
*/
curve: 'linear',
// Only used in new experimental rendering
// repreesents the padding between the labels and the shape
padding: 15
// represents the padding between the labels and the shape
padding: 15,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See notes | Boolean | 4 | True, False |
*
***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
*available space if not the absolute space required is used.
*
***Default value true**.
*/
useMaxWidth: true
},
/**
@ -572,8 +584,23 @@ const config = {
* This might need adjustment to match your locale and preferences
***Default value '%Y-%m-%d'**.
*/
axisFormat: '%Y-%m-%d'
axisFormat: '%Y-%m-%d',
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See notes | Boolean | 4 | True, False |
*
***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
*available space if not the absolute space required is used.
*
***Default value true**.
*/
useMaxWidth: true,
useWidth: undefined
},
/**
* The object containing configurations specific for journey diagrams
*/
@ -711,10 +738,35 @@ const config = {
rightAngles: false
},
class: {
arrowMarkerAbsolute: false
arrowMarkerAbsolute: false,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See notes | Boolean | 4 | True, False |
*
***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
*available space if not the absolute space required is used.
*
***Default value true**.
*/
useMaxWidth: true
},
git: {
arrowMarkerAbsolute: false
arrowMarkerAbsolute: false,
useWidth: undefined,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See notes | Boolean | 4 | True, False |
*
***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
*available space if not the absolute space required is used.
*
***Default value true**.
*/
useMaxWidth: true
},
state: {
dividerMargin: 10,
@ -734,7 +786,18 @@ const config = {
labelHeight: 16,
edgeLengthFactor: '20',
compositTitleSize: 35,
radius: 5
radius: 5,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See notes | Boolean | 4 | True, False |
*
***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
*available space if not the absolute space required is used.
*
***Default value true**.
*/
useMaxWidth: true
},
/**
@ -821,6 +884,26 @@ const config = {
*/
fontSize: 12,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| useMaxWidth | See Notes | Boolean | Required | true, false |
*
***Notes:**
*When this flag is set to true, the diagram width is locked to 100% and
*scaled based on available space. If set to false, the diagram reserves its
*absolute width.
***Default value: true**.
*/
useMaxWidth: true
},
/**
* The object containing configurations specific for pie diagrams
*/
pie: {
useWidth: undefined,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |

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

@ -9,7 +9,7 @@ import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { curveLinear } from 'd3';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import common from '../common/common';
parser.yy = classDb;
@ -325,13 +325,7 @@ export const drawOld = function(text, id) {
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
if (conf.useMaxWidth) {
diagram.attr('width', '100%');
diagram.attr('style', `max-width: ${width}px;`);
} else {
diagram.attr('height', height);
diagram.attr('width', width);
}
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
@ -427,13 +421,7 @@ export const draw = function(text, id) {
`translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
);
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg

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

@ -5,6 +5,7 @@ import { logger } from '../../logger';
import classDb, { lookUpDomId } from './classDb';
import { parser } from './parser/classDiagram';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../utils';
parser.yy = classDb;
@ -232,13 +233,7 @@ export const draw = function(text, id) {
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
if (conf.useMaxWidth) {
diagram.attr('width', '100%');
diagram.attr('style', `max-width: ${width}px;`);
} else {
diagram.attr('height', height);
diagram.attr('width', width);
}
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

9
src/diagrams/er/erRenderer.js
View File

@ -6,6 +6,7 @@ import dagre from 'dagre';
import { getConfig } from '../../config';
import { logger } from '../../logger';
import erMarkers from './erMarkers';
import { configureSvgSize } from '../../utils';
const conf = {};
@ -344,13 +345,7 @@ export const draw = function(text, id) {
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
}; // draw

10
src/diagrams/flowchart/flowRenderer-v2.js
View File

@ -9,7 +9,7 @@ import { render } from '../../dagre-wrapper/index.js';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import common from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
const conf = {};
export const setConf = function(cnf) {
@ -418,13 +418,7 @@ export const draw = function(text, id) {
`translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
);
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
configureSvgSize(svg, height, width, conf.useMaxWidth);
svg.attr('viewBox', `0 0 ${width} ${height}`);
svg

10
src/diagrams/flowchart/flowRenderer.js
View File

@ -9,7 +9,7 @@ import dagreD3 from 'dagre-d3';
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { logger } from '../../logger';
import common from '../common/common';
import { interpolateToCurve, getStylesFromArray } from '../../utils';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import flowChartShapes from './flowChartShapes';
const conf = {};
@ -401,13 +401,7 @@ export const draw = function(text, id) {
const width = svgBounds.width + padding * 2;
const height = svgBounds.height + padding * 2;
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
configureSvgSize(svg, height, width, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

7
src/diagrams/gantt/ganttRenderer.js
View File

@ -11,6 +11,7 @@ import {
import { parser } from './parser/gantt';
import common from '../common/common';
import ganttDb from './ganttDb';
import { configureSvgSize } from '../../utils';
parser.yy = ganttDb;
@ -53,7 +54,6 @@ export const draw = function(text, id) {
// Set height based on number of tasks
const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
elem.setAttribute('height', '100%');
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
const svg = select(`[id="${id}"]`);
@ -97,9 +97,8 @@ export const draw = function(text, id) {
taskArray.sort(taskCompare);
makeGant(taskArray, w, h);
if (typeof conf.useWidth !== 'undefined') {
elem.setAttribute('width', w);
}
configureSvgSize(svg, h, w, conf.useMaxWidth);
svg
.append('text')

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

@ -5,6 +5,7 @@ import { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3
import pieData from './pieDb';
import pieParser from './parser/pie';
import { logger } from '../../logger';
import { configureSvgSize } from '../../utils';
const conf = {};
export const setConf = function(cnf) {
@ -20,7 +21,8 @@ export const setConf = function(cnf) {
* @param text
* @param id
*/
let w;
let width;
const height = 450;
export const draw = (txt, id) => {
try {
const parser = pieParser.parser;
@ -31,34 +33,31 @@ export const draw = (txt, id) => {
parser.parse(txt);
logger.debug('Parsed info diagram');
const elem = document.getElementById(id);
w = elem.parentElement.offsetWidth;
width = elem.parentElement.offsetWidth;
if (typeof w === 'undefined') {
w = 1200;
if (typeof width === 'undefined') {
width = 1200;
}
if (typeof conf.useWidth !== 'undefined') {
w = conf.useWidth;
width = conf.useWidth;
}
const h = 450;
elem.setAttribute('height', '100%');
const diagram = select('#' + id);
console.log('conf', conf);
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Set viewBox
elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
// Fetch the default direction, use TD if none was found
var width = w; // 450
var height = 450;
var margin = 40;
var legendRectSize = 18;
var legendSpacing = 4;
var radius = Math.min(width, height) / 2 - margin;
var svg = select('#' + id)
.append('svg')
.attr('width', width)
.attr('height', height)
var svg = diagram
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
@ -67,9 +66,8 @@ export const draw = (txt, id) => {
Object.keys(data).forEach(function(key) {
sum += data[key];
});
logger.info(data);
// set the color scale
// Set the color scale
var color = scaleOrdinal()
.domain(data)
.range(schemeSet2);
@ -80,12 +78,12 @@ export const draw = (txt, id) => {
});
var dataReady = pie(entries(data));
// shape helper to build arcs:
// Shape helper to build arcs:
var arcGenerator = arc()
.innerRadius(0)
.outerRadius(radius);
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
// Build the pie chart: each part of the pie is a path that we build using the arc function.
svg
.selectAll('mySlices')
.data(dataReady)
@ -99,7 +97,8 @@ export const draw = (txt, id) => {
.style('stroke-width', '2px')
.style('opacity', 0.7);
// Now add the Percentage. Use the centroid method to get the best coordinates
// Now add the percentage.
// Use the centroid method to get the best coordinates.
svg
.selectAll('mySlices')
.data(dataReady)
@ -119,10 +118,10 @@ export const draw = (txt, id) => {
.append('text')
.text(parser.yy.getTitle())
.attr('x', 0)
.attr('y', -(h - 50) / 2)
.attr('y', -(height - 50) / 2)
.attr('class', 'pieTitleText');
//Add the slegend/annotations for each section
// Add the legends/annotations for each section
var legend = svg
.selectAll('.legend')
.data(color.domain())

13
src/diagrams/sequence/sequenceRenderer.js
View File

@ -5,7 +5,7 @@ import { parser } from './parser/sequenceDiagram';
import common from '../common/common';
import sequenceDb from './sequenceDb';
import * as configApi from '../../config';
import utils, { assignWithDepth } from '../../utils';
import utils, { assignWithDepth, configureSvgSize } from '../../utils';
parser.yy = sequenceDb;
@ -706,15 +706,8 @@ export const draw = function(text, id) {
.attr('y', -25);
}
if (conf.useMaxWidth) {
diagram.attr('height', '100%');
diagram.attr('width', '100%');
diagram.attr('style', 'max-width:' + width + 'px;');
// diagram.attr('style', 'max-width:100%;');
} else {
diagram.attr('height', height);
diagram.attr('width', width);
}
configureSvgSize(diagram, height, width, conf.useMaxWidth);
const extraVertForTitle = title ? 40 : 0;
diagram.attr(
'viewBox',

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

@ -6,6 +6,7 @@ import { getConfig } from '../../config';
import { render } from '../../dagre-wrapper/index.js';
import { logger } from '../../logger';
import { configureSvgSize } from '../../utils';
const conf = {};
export const setConf = function(cnf) {
@ -211,11 +212,7 @@ export const draw = function(text, id) {
parser.yy = stateDb;
// Parse the graph definition
// try {
parser.parse(text);
// } catch (err) {
// logger.error('Parsing failed', err);
// }
// Fetch the default direction, use TD if none was found
let dir = stateDb.getDirection();
@ -256,54 +253,18 @@ export const draw = function(text, id) {
render(element, g, ['barb'], 'statediagram', id);
const padding = 8;
// const svgBounds = svg.node().getBBox();
// const width = svgBounds.width + padding * 2;
// const height = svgBounds.height + padding * 2;
// logger.debug(
// `new ViewBox 0 0 ${width} ${height}`,
// `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
// );
// if (conf.useMaxWidth) {
// svg.attr('width', '100%');
// svg.attr('style', `max-width: ${width}px;`);
// } else {
// svg.attr('height', height);
// svg.attr('width', width);
// }
// svg.attr('viewBox', `0 0 ${width} ${height}`);
// svg
// .select('g')
// .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
const bounds = svg.node().getBBox();
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
// diagram.attr('height', '100%');
// diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
// diagram.attr('height', height);
// Zoom in a bit
svg.attr('width', width * 1.75);
svg.attr('class', 'statediagram');
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
// svg.attr(
// 'viewBox',
// `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
// );
const svgBounds = svg.node().getBBox();
if (conf.useMaxWidth) {
svg.attr('width', '100%');
svg.attr('style', `max-width: ${width}px;`);
} else {
svg.attr('height', height);
svg.attr('width', width);
}
configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);
// Ensure the viewBox includes the whole svgBounds area with extra space for padding
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

13
src/diagrams/state/stateRenderer.js
View File

@ -8,6 +8,7 @@ import { parser } from './parser/stateDiagram';
// import idCache from './id-cache';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
parser.yy = stateDb;
@ -75,14 +76,10 @@ export const draw = function(text, id) {
const width = bounds.width + padding * 2;
const height = bounds.height + padding * 2;
if (conf.useMaxWidth) {
diagram.attr('width', '100%');
diagram.attr('style', `max-width: ${width * 1.75}px;`);
} else {
// Zoom in a bit
diagram.attr('width', width * 1.75);
}
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
// zoom in a bit
const svgWidth = width * 1.75;
configureSvgSize(diagram, height, svgWidth, conf.useMaxWidth);
diagram.attr(
'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height

11
src/diagrams/user-journey/journeyRenderer.js
View File

@ -2,6 +2,7 @@ import { select } from 'd3';
import { parser } from './parser/journey';
import journeyDb from './journeyDb';
import svgDraw from './svgDraw';
import { configureSvgSize } from '../../utils';
parser.yy = journeyDb;
@ -118,14 +119,8 @@ export const draw = function(text, id) {
}
const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
if (conf.useMaxWidth) {
diagram.attr('height', '100%');
diagram.attr('width', '100%');
diagram.attr('style', 'max-width:' + width + 'px;');
} else {
diagram.attr('height', height);
diagram.attr('width', width);
}
configureSvgSize(diagram, height, width, conf.useMaxWidth);
// Draw activity line
diagram

2
src/mermaidAPI.js
View File

@ -385,7 +385,7 @@ const render = function(id, _txt, cb, container) {
break;
case 'pie':
cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
pieRenderer.setConf(cnf.class);
pieRenderer.setConf(cnf.pie);
pieRenderer.draw(txt, id, pkg.version);
break;
case 'er':

26
src/utils.js
View File

@ -695,12 +695,38 @@ export const calculateTextDimensions = memoize(
(text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`
);
const d3Attrs = function(d3Elem, attrs) {
for (let attr of attrs) {
d3Elem.attr(attr[0], attr[1]);
}
};
export const calculateSvgSizeAttrs = function(height, width, useMaxWidth) {
let attrs = new Map();
attrs.set('height', height);
if (useMaxWidth) {
attrs.set('width', '100%');
attrs.set('style', `max-width: ${width}px;`);
} else {
attrs.set('width', width);
}
return attrs;
};
export const configureSvgSize = function(svgElem, height, width, useMaxWidth) {
const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
console.log('svgElem', svgElem);
d3Attrs(svgElem, attrs);
};
export default {
assignWithDepth,
wrapLabel,
calculateTextHeight,
calculateTextWidth,
calculateTextDimensions,
calculateSvgSizeAttrs,
configureSvgSize,
detectInit,
detectDirective,
detectType,

15
src/utils.spec.js
View File

@ -171,7 +171,6 @@ Alice->Bob: hi`;
expect(type).toBe('git');
});
});
describe('when finding substring in array ', function() {
it('should return the array index that contains the substring', function() {
const arr = ['stroke:val1', 'fill:val2'];
@ -184,7 +183,6 @@ describe('when finding substring in array ', function() {
expect(result).toEqual(-1);
});
});
describe('when formatting urls', function() {
it('should handle links', function() {
const url = 'https://mermaid-js.github.io/mermaid/#/';
@ -242,3 +240,16 @@ describe('when formatting urls', function() {
expect(result).toEqual('about:blank');
});
});
describe('when calculating SVG size', function() {
it('should return width 100% when useMaxWidth is true', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
expect(attrs.get('height')).toEqual(100);
expect(attrs.get('style')).toEqual('max-width: 200px;');
expect(attrs.get('width')).toEqual('100%');
});
it('should return absolute width when useMaxWidth is false', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, false);
expect(attrs.get('height')).toEqual(100);
expect(attrs.get('width')).toEqual(200);
});
});