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) {
doc.clear();
const form = doc.form({ name: 'editorForm' }).lastElement;
doc.remark('<h3>Edit Edge</h3>', { parentEl: form.el });
form

View File

@ -1,5 +1,7 @@
import { displayNumber } from '../../util/helpers.js';
import { Edge } from './edge.js';
export class Vertex {
constructor(graph, type, id, data, options = {}) {
this.graph = graph;
@ -88,38 +90,58 @@ export class Vertex {
id: 'add',
name: 'Add Property',
cb: () => addPropertyForm('', ''),
})
.button({
id: 'save',
name: this.id ? 'Save' : 'Add',
type: 'submit',
cb: ({ form: { value: formValue } }) => {
let fullRedraw = false;
if (vertex && formValue.id !== vertex.id) {
fullRedraw = true;
}
// TODO: preserve data types of properties
formValue.properties = new Map(formValue.properties.map(({ key, value }) => [key, value]));
if (vertex) {
Object.assign(vertex, formValue);
vertex.displayVertex();
} else {
graph.addVertex(formValue.type, formValue.id, null, formValue.label);
}
if (fullRedraw) {
graph.redraw();
}
if (!vertex) {
// This was a new vertex. Now let's edit.
Vertex.prepareEditorDocument(graph, doc, formValue.id);
}
});
form.button({
id: 'save',
name: 'Save',
type: 'submit',
cb: ({ form: { value: formValue } }) => {
let fullRedraw = false;
if (vertex && formValue.id !== vertex.id) {
fullRedraw = true;
}
// TODO: preserve data types of properties
formValue.properties = new Map(formValue.properties.map(({ key, value }) => [key, value]));
if (vertex) {
Object.assign(vertex, formValue);
vertex.displayVertex();
} else {
graph.addVertex(formValue.type, formValue.id, null, formValue.label);
}
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) {
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);
},
})
.button({
id: 'cancel',
name: 'Cancel',
cb: () => graph.resetEditorDocument(),
});
}
form.button({
id: 'cancel',
name: 'Cancel',
cb: () => graph.resetEditorDocument(),
});
return doc;
}
}

View File

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