Add Clear-button and fix behavior when deleting nodes/edges

2 files changed, 20 insertions, 3 deletions

diff --git a/web/source/index.html b/web/source/index.html
index ee99f46..4200267 100644
--- a/web/source/index.html
+++ b/web/source/index.html
@@ -26,6 +26,7 @@
                 <input type="file" id="upload-score" >
                 <span>Load</span>
             </label>
+            <button id="clear-score">Clear</button>
         </div>
         <div id="edge-overlay" class="hidden dialog">
             <h2><span id="edge-operation"></span> edge</h2>
diff --git a/web/source/main.js b/web/source/main.js
index a2c7a0b..2e099b1 100644
--- a/web/source/main.js
+++ b/web/source/main.js
@@ -114,6 +114,8 @@ function collectGraphData(nodeDate, edgeData) {
 }
 
 function importGraphData(g) {
+    nodeData = new Map();
+    edgeData = new Map();
     var nodeSet = new vis.DataSet({});
     var edgeSet = new vis.DataSet({});
     for(let node of g.nodes) {
@@ -241,6 +243,18 @@ function genericEditEdge(data, callback) {
     document.getElementById('edge-cancel').onclick = discardEdge.bind(this, callback);
 }
 
+function deleteFromMap(data, callback) {
+    for(let node of data.nodes) {
+        nodeData = nodeData.delete(node);
+    }
+
+    for(let edge of data.edges) {
+        edgeData = edgeData.delete(edge);
+    }
+
+    callback(data);
+}
+
 
 function hideOverlay(id) {
     document.getElementById(id).classList.add('hidden');
@@ -361,8 +375,8 @@ function init() {
                     genericEditEdge(edgeData, callback);
                 }
             },
-            deleteNode: true,
-            deleteEdge: true,
+            deleteNode: deleteFromMap,
+            deleteEdge: deleteFromMap,
             controlNodeStyle: {
             }
         },
@@ -425,11 +439,13 @@ function init() {
             JSON.stringify(collectGraphData(nodeData, edgeData)));
 
     document.getElementById('upload-score').addEventListener('change',handleImport);
+    document.getElementById('clear-score').onclick = () =>
+        importGraphData({ nodes: [], edges: []});
 
     document.getElementById('show-starting-node').onclick = showStartingNode;
     document.getElementById('set-starting-node').onclick = setStartingNode;
 
-    window.setInterval(saveGraphToLocalStorage, 10000);
+    window.setInterval(saveGraphToLocalStorage, 5000);
 }
 
 document.addEventListener('DOMContentLoaded', () => init());