Added Customizations

vic-ene · Mar 30, 2021 · a76b8a5 · a76b8a5
1 parent a44e969
commit a76b8a5
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -44,6 +44,7 @@ <h4>Background</h4>
       <button id="deleteNodeButton">Delete Node</button>
       <button id="generateNodesButton">Generate Nodes</button>
       <button id="deleteAllButton">Delete All</button> 
+      <button id="saveButton">Save</button>
     </div>
   </div>
 
@@ -61,12 +62,14 @@ <h4>Background</h4>
       let height = canvasDiv.offsetHeight;
       var canvas;
 
-      var   deleteAllButton = document.querySelector('#deleteAllButton'),
-            deleteNodeButton = document.querySelector('#deleteNodeButton'),
+      var   addNodeButton = document.querySelector('#addNodeButton'),
             moveNodeButton = document.querySelector('#moveNodeButton'),
-            addNodeButton = document.querySelector('#addNodeButton'),
+            deleteNodeButton = document.querySelector('#deleteNodeButton'),
             generateNodesButton = document.querySelector('#generateNodesButton'),
-
+            deleteAllButton = document.querySelector('#deleteAllButton'),
+            saveButton = document.querySelector('#saveButton'),
+
+
             calculateButton = document.querySelector('#calculateButton'),
             speedSlider = document.querySelector('#speedSlider'), 
             speedSliderText = document.querySelector('#speedSliderText'),
@@ -75,8 +78,8 @@ <h4>Background</h4>
             strokeColorInput = document.querySelector('#strokeColorInput');
             nodeColorInput = document.querySelector('#nodeColorInput');
             backgroundColorInput = document.querySelector('#backgroundColorInput');
-
 
+
 
       var buttons = [];
       buttons.push(deleteAllButton);
@@ -94,11 +97,14 @@ <h4>Background</h4>
 
 
       // these methods are in nodesbuttons.js 
-      deleteAllButton.addEventListener('click', resetNodes)
-      generateNodesButton.addEventListener('click', generateRandomNodes)
       addNodeButton.addEventListener('click', switchButton);
       moveNodeButton.addEventListener('click', switchButton);
       deleteNodeButton.addEventListener('click', switchButton);
+      generateNodesButton.addEventListener('click', generateRandomNodes);
+      deleteAllButton.addEventListener('click', resetNodes);
+      saveButton.addEventListener('click', saveInfo);
+
+
 
       calculateButton.addEventListener('click', calculateDistanceMatrix);
       speedSlider.addEventListener('input', changeCalculationSpeed);
@@ -109,6 +115,11 @@ <h4>Background</h4>
       nodeColorInput.addEventListener('input', changeNodeColor);
       backgroundColorInput.addEventListener('input', changeBackgroundColor);
 
+
+      document.addEventListener('DOMContentLoaded', loadInfo);
+
+
+
     function windowResized(){
       width = canvasDiv.offsetWidth;
       height = canvasDiv.offsetHeight;

diff --git a/js/nodebuttons.js b/js/nodebuttons.js
@@ -67,54 +67,77 @@ function changeBackgroundColor(){
 
 
 function addNode(x ,y){
-    if(isActive(addNodeButton)){
-      nodes.push(new Node(x, y,  2 * Node.nodeRadius, nodes.length));
-      order.push(nodes.length - 1);
-      bestOrder = order.slice();
-    }
+  if(isActive(addNodeButton)){
+    nodes.push(new Node(x, y,  2 * Node.nodeRadius, nodes.length));
+    order.push(nodes.length - 1);
+    bestOrder = order.slice();
   }
-  
+}
 
 
-  function moveNode(index){
-    if(index == - 1) return;
-    if(isActive(moveNodeButton)){
-      nodes[index].move = true;
-    }
+
+function moveNode(index){
+  if(index == - 1) return;
+  if(isActive(moveNodeButton)){
+    nodes[index].move = true;
   }
+}
 
 
 
 
-  function deleteNode(index){
-    if(index == - 1) return;
-    if(isActive(deleteNodeButton)){
-      nodes.splice(index, 1);
-      order.splice(order.indexOf(index), 1);
-      nodeIndex = -1;
-      // reindex the rest
-      for(var i = index; i <  nodes.length; i ++ ){
-        nodes[i].id = i;
-      }
-      for(var i = 0; i < order.length; i ++){
-        if(order[i] >= index){
-          order[i]-= 1;
-        }
+function deleteNode(index){
+  if(index == - 1) return;
+  if(isActive(deleteNodeButton)){
+    nodes.splice(index, 1);
+    order.splice(order.indexOf(index), 1);
+    nodeIndex = -1;
+    // reindex the rest
+    for(var i = index; i <  nodes.length; i ++ ){
+      nodes[i].id = i;
+    }
+    for(var i = 0; i < order.length; i ++){
+      if(order[i] >= index){
+        order[i]-= 1;
       }
-      bestOrder = order.slice();
     }
+    bestOrder = order.slice();
   }
-  
+}
 
-  function generateRandomNodes(){ 
-    nodes = Node.generateRandomNodesArray(defaultNumberOfNodes);
-    changeNodesColor(nodes, strokeColor, nodeColor);
-    order = [];
-    for(var i = 0; i <  defaultNumberOfNodes; i ++){
-      order.push(i);
-    }
-    bestOrder = order.slice();
+
+function generateRandomNodes(){ 
+  nodes = Node.generateRandomNodesArray(defaultNumberOfNodes);
+  changeNodesColor(nodes, strokeColor, nodeColor);
+  order = [];
+  for(var i = 0; i <  defaultNumberOfNodes; i ++){
+    order.push(i);
   }
+  bestOrder = order.slice();
+}
+
+function saveInfo(){
+  localStorage.setItem('strokeColor', strokeColor);
+  localStorage.setItem('nodeColor', nodeColor);
+  localStorage.setItem('backgroundColor', backgroundColor);
+
+}
+
+
+function loadInfo(){
+    if(localStorage.getItem('strokeColor') !== null){
+      strokeColor = localStorage.getItem('strokeColor');
+      strokeColorInput.value = strokeColor;
+    }
+    if(localStorage.getItem('nodeColor') !== null){
+      nodeColor = localStorage.getItem('nodeColor');
+      nodeColorInput.value = nodeColor;
+    }
+    if(localStorage.getItem('backgroundColor') !== null){
+      backgroundColor = localStorage.getItem('backgroundColor');
+      backgroundColorInput.value = backgroundColor;
+    }
+}
 
 
 function resetNodes(){