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('