Minor cleanup
This commit is contained in:
parent
72c3bd1663
commit
8d0daf2062
|
@ -5,7 +5,6 @@ export class Flowchart extends MermaidDiagram {
|
|||
super(box, logBox);
|
||||
this.direction = direction;
|
||||
this.init();
|
||||
this.controlBox = this.box.addBox('Controls');
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
|
@ -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()}`;
|
||||
|
|
|
@ -28,6 +28,7 @@ export class MermaidDiagram {
|
|||
},
|
||||
securityLevel: 'loose', // 'loose' so that we can use click events
|
||||
// logLevel: 'debug',
|
||||
useMaxWidth: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue