2022-11-11 16:52:57 -06:00
|
|
|
import { Actor } from './actor.js';
|
|
|
|
import { Action } from './action.js';
|
|
|
|
// import mermaid from 'https://unpkg.com/mermaid@9.2.2/dist/mermaid.esm.mjs';
|
2022-11-07 17:44:57 -06:00
|
|
|
|
|
|
|
export class Scene {
|
|
|
|
constructor(name, rootBox) {
|
|
|
|
this.name = name;
|
|
|
|
this.box = rootBox.addBox(name);
|
|
|
|
this.titleBox = this.box.addBox().setInnerHTML(name);
|
|
|
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
|
|
|
this.displayValuesBox = this.box.addBox(`${this.name}-values`);
|
|
|
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
|
|
|
this.logBox = this.box.addBox(`${this.name}-log`);
|
2022-11-11 16:52:57 -06:00
|
|
|
// this.seqDiagramContainer = this.box.addBox(`${this.name}-seq-diagram-container`);
|
|
|
|
// this.seqDiagramBox = this.box.addBox(`${this.name}-seq-diagram`);
|
|
|
|
// mermaid.mermaidAPI.initialize({ startOnLoad: false });
|
2022-11-07 17:44:57 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
addActor(name) {
|
|
|
|
const actor = new Actor(name, this);
|
|
|
|
return actor;
|
|
|
|
}
|
|
|
|
|
|
|
|
addAction(name) {
|
|
|
|
const action = new Action(name, this);
|
|
|
|
return action;
|
|
|
|
}
|
|
|
|
|
|
|
|
addDisplayValue(name) {
|
|
|
|
const dv = this.displayValuesBox.addDisplayValue(name);
|
|
|
|
return dv;
|
|
|
|
}
|
|
|
|
|
|
|
|
log(msg) {
|
|
|
|
this.logBox.addBox().setInnerHTML(msg).monospace();
|
|
|
|
return this;
|
|
|
|
}
|
2022-11-11 16:52:57 -06:00
|
|
|
|
|
|
|
// async renderSequenceDiagram() {
|
|
|
|
// await mermaid.mermaidAPI.render(
|
|
|
|
// `${this.name}-seq-diagram-element`,
|
|
|
|
// this.logBox.getInnerText(),
|
|
|
|
// this.insertSvg,
|
|
|
|
// this.seqDiagramContainer.el
|
|
|
|
// );
|
|
|
|
// }
|
|
|
|
|
|
|
|
// insertSvg (svgCode) {
|
|
|
|
// this.seqDiagramBox.setInnerHTML(svgCode);
|
|
|
|
// };
|
2022-11-07 17:44:57 -06:00
|
|
|
}
|