Add cancel buttons

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

@@ -99,25 +99,32 @@ export class Edge {
         if (initializing) return;
         addEdgeForm(new Edge(graph, null, graph.getVertex(from), graph.getVertex(to)));
       },
-    });
-
-    form.button({
-      id: 'save',
-      name: 'Save',
-      cb: ({ form: { value } }, { initializing }) => {
-        if (initializing) return;
-        // Handle additions and updates
-        for (const { type, weight } of value.edges) {
-          graph.setEdgeWeight(type, from, to, weight);
-        }
-        // Handle removals
-        for (const edge of graph.getEdges(null, from, to)) {
-          if (!value.edges.find(({ type }) => type === edge.type)) {
-            graph.deleteEdge(edge.type, from, to);
+    })
+      .button({
+        id: 'save',
+        name: 'Save',
+        cb: ({ form: { value } }, { initializing }) => {
+          if (initializing) return;
+          // Handle additions and updates
+          for (const { type, weight } of value.edges) {
+            graph.setEdgeWeight(type, from, to, weight);
           }
-        }
-        graph.redraw();
-      },
-    });
+          // Handle removals
+          for (const edge of graph.getEdges(null, from, to)) {
+            if (!value.edges.find(({ type }) => type === edge.type)) {
+              graph.deleteEdge(edge.type, from, to);
+            }
+          }
+          graph.redraw();
+        },
+      })
+      .button({
+        id: 'cancel',
+        name: 'Cancel',
+        cb: (_, { initializing }) => {
+          if (initializing) return;
+          doc.clear();
+        },
+      });
   }
 }

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

@@ -48,11 +48,10 @@ export class Vertex {
     const form = doc.form().lastElement;
     form
       .textField({
-        id: 'id', name: 'id', defaultValue: vertex.id, disabled: true,
+        id: 'id', name: 'id', defaultValue: vertex.id,
       })
       .textField({ id: 'type', name: 'type', defaultValue: vertex.type })
       .textField({ id: 'label', name: 'label', defaultValue: vertex.label })
-
       .button({
         id: 'save',
         name: 'Save',
@@ -69,9 +68,14 @@ export class Vertex {
           }
         },
       })
+      .button({
+        id: 'cancel',
+        name: 'Cancel',
+        cb: (_, { initializing }) => {
+          if (initializing) return;
+          doc.clear();
         },
       });
-
     return doc;
   }
 }