Made some changes to improve user experience. Read the comment for more.

index.html

@@ -89,7 +89,7 @@ <h6>This short tutorial will walk you through all of the features of this applic
         </ul>
       </div>
       <div id="algorithmDescriptor">Pick an algorithm and visualize it!</div>
-      <table id='board'/>
+      <table id='board' oncontextmenu="return false;"/>
     </div>
   </body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

public/browser/bundle.js

@@ -405,11 +405,12 @@ Board.prototype.addEventListeners = function() {
         e.preventDefault();
         if (this.buttonsOn) {
           board.mouseDown = true;
+          board.buttonType = e.button;
           if (currentNode.status === "start" || currentNode.status === "target" || currentNode.status === "object") {
             board.pressedNodeStatus = currentNode.status;
           } else {
             board.pressedNodeStatus = "normal";
-            board.changeNormalNode(currentNode);
+            board.changeNormalNode(currentNode,board.buttonType);
           }
         }
       }
@@ -447,7 +448,7 @@ Board.prototype.addEventListeners = function() {
               }
             }
           } else if (board.mouseDown) {
-            board.changeNormalNode(currentNode);
+            board.changeNormalNode(currentNode,board.buttonType);
           }
         }
       }
@@ -460,6 +461,17 @@ Board.prototype.addEventListeners = function() {
       }
     }
   }
+  const body = document.querySelector("body");
+  body.onmouseup = () => {
+    if(board.pressedNodeStatus === "normal"){
+      this.mouseDown = false
+    }
+  }
+  body.onmouseleave = () => {
+    if(board.pressedNodeStatus === "normal"){
+      this.mouseDown = false
+    }
+  }
 };
 
 Board.prototype.getNode = function(id) {
@@ -498,16 +510,24 @@ Board.prototype.changeSpecialNode = function(currentNode) {
   }
 };
 
-Board.prototype.changeNormalNode = function(currentNode) {
+Board.prototype.changeNormalNode = function(currentNode,buttonType) {
   let element = document.getElementById(currentNode.id);
   let relevantStatuses = ["start", "target", "object"];
   let unweightedAlgorithms = ["dfs", "bfs"]
   if (!this.keyDown) {
     if (!relevantStatuses.includes(currentNode.status)) {
-      element.className = currentNode.status !== "wall" ?
-        "wall" : "unvisited";
-      currentNode.status = element.className !== "wall" ?
-        "unvisited" : "wall";
+      if(currentNode.status !== "wall" && buttonType === 0){
+        element.className = "wall";
+      }
+      else if(currentNode.status === "wall" && buttonType === 2){
+        element.className = "unvisited";
+      }
+      if(element.className === "wall" && buttonType === 0){
+        currentNode.status = "wall";
+      }
+      else if(element.className !== "wall" && buttonType === 2){
+        currentNode.status = "unvisited";
+      }
       currentNode.weight = 0;
     }
   } else if (this.keyDown === 87 && !unweightedAlgorithms.includes(this.currentAlgorithm)) {