diff --git a/public/index.html b/public/index.html index 93b46cf3396ca7260137a69103236e1c3bce4e5c..27fb261049f824a9d5b36554cad399c35c59b644 100644 --- a/public/index.html +++ b/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" diff --git a/src/app.js b/src/app.js index 64511632345ffd9514f95ea1735c88a258c579f0..a07ab92ec7c61e87140490cb5e781ab79a83ca91 100644 --- a/src/app.js +++ b/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 } })