Able to add new vertices and edges

forum-network/src/classes/supporting/edge.js

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

forum-network/src/classes/supporting/vertex.js

@@ -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,10 +90,11 @@ export class Vertex {
       id: 'add',
       name: 'Add Property',
       cb: () => addPropertyForm('', ''),
-    })
-      .button({
+    });
+
+    form.button({
       id: 'save',
-        name: this.id ? 'Save' : 'Add',
+      name: 'Save',
       type: 'submit',
       cb: ({ form: { value: formValue } }) => {
         let fullRedraw = false;
@@ -111,15 +114,34 @@ export class Vertex {
         }
         if (!vertex) {
           // This was a new vertex. Now let's edit.
+          doc.clear();
           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',
       name: 'Cancel',
       cb: () => graph.resetEditorDocument(),
     });
+
     return doc;
   }
 }

forum-network/src/classes/supporting/wdg.js

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