From ebd34c186a91b0491209ea9c1e292633d8abdb31 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Mon, 27 Sep 2021 20:04:21 +0200
Subject: [PATCH] [mirotalksfu] - whiteboard :: add eraser

---
 public/Room.html  |  1 +
 public/js/Room.js | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/public/Room.html b/public/Room.html
index 6a17ba5..6e773ae 100644
--- a/public/Room.html
+++ b/public/Room.html
@@ -199,6 +199,7 @@ access to use this app.
                     <button id="whiteboardRectBtn" class="far fa-square"></button>
                     <button id="whiteboardCircleBtn" class="far fa-circle"></button>
                     <button id="whiteboardSaveBtn" class="fas fa-save"></button>
+                    <button id="whiteboardEraserBtn" class="fas fa-eraser"></button>
                     <button id="whiteboardCleanBtn" class="fas fa-trash"></button>
                     <button id="whiteboardCloseBtn" class="fas fa-times"></button>
                 </div>
diff --git a/public/js/Room.js b/public/js/Room.js
index 0ce2071..072ef03 100644
--- a/public/js/Room.js
+++ b/public/js/Room.js
@@ -48,6 +48,7 @@ let wbCanvas = null;
 let wbIsDrawing = false;
 let wbIsOpen = false;
 let wbIsRedoing = false;
+let wbIsEraser = false;
 let wbPop = [];
 
 const socket = io();
@@ -76,6 +77,7 @@ function initClient() {
         setTippy('whiteboardRectBtn', 'Add rectangle', 'top');
         setTippy('whiteboardCircleBtn', 'Add circle', 'top');
         setTippy('whiteboardSaveBtn', 'Save', 'top');
+        setTippy('whiteboardEraserBtn', 'Eraser', 'top');
         setTippy('whiteboardCleanBtn', 'Clear', 'top');
         setTippy('whiteboardCloseBtn', 'Close', 'top');
         setTippy('participantsRefreshBtn', 'Refresh', 'top');
@@ -642,6 +644,9 @@ function handleButtons() {
     whiteboardCircleBtn.onclick = () => {
         whiteboardAddObj('circle');
     };
+    whiteboardEraserBtn.onclick = () => {
+        whiteboardIsEraser(true);
+    };
     whiteboardCleanBtn.onclick = () => {
         whiteboardAction(getWhiteboardAction('clear'));
     };
@@ -951,12 +956,20 @@ function whiteboardIsDrawingMode(b) {
     if (b) {
         whiteboardPencilBtn.style.color = 'green';
         whiteboardObjectBtn.style.color = 'white';
+        whiteboardEraserBtn.style.color = 'white';
+        wbIsEraser = false;
     } else {
         whiteboardPencilBtn.style.color = 'white';
         whiteboardObjectBtn.style.color = 'green';
     }
 }
 
+function whiteboardIsEraser(b) {
+    whiteboardIsDrawingMode(false);
+    wbIsEraser = b;
+    whiteboardEraserBtn.style.color = wbIsEraser ? 'green' : 'white';
+}
+
 function whiteboardAddObj(type) {
     switch (type) {
         case 'imgUrl':
@@ -1081,8 +1094,8 @@ function addWbCanvasObj(obj) {
 }
 
 function setupWhiteboardLocalListners() {
-    wbCanvas.on('mouse:down', function () {
-        mouseDown();
+    wbCanvas.on('mouse:down', function (e) {
+        mouseDown(e);
     });
     wbCanvas.on('mouse:up', function () {
         mouseUp();
@@ -1095,8 +1108,12 @@ function setupWhiteboardLocalListners() {
     });
 }
 
-function mouseDown() {
+function mouseDown(e) {
     wbIsDrawing = true;
+    if (wbIsEraser && e.target) {
+        wbCanvas.remove(e.target);
+        return;
+    }
 }
 
 function mouseUp() {
@@ -1105,6 +1122,10 @@ function mouseUp() {
 }
 
 function mouseMove() {
+    if (wbIsEraser) {
+        wbCanvas.hoverCursor = 'not-allowed';
+        return;
+    }
     if (!wbIsDrawing) return;
 }