Minor cleanup

This commit is contained in:
Ladd Hoffman 2023-07-10 01:20:51 -05:00
parent 72c3bd1663
commit 8d0daf2062
12 changed files with 46 additions and 33 deletions

View File

@ -5,7 +5,6 @@ export class Flowchart extends MermaidDiagram {
super(box, logBox);
this.direction = direction;
this.init();
this.controlBox = this.box.addBox('Controls');
}
init() {

View File

@ -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()}`;

View File

@ -28,6 +28,7 @@ export class MermaidDiagram {
},
securityLevel: 'loose', // 'loose' so that we can use click events
// logLevel: 'debug',
useMaxWidth: true,
});
}

View File

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

View File

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

View File

@ -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('<pre>type and weight are required</pre>');
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({

View File

@ -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('<h3>New Edge</h3>', { 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;
}
}

View File

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

View File

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

View File

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

View File

@ -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) {

View File

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