77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import mermaid from 'https://unpkg.com/mermaid@9.2.2/dist/mermaid.esm.min.mjs';
|
|
import { debounce } from '../../util/helpers.js';
|
|
|
|
export class MermaidDiagram {
|
|
constructor(box, logBox) {
|
|
this.box = box;
|
|
this.container = this.box.addBox('Container');
|
|
this.element = this.box.addBox('Element');
|
|
this.renderBox = this.box.addBox('Render');
|
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
|
this.logBoxPre = logBox.el.appendChild(document.createElement('pre'));
|
|
this.inSection = 0;
|
|
}
|
|
|
|
static initializeAPI() {
|
|
mermaid.mermaidAPI.initialize({
|
|
startOnLoad: false,
|
|
theme: 'base',
|
|
themeVariables: {
|
|
darkMode: true,
|
|
primaryColor: '#2a5b6c',
|
|
primaryTextColor: '#b6b6b6',
|
|
// lineColor: '#349cbd',
|
|
lineColor: '#57747d',
|
|
signalColor: '#57747d',
|
|
// signalColor: '#349cbd',
|
|
noteBkgColor: '#516f77',
|
|
noteTextColor: '#cecece',
|
|
activationBkgColor: '#1d3f49',
|
|
activationBorderColor: '#569595',
|
|
},
|
|
securityLevel: 'loose', // 'loose' so that we can use click events
|
|
// logLevel: 'debug',
|
|
});
|
|
}
|
|
|
|
async log(msg, render = true) {
|
|
if (this.logBoxPre.textContent && !this.logBoxPre.textContent.endsWith('\n')) {
|
|
this.logBoxPre.textContent = `${this.logBoxPre.textContent}\n`;
|
|
}
|
|
this.logBoxPre.textContent = `${this.logBoxPre.textContent}${msg}\n`;
|
|
if (render) {
|
|
await this.render();
|
|
}
|
|
return this;
|
|
}
|
|
|
|
getText() {
|
|
return this.logBoxPre.textContent;
|
|
}
|
|
|
|
async render() {
|
|
return debounce(async () => {
|
|
const text = this.getText();
|
|
try {
|
|
await mermaid.mermaidAPI.render(
|
|
this.element.getId(),
|
|
text,
|
|
(svgCode, bindFunctions) => {
|
|
this.renderBox.setInnerHTML(svgCode);
|
|
if (bindFunctions) {
|
|
bindFunctions(this.renderBox.el);
|
|
}
|
|
},
|
|
);
|
|
} catch (e) {
|
|
console.error(`render text:\n${text}`);
|
|
throw e;
|
|
}
|
|
}, 100);
|
|
}
|
|
|
|
reset() {
|
|
this.logBoxPre.textContent = '';
|
|
}
|
|
}
|