diff --git a/index.html b/index.html index e13e84e..0617013 100644 --- a/index.html +++ b/index.html @@ -49,8 +49,11 @@ }, "" ); - socket.send(paths); - return false; + socket.send(JSON.stringify({ type: "drawings", paths: paths })); + + for (const path of document.querySelectorAll("#svgElement path")) { + path.remove(); + } }); diff --git a/public/draw.js b/public/draw.js index 932c666..cfbff0e 100644 --- a/public/draw.js +++ b/public/draw.js @@ -1,7 +1,7 @@ // Great resource from https://stackoverflow.com/a/40700068 // Thank you ConnorFan -var strokeWidth = 4; +var strokeWidth = 8; var bufferSize; var svgElement = document.getElementById("svgElement"); @@ -10,7 +10,7 @@ var path = null; var strPath; var buffer = []; // Contains the last positions of the mouse cursor -svgElement.addEventListener("mousedown", function (e) { +const startDrawing = (e) => { bufferSize = 8; path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("fill", "none"); @@ -22,26 +22,20 @@ svgElement.addEventListener("mousedown", function (e) { strPath = "M" + pt.x + " " + pt.y; path.setAttribute("d", strPath); svgElement.appendChild(path); -}); +}; -svgElement.addEventListener("mousemove", function (e) { +const draw = (e) => { if (path) { appendToBuffer(getMousePosition(e)); updateSvgPath(); } -}); - -svgElement.addEventListener("mouseup", function () { - if (path) { - path = null; - } -}); +}; -svgElement.addEventListener("mouseleave", function () { +const stopDrawing = () => { if (path) { path = null; } -}); +}; var getMousePosition = function (e) { return { @@ -98,3 +92,14 @@ var updateSvgPath = function () { path.setAttribute("d", strPath + tmpPath); } }; + +svgElement.addEventListener("mousedown", (e) => startDrawing(e)); +svgElement.addEventListener("touchstart", (e) => startDrawing(e)); + +svgElement.addEventListener("mousemove", (e) => draw(e)); +svgElement.addEventListener("touchmove", (e) => draw(e)); + +svgElement.addEventListener("mouseup", () => stopDrawing()); +svgElement.addEventListener("mouseleave", () => stopDrawing()); +svgElement.addEventListener("touchend", () => stopDrawing()); +svgElement.addEventListener("touchcancel", () => stopDrawing());