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

Making the font size being configurable and addting the ability set the section font size

This commit is contained in:
Knut Sveidqvist 2021-02-25 10:06:13 +01:00
parent 693de2996a
commit 021bc5f011
5 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
cypress/platform/knsv.html
View File

@ -25,17 +25,35 @@
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="flex"> <div class="flex">
<div class="mermaid" style="width: 50%; height: 400px;"> <div class="mermaid" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "journey": {"useMaxWidth": false }} }%% %%{init: { "logLevel": 1, "gantt": {"sectionFontSize": 6, "fontSize": 16 }} }%%
journey gantt
title My working day dateFormat :YYYY-MM-DD
section Go to work title Adding GANTT diagram functionality to mermaid
Make tea: 5: Me excludes :excludes the named dates/days from being included in a charted task..
Go upstairs: 3: Me section A section
Do work: 1: Me, Cat Active task :done, des2, 2014-01-09, 3d
section Go home Completed task :done, des1, 2014-01-06, 5d
Go downstairs: 5: Me Future task : des3, after des2, 5d
Sit down: 5: Me 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
</div> </div>
<div class="mermaid2" style="width: 50%; height: 400px;"> <div class="mermaid2" style="width: 50%; height: 400px;">
flowchart TD flowchart TD
@ -116,13 +134,12 @@ A --> B
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true }, flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
htmlLabels: true, htmlLabels: true,
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: true }, sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
fontFamily: 'courier', fontFamily: 'courier',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'loose', securityLevel: 'loose',
sequence:{mirrorActors:false}
}); });
function callback(){alert('It worked');} function callback(){alert('It worked');}
</script> </script>

11
src/defaultConfig.js
View File

@ -537,7 +537,7 @@ const config = {
***Default value 50**. ***Default value 50**.
*/ */
topPadding: 50, topPadding: 50,
rightPadding: 75,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- | *| --- | --- | --- | --- | --- |
@ -567,6 +567,15 @@ const config = {
***Default value 11**. ***Default value 11**.
*/ */
fontSize: 11, fontSize: 11,
/**
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| sectionFontSize | Font size for secions| Integer | Required | Any Positive Value |
*
***Notes:**
***Default value 11**.
*/
sectionFontSize: 11,
/** /**
*| Parameter | Description |Type | Required | Values| *| Parameter | Description |Type | Required | Values|

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

@ -11,11 +11,12 @@ import {
import { parser } from './parser/gantt'; import { parser } from './parser/gantt';
import common from '../common/common'; import common from '../common/common';
import ganttDb from './ganttDb'; import ganttDb from './ganttDb';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
parser.yy = ganttDb; parser.yy = ganttDb;
const conf = { const conf2 = {
titleTopMargin: 25, titleTopMargin: 25,
barHeight: 20, barHeight: 20,
barGap: 4, barGap: 4,
@ -26,15 +27,15 @@ const conf = {
fontSize: 11, fontSize: 11,
fontFamily: '"Open-Sans", "sans-serif"' fontFamily: '"Open-Sans", "sans-serif"'
}; };
export const setConf = function(cnf) { export const setConf = function() {
const keys = Object.keys(cnf); // const keys = Object.keys(cnf);
// keys.forEach(function(key) {
keys.forEach(function(key) { // conf[key] = cnf[key];
conf[key] = cnf[key]; // });
});
}; };
let w; let w;
export const draw = function(text, id) { export const draw = function(text, id) {
const conf = getConfig().gantt;
parser.yy.clear(); parser.yy.clear();
parser.parse(text); parser.parse(text);
@ -412,6 +413,8 @@ export const draw = function(text, id) {
return (d[1] * theGap) / 2 + theTopPad; return (d[1] * theGap) / 2 + theTopPad;
} }
}) })
.attr('font-size', conf.sectionFontSize)
.attr('font-size', conf.sectionFontSize)
.attr('class', function(d) { .attr('class', function(d) {
for (let i = 0; i < categories.length; i++) { for (let i = 0; i < categories.length; i++) {
if (d[0] === categories[i]) { if (d[0] === categories[i]) {

14
src/diagrams/gantt/styles.js
View File

@ -42,8 +42,8 @@ const getStyles = options =>
.sectionTitle { .sectionTitle {
text-anchor: start; text-anchor: start;
font-size: 11px; // font-size: ${options.ganttFontSize};
text-height: 14px; // text-height: 14px;
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
@ -90,14 +90,14 @@ const getStyles = options =>
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
} }
.taskText:not([font-size]) { // .taskText:not([font-size]) {
font-size: 11px; // font-size: ${options.ganttFontSize};
} // }
.taskTextOutsideRight { .taskTextOutsideRight {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: start; text-anchor: start;
font-size: 11px; // font-size: ${options.ganttFontSize};
font-family: 'trebuchet ms', verdana, arial, sans-serif; font-family: 'trebuchet ms', verdana, arial, sans-serif;
font-family: var(--mermaid-font-family); font-family: var(--mermaid-font-family);
@ -106,7 +106,7 @@ const getStyles = options =>
.taskTextOutsideLeft { .taskTextOutsideLeft {
fill: ${options.taskTextDarkColor}; fill: ${options.taskTextDarkColor};
text-anchor: end; text-anchor: end;
font-size: 11px; // font-size: ${options.ganttFontSize};
} }
/* Special case clickable */ /* Special case clickable */

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

@ -178,7 +178,6 @@ export const bounds = {
cnt++; cnt++;
// The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems
const n = _self.sequenceItems.length - cnt + 1; const n = _self.sequenceItems.length - cnt + 1;
_self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min); _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);
_self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max); _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);