Show flowchart at top of page

forum-network/src/classes/box.js

@@ -16,12 +16,17 @@ export class Box {
   }
 
   flex() {
-    this.el.classList.add('flex');
+    this.addClass('flex');
     return this;
   }
 
   monospace() {
-    this.el.classList.add('monospace');
+    this.addClass('monospace');
+    return this;
+  }
+
+  hidden() {
+    this.addClass('hidden');
     return this;
   }
 

forum-network/src/classes/scene.js

@@ -4,13 +4,13 @@ import { Action } from './action.js';
 import { debounce } from '../util.js';
 
 class MermaidDiagram {
-  constructor(box) {
+  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.logBox = this.box.addBox('Log');
+    this.logBox = logBox;
   }
 
   async log(msg, render = true) {
@@ -40,7 +40,8 @@ export class Scene {
     this.box = rootBox.addBox(name);
     this.titleBox = this.box.addBox('Title').setInnerHTML(name);
     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.actors = new Set();
 
@@ -65,14 +66,18 @@ export class Scene {
 
   withSequenceDiagram() {
     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);
     return this;
   }
 
   withFlowchart(direction = 'BT') {
-    const box = this.box.addBox('Flowchart');
-    this.flowchart = new MermaidDiagram(box);
+    const box = this.topSection.addBox('Flowchart');
+    this.box.addBox('Spacer').setInnerHTML(' ');
+    const logBox = this.box.addBox('Flowchart text');
+    this.flowchart = new MermaidDiagram(box, logBox);
     this.flowchart.log(`graph ${direction}`, false);
     return this;
   }

forum-network/src/index.css

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