Able to add new vertices and edges

This commit is contained in:
Ladd Hoffman 2023-07-09 23:38:59 -05:00
parent a743a81218
commit ea6e2d4494
3 changed files with 54 additions and 31 deletions

View File

@ -62,7 +62,6 @@ export class Edge {
} }
static prepareEditorDocument(graph, doc, from, to) { static prepareEditorDocument(graph, doc, from, to) {
doc.clear();
const form = doc.form({ name: 'editorForm' }).lastElement; const form = doc.form({ name: 'editorForm' }).lastElement;
doc.remark('<h3>Edit Edge</h3>', { parentEl: form.el }); doc.remark('<h3>Edit Edge</h3>', { parentEl: form.el });
form form

View File

@ -1,5 +1,7 @@
import { displayNumber } from '../../util/helpers.js'; import { displayNumber } from '../../util/helpers.js';
import { Edge } from './edge.js';
export class Vertex { export class Vertex {
constructor(graph, type, id, data, options = {}) { constructor(graph, type, id, data, options = {}) {
this.graph = graph; this.graph = graph;
@ -88,10 +90,11 @@ export class Vertex {
id: 'add', id: 'add',
name: 'Add Property', name: 'Add Property',
cb: () => addPropertyForm('', ''), cb: () => addPropertyForm('', ''),
}) });
.button({
form.button({
id: 'save', id: 'save',
name: this.id ? 'Save' : 'Add', name: 'Save',
type: 'submit', type: 'submit',
cb: ({ form: { value: formValue } }) => { cb: ({ form: { value: formValue } }) => {
let fullRedraw = false; let fullRedraw = false;
@ -111,15 +114,34 @@ export class Vertex {
} }
if (!vertex) { if (!vertex) {
// This was a new vertex. Now let's edit. // This was a new vertex. Now let's edit.
doc.clear();
Vertex.prepareEditorDocument(graph, doc, formValue.id); Vertex.prepareEditorDocument(graph, doc, formValue.id);
} }
}, },
}) });
.button({
if (vertex) {
doc.remark('<h3>New Edge</h3>', { parentEl: form.el });
const { subForm } = form.subForm({ name: 'newEdge' }).lastItem;
subForm.textField({ name: 'to' });
subForm.textField({ name: 'type' });
subForm.textField({ name: 'weight' });
subForm.button({
name: 'Save',
cb: ({ form: { value: { to, type, weight } } }) => {
graph.addEdge(type, vertex, to, weight, null);
doc.clear();
Edge.prepareEditorDocument(graph, doc, vertex.id, to);
},
});
}
form.button({
id: 'cancel', id: 'cancel',
name: 'Cancel', name: 'Cancel',
cb: () => graph.resetEditorDocument(), cb: () => graph.resetEditorDocument(),
}); });
return doc; return doc;
} }
} }

View File

@ -8,6 +8,7 @@ const makeWDGHandler = (graphIndex) => (vertexId) => {
const graph = allGraphs[graphIndex]; const graph = allGraphs[graphIndex];
// We want a document for editing this node, which may be a vertex or an edge // We want a document for editing this node, which may be a vertex or an edge
const { editorDoc } = graph; const { editorDoc } = graph;
editorDoc.clear();
if (vertexId.startsWith('edge:')) { if (vertexId.startsWith('edge:')) {
const [, from, to] = vertexId.split(':'); const [, from, to] = vertexId.split(':');
Edge.prepareEditorDocument(graph, editorDoc, from, to); Edge.prepareEditorDocument(graph, editorDoc, from, to);
@ -101,6 +102,7 @@ export class WeightedDirectedGraph {
} }
resetEditorDocument() { resetEditorDocument() {
this.editorDoc.clear();
Vertex.prepareEditorDocument(this, this.editorDoc); Vertex.prepareEditorDocument(this, this.editorDoc);
} }