Fix bg & eraser to adjust to pickr

index.html

@@ -37,13 +37,15 @@ <h1>Canvas</h1>
     <button id="redo"><img src="assets/menu icons/redo-btn.png" alt=""></button>
     <!-- color -->
     <div id="color-picker" class="pickr"></div>
-    <!-- <input type="color" id="color-picker" value="#FFFFFF"> -->
     <!-- tools -->
     <input type="range" id="size-slider" min="1" max="30" value="5">
     <input type="radio" id="brush" name="tool" checked>
     <label for="brush" class="tool-icon"><img src="assets/tab-icon.png" alt=""></label>
+    <input type="radio" id="background-color-pickr" name="tool">
+    <label for="background-color-pickr" class="tool-icon"><img src="assets/menu icons/inactive-background-color.png"
+        alt=""></label>
     <input type="radio" id="eraser" name="tool">
-    <label for="eraser" class="tool-icon"><img src="assets/menu icons/not-active-eraser.png" alt=""></label>
+    <label for="eraser" class="tool-icon"><img src="assets/menu icons/inactive-eraser.png" alt=""></label>
     <!-- btns -->
     <button id="download"><img src="assets/menu icons/download-btn.png" alt=""></button>
   </div>

src/scripts/UndoAndRedoHandler.js

@@ -45,7 +45,7 @@ class UndoAndRedoHandler {
         this.canvasHandler.ctx.lineTo(point.x, point.y);
 
         // set brush styling based on point clr & brush size
-        if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColorPicker.value;
+        if (path.isErase) point.color = this.canvasHandler.colorHandler.bgColor;
         this.canvasHandler.brushHandler.setBrushStyling(point.color, point.brushSize);
 
         this.canvasHandler.ctx.stroke();

src/scripts/colorHandler.js

@@ -7,7 +7,7 @@ class ColorHandler {
     this.setupColorHandling();
   }
 
-  setupColorPicker () {
+  setupColorPicker() {
     this.brushColorPicker = Pickr.create({
       el: "#color-picker",
       theme: "classic",
@@ -23,11 +23,47 @@ class ColorHandler {
 
   setupColorHandling() {
     this.currentColor = "black";
+    this.bgColor = "#FFFFFF";
     // color change event for brush color
     this.brushColorPicker.on("change", (color) => {
-      this.currentColor = color.toHEXA().toString()
+      const selectedMode = this.getSelectedMode();
+      if (selectedMode === "background-color-pickr") {
+        this.bgColor = color.toHEXA().toString();
+        this.bgColorChange()
+      } else if (selectedMode === "brush") {
+        this.currentColor = color.toHEXA().toString();
+        this.canvasHandler.brushHandler.setBrushStyling(
+          color.toHEXA().toString()
+        );
+      } else if (selectedMode === "eraser") {
+        this.currentColor = color.toHEXA().toString();
+        this.canvasHandler.brushHandler.setBrushStyling(
+          color.toHEXA().toString()
+        );
+      }
     });
   }
+
+  bgColorChange() {
+    const drawnPaths = this.canvasHandler.undoAndRedoHandler.drawnPaths;
+    const redoStack = this.canvasHandler.undoAndRedoHandler.redoStack;
+    this.canvasHandler.eraseAndClearHandler.clear();
+    this.canvasHandler.undoAndRedoHandler.drawnPaths = drawnPaths;
+    this.canvasHandler.undoAndRedoHandler.redoStack = redoStack;
+    drawnPaths.forEach((path) =>
+      this.canvasHandler.undoAndRedoHandler.redrawPath(path)
+    );
+    this.canvasHandler.canvas.style.backgroundColor = this.bgColor;
+  }
+
+  getSelectedMode() {
+    const radioButtons = document.getElementsByName("tool");
+    for (const radioButton of radioButtons) {
+      if (radioButton.checked) {
+        return radioButton.id;
+      }
+    }
+  }
 }
 
 export default ColorHandler;

src/scripts/drawingHandler.js

@@ -53,7 +53,7 @@ class DrawingHandler {
 
     // Set brush styling based on whether eraser or brush is checked
     const color = this.canvasHandler.eraseAndClearHandler.eraserCheckbox.checked
-      ? this.canvasHandler.colorHandler.bgColorPicker.value
+      ? this.canvasHandler.colorHandler.bgColor
       : this.canvasHandler.colorHandler.currentColor;
 
     this.canvasHandler.brushHandler.setBrushStyling(

src/scripts/toolIcon.js

@@ -2,8 +2,12 @@ class ToolIcon {
   constructor() {
     this.brushRadio = document.getElementById("brush");
     this.eraserRadio = document.getElementById("eraser");
+    this.bgColorRadio = document.getElementById("background-color-pickr");
     this.brushLabel = document.querySelector('label[for="brush"]');
     this.eraserLabel = document.querySelector('label[for="eraser"]');
+    this.bgColorLabel = document.querySelector(
+      'label[for="background-color-pickr"]'
+    );
     this.detectChange();
     this.updateIcon();
   }
@@ -12,17 +16,22 @@ class ToolIcon {
     // update brush icon based on whether the brush is checked
     this.brushLabel.querySelector("img").src = this.brushRadio.checked
       ? "assets/tab-icon.png"
-      : "assets/menu icons/not-active-brush.png";
+      : "assets/menu icons/inactive-brush.png";
 
     // update eraser icon based on whether the eraser is checked
     this.eraserLabel.querySelector("img").src = this.eraserRadio.checked
       ? "assets/menu icons/active-eraser.png"
-      : "assets/menu icons/not-active-eraser.png";
+      : "assets/menu icons/inactive-eraser.png";
+
+    // update bg color icon based on whether the bg color is checked
+    this.bgColorLabel.querySelector("img").src = this.bgColorRadio.checked
+      ? "assets/menu icons/active-background-color.png"
+      : "assets/menu icons/inactive-background-color.png";
   }
 
   detectChange() {
     // update icon clr when tool is changed
-    [this.brushRadio, this.eraserRadio].forEach((radio) => {
+    [this.brushRadio, this.eraserRadio, this.bgColorRadio].forEach((radio) => {
       radio.addEventListener("change", () => this.updateIcon());
     });
   }