-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmermaid-init.js
More file actions
62 lines (55 loc) · 2.08 KB
/
mermaid-init.js
File metadata and controls
62 lines (55 loc) · 2.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
(() => {
const darkThemes = ['ayu', 'navy', 'coal'];
const lightThemes = ['light', 'rust'];
const classList = document.getElementsByTagName('html')[0].classList;
let lastThemeWasLight = true;
for (const cssClass of classList) {
if (darkThemes.includes(cssClass)) {
lastThemeWasLight = false;
break;
}
}
const theme = lastThemeWasLight ? 'default' : 'dark';
mermaid.initialize({ startOnLoad: true, theme });
mermaid.initialize({ startOnLoad: false, theme });
// Load svg-pan-zoom for interactive zoom and pan
const panZoomScript = document.createElement('script');
panZoomScript.src = 'https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js';
panZoomScript.onload = () => {
mermaid.run({
querySelector: '.mermaid',
postRenderCallback: (id) => {
const svg = document.getElementById(id);
if (svg && typeof svgPanZoom === 'function') {
svg.removeAttribute('width');
svg.removeAttribute('height');
svgPanZoom(svg, {
zoomEnabled: true,
controlIconsEnabled: true,
fit: true,
center: true,
minZoom: 1,
maxZoom: 5,
zoomScaleSensitivity: 0.2
});
}
}
});
};
document.head.appendChild(panZoomScript);
// Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
for (const darkTheme of darkThemes) {
document.getElementById(darkTheme).addEventListener('click', () => {
if (lastThemeWasLight) {
window.location.reload();
}
});
}
for (const lightTheme of lightThemes) {
document.getElementById(lightTheme).addEventListener('click', () => {
if (!lastThemeWasLight) {
window.location.reload();
}
});
}
})();