Implement basic erasing functionality

public/index.html

@@ -31,6 +31,8 @@
       Connected peers:
       <ul id="connected-peers"></ul>
     </div>
+    <button id="pen">Pen</button>
+    <button id="eraser">Eraser</button>
 
     <svg
       id="whiteboard"

src/app.js

@@ -29,6 +29,8 @@ Y({
   const peerIDElem = document.getElementById("peer-id")
   const peerButton = document.getElementById("peer-connect")
   const connectedP = document.getElementById("connected-peers")
+  const penButton = document.getElementById("pen")
+  const eraserButton = document.getElementById("eraser")
 
   userIDElem.value = y.db.userId
 
@@ -64,9 +66,29 @@ Y({
     peerIDElem.value = ""
   }
 
+  // Used to check what kind of tool is selected
+  var addingLine = true
+  var removingLine = false
+
+  penButton.onclick = function() {
+    // If pen tool selected
+    if (!addingLine) {
+      addingLine = true
+      removingLine = false
+    }
+  }
+
+  eraserButton.onclick = function() {
+    // If eraser tool selected
+    if (!removingLine) {
+      removingLine = true
+      addingLine = false
+    }
+  }
+
   const whiteboard = document.getElementById("whiteboard")
 
-  var painting = false
+  var input = false
   var paths = new Map()
   var pathID
 
@@ -104,22 +126,55 @@ Y({
     return path
   }
 
+  function removeOrUpdatePath(uid) {
+    var path = paths.get(uid)
+
+    if (path !== undefined) {
+      paths.delete(path)
+    }
+  }
+
   whiteboard.onmousedown = function(e) {
-    painting = true
+    input = true
 
     const mouse = {
       x: e.offsetX,
       y: e.offsetY,
     }
 
-    pathID = uuidv4()
-
-    const sharedPath = y.share.drawing.set(pathID, Y.Array)
-    sharedPath.push([[mouse.x, mouse.y]])
+    if (addingLine) {
+      pathID = uuidv4()
+      const sharedPath = y.share.drawing.set(pathID, Y.Array)
+      sharedPath.push([[mouse.x, mouse.y]])
+    } else if (removingLine) {
+      // Iterate over all the possible paths in the Map
+      const mapPaths = y.share.drawing.keys()
+      for (var mapPath of mapPaths) {
+        var found = false
+        // Get the array of coordinates
+        var mouseArray = y.share.drawing.get(mapPath).toArray()
+
+        // Check the array for current position
+        for (var i = 0; i < mouseArray.length; i++) {
+          var mouseMap = mouseArray[i]
+          if (mouseMap[0] == mouse.x && mouseMap[1] == mouse.y) {
+            // Delete coordinates from the array
+            mouseArray.delete(i)
+            // Update map
+            y.share.drawing.set(mapPath, mouseArray)
+            found = true
+            break
+          }
+        }
+        if (found) {
+          break
+        }
+      }
+    }
   }
 
   whiteboard.onmouseup = function() {
-    painting = false
+    input = false
   }
 
   whiteboard.onmousemove = function(e) {
@@ -128,9 +183,46 @@ Y({
       y: e.offsetY,
     }
 
-    if (painting) {
-      const sharedPath = y.share.drawing.get(pathID)
-      sharedPath.push([[mouse.x, mouse.y]])
+    if (input) {
+      if (addingLine) {
+        const sharedPath = y.share.drawing.get(pathID)
+        sharedPath.push([[mouse.x, mouse.y]])
+      } else if (removingLine) {
+        // Iterate over all the possible paths in the Map
+        const mapPaths = y.share.drawing.keys()
+        for (var mapPath of mapPaths) {
+          var found = false
+          // Get the array of coordinates
+          var mouseArray = y.share.drawing.get(mapPath).toArray()
+
+          // Check the array for current position
+          for (var i = 0; i < mouseArray.length; i++) {
+            var mouseMap = mouseArray[i]
+            if (mouseMap[0] == mouse.x && mouseMap[1] == mouse.y) {
+              console.log(
+                "mouseMap[0] (" +
+                  mouseMap[0] +
+                  ") == mouse.x (" +
+                  mouse.x +
+                  "mouseMap[1] (" +
+                  mouseMap[1] +
+                  ") == mouse.y (" +
+                  mouse.y +
+                  "y",
+              )
+              // Delete coordinates from the array
+              mouseArray.delete(i)
+              // Update map
+              y.share.drawing.set(mapPath, mouseArray)
+              found = true
+              break
+            }
+          }
+          if (found) {
+            break
+          }
+        }
+      }
     }
   }
 
@@ -149,6 +241,11 @@ Y({
           }
         })
 
+        break
+
+      case "delete":
+        removeOrUpdatePath(lineID)
+
         break
     }
   })