Show flowchart at top of page
This commit is contained in:
parent
1066372371
commit
e4566d1a45
|
@ -16,12 +16,17 @@ export class Box {
|
||||||
}
|
}
|
||||||
|
|
||||||
flex() {
|
flex() {
|
||||||
this.el.classList.add('flex');
|
this.addClass('flex');
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
monospace() {
|
monospace() {
|
||||||
this.el.classList.add('monospace');
|
this.addClass('monospace');
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
hidden() {
|
||||||
|
this.addClass('hidden');
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,13 +4,13 @@ import { Action } from './action.js';
|
||||||
import { debounce } from '../util.js';
|
import { debounce } from '../util.js';
|
||||||
|
|
||||||
class MermaidDiagram {
|
class MermaidDiagram {
|
||||||
constructor(box) {
|
constructor(box, logBox) {
|
||||||
this.box = box;
|
this.box = box;
|
||||||
this.container = this.box.addBox('Container');
|
this.container = this.box.addBox('Container');
|
||||||
this.element = this.box.addBox('Element');
|
this.element = this.box.addBox('Element');
|
||||||
this.renderBox = this.box.addBox('Render');
|
this.renderBox = this.box.addBox('Render');
|
||||||
this.box.addBox('Spacer').setInnerHTML(' ');
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
||||||
this.logBox = this.box.addBox('Log');
|
this.logBox = logBox;
|
||||||
}
|
}
|
||||||
|
|
||||||
async log(msg, render = true) {
|
async log(msg, render = true) {
|
||||||
|
@ -40,7 +40,8 @@ export class Scene {
|
||||||
this.box = rootBox.addBox(name);
|
this.box = rootBox.addBox(name);
|
||||||
this.titleBox = this.box.addBox('Title').setInnerHTML(name);
|
this.titleBox = this.box.addBox('Title').setInnerHTML(name);
|
||||||
this.box.addBox('Spacer').setInnerHTML(' ');
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
||||||
this.displayValuesBox = this.box.addBox('Values');
|
this.topSection = this.box.addBox('Top section').flex();
|
||||||
|
this.displayValuesBox = this.topSection.addBox('Values');
|
||||||
this.box.addBox('Spacer').setInnerHTML(' ');
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
||||||
this.actors = new Set();
|
this.actors = new Set();
|
||||||
|
|
||||||
|
@ -65,14 +66,18 @@ export class Scene {
|
||||||
|
|
||||||
withSequenceDiagram() {
|
withSequenceDiagram() {
|
||||||
const box = this.box.addBox('Sequence diagram');
|
const box = this.box.addBox('Sequence diagram');
|
||||||
this.sequence = new MermaidDiagram(box);
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
||||||
|
const logBox = this.box.addBox('Sequence diagram text');
|
||||||
|
this.sequence = new MermaidDiagram(box, logBox);
|
||||||
this.sequence.log('sequenceDiagram', false);
|
this.sequence.log('sequenceDiagram', false);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
withFlowchart(direction = 'BT') {
|
withFlowchart(direction = 'BT') {
|
||||||
const box = this.box.addBox('Flowchart');
|
const box = this.topSection.addBox('Flowchart');
|
||||||
this.flowchart = new MermaidDiagram(box);
|
this.box.addBox('Spacer').setInnerHTML(' ');
|
||||||
|
const logBox = this.box.addBox('Flowchart text');
|
||||||
|
this.flowchart = new MermaidDiagram(box, logBox);
|
||||||
this.flowchart.log(`graph ${direction}`, false);
|
this.flowchart.log(`graph ${direction}`, false);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,3 +32,7 @@ a:visited {
|
||||||
svg {
|
svg {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
.hidden {
|
||||||
|
/* display: none; */
|
||||||
|
/* visibility: hidden; */
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue