marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-26 02:39:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '1614_fontFamily' of https://github.com/knsv/mermaid into 1542_take_two

Browse Source
This commit is contained in:
Ashish Jain
2020-08-13 20:09:13 +02:00
parent bec3cc437d 525a32f9f0
commit 2519486a02
5 changed files with 57 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
cypress/integration/rendering/classDiagram-v2.spec.js
View File

@@ -11,13 +11,13 @@ describe('Class diagram', () => {
classA -- classC : link classA -- classC : link
classC -- classD : link classC -- classD : link
classB -- classD classB -- classD
`, `,
{logLevel : 1} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
it('1: should render a simple class diagram', () => { it('1: should render a simple class diagram', () => {
imgSnapshotTest( imgSnapshotTest(
` `
@@ -47,7 +47,7 @@ describe('Class diagram', () => {
test() test()
} }
`, `,
{logLevel : 1} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -76,7 +76,8 @@ describe('Class diagram', () => {
test() test()
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -94,7 +95,7 @@ describe('Class diagram', () => {
Class01 : +int publicGorilla Class01 : +int publicGorilla
Class01 : #int protectedMarmoset Class01 : #int protectedMarmoset
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -147,7 +148,7 @@ describe('Class diagram', () => {
} }
`, `,
], ],
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -177,7 +178,7 @@ describe('Class diagram', () => {
test() test()
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -189,7 +190,7 @@ describe('Class diagram', () => {
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()* Class01 : someMethod()*
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -201,7 +202,7 @@ describe('Class diagram', () => {
Class01 <|-- AveryLongClass : Cool Class01 <|-- AveryLongClass : Cool
Class01 : someMethod()$ Class01 : someMethod()$
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -221,7 +222,7 @@ describe('Class diagram', () => {
test() test()
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -242,7 +243,7 @@ describe('Class diagram', () => {
test() test()
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -264,7 +265,7 @@ describe('Class diagram', () => {
} }
link class01 "google.com" "A Tooltip" link class01 "google.com" "A Tooltip"
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -286,7 +287,7 @@ describe('Class diagram', () => {
} }
callback class01 "functionCall" "A Tooltip" callback class01 "functionCall" "A Tooltip"
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -301,7 +302,7 @@ describe('Class diagram', () => {
testArray() bool[] testArray() bool[]
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -317,7 +318,7 @@ describe('Class diagram', () => {
testArray() bool[] testArray() bool[]
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -335,7 +336,7 @@ describe('Class diagram', () => {
cssClass "Class10" exClass cssClass "Class10" exClass
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -351,7 +352,7 @@ describe('Class diagram', () => {
testArray() bool[] testArray() bool[]
} }
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });
@@ -365,7 +366,7 @@ describe('Class diagram', () => {
cssClass "Class10, class20" exClass cssClass "Class10, class20" exClass
`, `,
{} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
cy.get('svg'); cy.get('svg');
}); });

16
cypress/platform/class.html
View File

@@ -20,6 +20,15 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'arial', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
classDiagram-v2
classApa -- classB : Inheritance
classA -- classC : link
classC -- classD : link
classB -- classD
</div>
<div class="mermaid2" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram-v2 classDiagram-v2
class BankAccount{ class BankAccount{
@@ -43,7 +52,7 @@
classB : method2() int classB : method2() int
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram-v2 classDiagram-v2
classA -- classB : Inheritance classA -- classB : Inheritance
@@ -71,7 +80,10 @@
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', // fontFamily: '"arial", sans-serif',
// themeVariables: {
// fontFamily: '"arial", sans-serif',
// },
curve: 'linear', curve: 'linear',
securityLevel: 'loose' securityLevel: 'loose'
}); });

10
src/config.js
View File

@@ -49,7 +49,6 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
* @returns {*} - the siteConfig * @returns {*} - the siteConfig
*/ */
export const setSiteConfig = conf => { export const setSiteConfig = conf => {
console.warn('Setting site config');
siteConfig = assignWithDepth({}, defaultConfig); siteConfig = assignWithDepth({}, defaultConfig);
siteConfig = assignWithDepth(siteConfig, conf); siteConfig = assignWithDepth(siteConfig, conf);
@@ -138,6 +137,15 @@ export const sanitize = options => {
}; };
export const addDirective = directive => { export const addDirective = directive => {
if (directive.fontFamily) {
if (!directive.themeVariables) {
directive.themeVariables = { fontFamily: directive.fontFamily };
} else {
if (!directive.themeVariables.fontFamily) {
directive.themeVariables = { fontFamily: directive.fontFamily };
}
}
}
directives.push(directive); directives.push(directive);
updateCurrentConfig(siteConfig, directives); updateCurrentConfig(siteConfig, directives);
}; };

14
src/mermaidAPI.js
View File

@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
// console.warn('Render fetching config'); // console.warn('Render fetching config');
const cnf = configApi.getConfig(); const cnf = configApi.getConfig();
console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor); console.warn('Render with config after adding new directives', cnf.fontFamily);
// Check the maximum allowed text size // Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) { if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa'; txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -553,6 +553,18 @@ function reinitialize() {
function initialize(options) { function initialize(options) {
console.warn(`mermaidAPI.initialize: v${pkg.version} `, options); console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
// Handle legacy location of font-family configuration
// console.warn('Conf - ', options.themeVariables.fontFamily);
if (options.fontFamily) {
if (!options.themeVariables) {
options.themeVariables = { fontFamily: options.fontFamily };
} else {
if (!options.themeVariables.fontFamily) {
options.themeVariables = { fontFamily: options.fontFamily };
}
}
}
// Set default options // Set default options
if (options && options.theme && theme[options.theme]) { if (options && options.theme && theme[options.theme]) {

1
src/styles.js
View File

@@ -29,6 +29,7 @@ const themes = {
export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides); export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
const getStyles = (type, userStyles, options) => { const getStyles = (type, userStyles, options) => {
console.warn('options in styles: ', options);
return ` { return ` {
font-family: ${options.fontFamily}; font-family: ${options.fontFamily};
font-size: ${options.fontSize}; font-size: ${options.fontSize};