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

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