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

feat(katex): fixed node sizing issues, caused by KaTeX fonts not being loaded

This commit is contained in:
Nicolas Newman 2022-03-29 17:37:35 -04:00
parent 4736e59393
commit 1db4230d35
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -62,6 +62,7 @@
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",
"dompurify": "2.3.6",
"fontfaceobserver": "^2.1.0",
"graphlib": "^2.1.8",
"katex": "^0.15.2",
"khroma": "^1.4.1",

50
src/mermaid.js
View File

@ -5,6 +5,7 @@
import { log } from './logger';
import mermaidAPI from './mermaidAPI';
import utils from './utils';
import FontFaceObserver from 'fontfaceobserver';
import 'katex/dist/katex.css';
/**
@ -172,6 +173,53 @@ const contentLoaded = function () {
}
};
/**
* ##contentLoaded Callback function that is called when page is loaded. This functions attempts to
* pre-load the Katex fonts before configuring mermaid and calling init. Failure to pre-load fonts
* could cause nodes to be improperly sized.
*/
const loadKatexFont = function () {
const fontArray = [
{ name: 'KaTeX_AMS', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Caligraphic', options: { weight: 700, style: 'normal' } },
{ name: 'KaTeX_Caligraphic', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Fraktur', options: { weight: 700, style: 'normal' } },
{ name: 'KaTeX_Fraktur', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Main', options: { weight: 700, style: 'normal' } },
{ name: 'KaTeX_Main', options: { weight: 700, style: 'italic' } },
{ name: 'KaTeX_Main', options: { weight: 400, style: 'italic' } },
{ name: 'KaTeX_Main', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Math', options: { weight: 700, style: 'italic' } },
{ name: 'KaTeX_Math', options: { weight: 400, style: 'italic' } },
{ name: 'KaTeX_SansSerif', options: { weight: 700, style: 'normal' } },
{ name: 'KaTeX_SansSerif', options: { weight: 400, style: 'italic' } },
{ name: 'KaTeX_SansSerif', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Script', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Size1', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Size2', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Size3', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Size4', options: { weight: 400, style: 'normal' } },
{ name: 'KaTeX_Typewriter', options: { weight: 400, style: 'normal' } },
];
const observers = fontArray.map(function (fontObj) {
return new FontFaceObserver(fontObj.name, fontObj.options).load();
});
Promise.all(observers).then(
function (fonts) {
fonts.forEach(function (font) {
log.warn(font.family + ' (weight: ' + font.weight + ') loaded successfully');
});
contentLoaded();
},
function (err) {
log.error('Some fonts failed to load: ' + err);
contentLoaded();
}
);
};
if (typeof document !== 'undefined') {
/*!
* Wait for document loaded before starting the execution
@ -179,7 +227,7 @@ if (typeof document !== 'undefined') {
window.addEventListener(
'load',
function () {
contentLoaded();
loadKatexFont();
},
false
);

5
yarn.lock
View File

@ -5798,6 +5798,11 @@ follow-redirects@^1.0.0, follow-redirects@^1.14.0:
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
fontfaceobserver@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
for-in@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"