Show flowchart at top of page

This commit is contained in:
Ladd Hoffman 2023-01-05 14:30:21 -06:00
parent 1066372371
commit e4566d1a45
3 changed files with 22 additions and 8 deletions

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -32,3 +32,7 @@ a:visited {
svg { svg {
width: 800px; width: 800px;
} }
.hidden {
/* display: none; */
/* visibility: hidden; */
}