diff --git a/forum-network/src/classes/display/flowchart.js b/forum-network/src/classes/display/flowchart.js index 77a4958..33d4d97 100644 --- a/forum-network/src/classes/display/flowchart.js +++ b/forum-network/src/classes/display/flowchart.js @@ -5,7 +5,6 @@ export class Flowchart extends MermaidDiagram { super(box, logBox); this.direction = direction; this.init(); - this.controlBox = this.box.addBox('Controls'); } init() { diff --git a/forum-network/src/classes/display/form.js b/forum-network/src/classes/display/form.js index df7c811..3dec6bc 100644 --- a/forum-network/src/classes/display/form.js +++ b/forum-network/src/classes/display/form.js @@ -2,7 +2,7 @@ import { randomID } from '../../util/helpers.js'; import { Box } from './box.js'; export class FormElement extends Box { - constructor(name, form, opts) { + constructor(name, form, opts = {}) { const parentEl = opts.parentEl ?? form.el; super(name, parentEl, opts); this.form = form; @@ -71,7 +71,7 @@ export class SubFormArray extends FormElement { export class SubForm extends FormElement { constructor(name, form, opts) { const parentEl = opts.subFormArray ? opts.subFormArray.el : form.el; - const subForm = form.document.form({ name, parentEl }).lastElement; + const subForm = form.document.form({ name, parentEl, tagName: 'div' }).lastElement; super(name, form, { ...opts, parentEl }); this.subForm = subForm; if (opts.subFormArray) { @@ -86,7 +86,7 @@ export class SubForm extends FormElement { export class Form extends Box { constructor(document, opts = {}) { - super(opts.name, opts.parentEl || document.el, { ...opts, tagName: 'form' }); + super(opts.name, opts.parentEl || document.el, { tagName: 'form', ...opts }); this.document = document; this.items = []; this.id = opts.id ?? `form_${randomID()}`; diff --git a/forum-network/src/classes/display/mermaid.js b/forum-network/src/classes/display/mermaid.js index 911b141..9e1b99a 100644 --- a/forum-network/src/classes/display/mermaid.js +++ b/forum-network/src/classes/display/mermaid.js @@ -28,6 +28,7 @@ export class MermaidDiagram { }, securityLevel: 'loose', // 'loose' so that we can use click events // logLevel: 'debug', + useMaxWidth: true, }); } diff --git a/forum-network/src/classes/display/controls.js b/forum-network/src/classes/display/scene-controls.js similarity index 98% rename from forum-network/src/classes/display/controls.js rename to forum-network/src/classes/display/scene-controls.js index 4911456..02340e3 100644 --- a/forum-network/src/classes/display/controls.js +++ b/forum-network/src/classes/display/scene-controls.js @@ -6,7 +6,7 @@ class Button { } } -export class Controls { +export class SceneControls { constructor(parentBox) { this.disableAutoplayButton = new Button('Disable Auto-play', () => { const url = new URL(window.location.href); diff --git a/forum-network/src/classes/display/scene.js b/forum-network/src/classes/display/scene.js index 4606c46..43103e5 100644 --- a/forum-network/src/classes/display/scene.js +++ b/forum-network/src/classes/display/scene.js @@ -4,7 +4,7 @@ import { MermaidDiagram } from './mermaid.js'; import { SequenceDiagram } from './sequence.js'; import { Table } from './table.js'; import { Flowchart } from './flowchart.js'; -import { Controls } from './controls.js'; +import { SceneControls } from './scene-controls.js'; import { Box } from './box.js'; import { Document } from './document.js'; @@ -33,8 +33,8 @@ export class Scene { if (!window.disableSceneControls) { this.topRail = new Box('Top rail', document.body, { prepend: true }).addClass('top-rail'); - this.controlsBox = this.topRail.addBox('Controls').addClass('controls'); - this.controls = new Controls(this.controlsBox); + const controlsBox = this.topRail.addBox('SceneControls').addClass('scene-controls'); + this.controls = new SceneControls(controlsBox); } } diff --git a/forum-network/src/classes/supporting/edge.js b/forum-network/src/classes/supporting/edge.js index 79391a5..14af725 100644 --- a/forum-network/src/classes/supporting/edge.js +++ b/forum-network/src/classes/supporting/edge.js @@ -77,8 +77,12 @@ export class Edge { const addEdgeForm = (edge) => { const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem; - subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type }) - .textField({ id: 'weight', name: 'weight', defaultValue: edge.weight }) + subForm.textField({ + id: 'type', name: 'type', defaultValue: edge.type, required: true, + }) + .textField({ + id: 'weight', name: 'weight', defaultValue: edge.weight, required: true, + }) .button({ id: 'remove', name: 'Remove Edge Type', @@ -99,7 +103,15 @@ export class Edge { .button({ id: 'save', name: 'Save', + type: 'submit', cb: ({ form: { value: { edges } } }) => { + // Do validation + for (const { type, weight } of edges) { + if (type === null || weight === null) { + graph.errorDoc.remark('
type and weight are required
'); + return; + } + } // Handle additions and updates for (const { type, weight } of edges) { graph.setEdgeWeight(type, from, to, weight); @@ -111,6 +123,7 @@ export class Edge { } } graph.redraw(); + graph.errorDoc.clear(); }, }) .button({ diff --git a/forum-network/src/classes/supporting/vertex.js b/forum-network/src/classes/supporting/vertex.js index 4e2e79a..9c874d6 100644 --- a/forum-network/src/classes/supporting/vertex.js +++ b/forum-network/src/classes/supporting/vertex.js @@ -107,20 +107,28 @@ export class Vertex { Object.assign(vertex, formValue); vertex.displayVertex(); } else { - graph.addVertex(formValue.type, formValue.id, null, formValue.label); + const newVertex = graph.addVertex(formValue.type, formValue.id, null, formValue.label); + Object.assign(newVertex, formValue); + doc.clear(); + Vertex.prepareEditorDocument(graph, doc, newVertex.id); } if (fullRedraw) { graph.redraw(); } - if (!vertex) { - // This was a new vertex. Now let's edit. - doc.clear(); - Vertex.prepareEditorDocument(graph, doc, formValue.id); - } }, }); if (vertex) { + form.button({ + id: 'delete', + name: 'Delete Vertex', + cb: () => { + graph.deleteVertex(vertex.id); + graph.redraw(); + graph.resetEditorDocument(); + }, + }); + doc.remark('

New Edge

', { parentEl: form.el }); const { subForm } = form.subForm({ name: 'newEdge' }).lastItem; subForm.textField({ name: 'to' }); @@ -142,18 +150,6 @@ export class Vertex { cb: () => graph.resetEditorDocument(), }); - if (vertex) { - form.button({ - id: 'delete', - name: 'Delete Vertex', - cb: () => { - graph.deleteVertex(vertex.id); - graph.redraw(); - graph.resetEditorDocument(); - }, - }); - } - return doc; } } diff --git a/forum-network/src/classes/supporting/wdg.js b/forum-network/src/classes/supporting/wdg.js index c0e71cb..c1768a0 100644 --- a/forum-network/src/classes/supporting/wdg.js +++ b/forum-network/src/classes/supporting/wdg.js @@ -95,9 +95,10 @@ export class WeightedDirectedGraph { this.scene?.withSectionFlowchart(); this.flowchart = this.scene?.lastFlowchart; if (this.editable) { - this.editorDoc = new Document('Controls', this.flowchart.controlBox.el); + this.editorDoc = new Document('WDGControls', this.flowchart.box.el); this.resetEditorDocument(); } + this.errorDoc = new Document('WDGErrors', this.flowchart.box.el); return this; } diff --git a/forum-network/src/index.css b/forum-network/src/index.css index 6354248..baf34d5 100644 --- a/forum-network/src/index.css +++ b/forum-network/src/index.css @@ -42,7 +42,7 @@ a:visited { width: 100%; height: 0; } -.controls { +.scene-controls { position: relative; left: 150px; } @@ -86,3 +86,6 @@ label > div { table { width: 100%; } +form { + min-width: 20em; +} \ No newline at end of file diff --git a/forum-network/src/tests/scripts/availability.test.js b/forum-network/src/tests/scripts/availability.test.js index 64c45a7..7cac03d 100644 --- a/forum-network/src/tests/scripts/availability.test.js +++ b/forum-network/src/tests/scripts/availability.test.js @@ -4,7 +4,7 @@ import { Expert } from '../../classes/actors/expert.js'; import { DAO } from '../../classes/dao/dao.js'; import { Public } from '../../classes/actors/public.js'; import { PostContent } from '../../classes/supporting/post-content.js'; -import { delayOrWait } from '../../classes/display/controls.js'; +import { delayOrWait } from '../../classes/display/scene-controls.js'; import { mochaRun } from '../../util/helpers.js'; const DELAY_INTERVAL = 100; diff --git a/forum-network/src/tests/scripts/forum.test-util.js b/forum-network/src/tests/scripts/forum.test-util.js index 02e85d5..36cb47a 100644 --- a/forum-network/src/tests/scripts/forum.test-util.js +++ b/forum-network/src/tests/scripts/forum.test-util.js @@ -3,7 +3,7 @@ import { Scene } from '../../classes/display/scene.js'; import { Expert } from '../../classes/actors/expert.js'; import { PostContent } from '../../classes/supporting/post-content.js'; import { DAO } from '../../classes/dao/dao.js'; -import { delayOrWait } from '../../classes/display/controls.js'; +import { delayOrWait } from '../../classes/display/scene-controls.js'; export class ForumTest { constructor(options) { diff --git a/forum-network/src/tests/scripts/validation-pool.test.js b/forum-network/src/tests/scripts/validation-pool.test.js index b7a5b05..77cfd65 100644 --- a/forum-network/src/tests/scripts/validation-pool.test.js +++ b/forum-network/src/tests/scripts/validation-pool.test.js @@ -3,7 +3,7 @@ import { Scene } from '../../classes/display/scene.js'; import { Expert } from '../../classes/actors/expert.js'; import { PostContent } from '../../classes/supporting/post-content.js'; import { DAO } from '../../classes/dao/dao.js'; -import { delayOrWait } from '../../classes/display/controls.js'; +import { delayOrWait } from '../../classes/display/scene-controls.js'; import { mochaRun } from '../../util/helpers.js'; const POOL_DURATION_MS = 100;