Fix ColorHandler to adjust to pickr

README.md

@@ -62,4 +62,4 @@ Canvas leverages the following technologies:
   - Introduce a dotted brush option.
 
 - **Thursday Morning:**
-  - Bonus: Rewrite this proposal as a production README.
+  - Rewrite this proposal as a production README.

index.html

@@ -4,6 +4,10 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <!-- pickr -->
+  <script src="https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/pickr.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/[email protected]/dist/themes/classic.min.css" />
+
   <link rel="stylesheet" href="./dist/main.css" />
   <script src="./dist/main.js" defer></script>
   <title>Canvas</title>
@@ -32,9 +36,8 @@ <h1>Canvas</h1>
     <button id="undo"><img src="assets/menu icons/undo-btn.png" alt=""></button>
     <button id="redo"><img src="assets/menu icons/redo-btn.png" alt=""></button>
     <!-- color -->
-    <input type="color" id="color-picker" value="#FFFFFF">
-    <input type="color" id="background-color-picker" value="#FFFFFF">
-    <label for="background-color-picker">Bg Color</label>
+    <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>

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
+    "@simonwep/pickr": "^1.9.0",
     "babel-loader": "^9.1.3",
     "core-js": "^3.33.0",
     "css-loader": "^6.8.1",

src/index.js

@@ -2,14 +2,6 @@ import CanvasHandler from "./scripts/canvasHandler";
 import ToolIcon from "./scripts/toolIcon";
 
 document.addEventListener("DOMContentLoaded", () => {
-  new CanvasHandler();
+  const canvasHandler = new CanvasHandler();
   new ToolIcon();
 });
-
-
-
-
-
-
-
-

src/scripts/colorHandler.js

@@ -1,37 +1,33 @@
+import Pickr from "@simonwep/pickr";
+
 class ColorHandler {
   constructor(canvasHandler) {
-    this.canvasHandler = canvasHandler
-    this.setupColorHandling()
+    this.canvasHandler = canvasHandler;
+    this.setupColorPicker();
+    this.setupColorHandling();
+  }
+
+  setupColorPicker () {
+    this.brushColorPicker = Pickr.create({
+      el: "#color-picker",
+      theme: "classic",
+      default: "#ECD1E2",
+      components: {
+        preview: true,
+        hue: true,
+      },
+    });
+    // have the color picker be open immediately
+    this.brushColorPicker.show();
   }
 
   setupColorHandling() {
     this.currentColor = "black";
-
-    // if a brush color has been selected..
-    this.brushColorPicker = document.getElementById("color-picker");
-    this.brushColorPicker.addEventListener("input", () => {
-      this.currentColor = this.brushColorPicker.value;
+    // color change event for brush color
+    this.brushColorPicker.on("change", (color) => {
+      this.currentColor = color.toHEXA().toString()
     });
-
-    // if a bg color has been selected..
-    this.bgColorPicker = document.getElementById("background-color-picker");
-
-    // for erase action
-    this.bgColorPicker.addEventListener(
-      "input",
-      () => {
-        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;
-        this.canvasHandler.undoAndRedoHandler.drawnPaths.forEach((path) =>
-          this.canvasHandler.undoAndRedoHandler.redrawPath(path)
-        );
-        this.canvasHandler.canvas.style.backgroundColor = this.bgColorPicker.value;
-      }
-    );
   }
 }
 
-export default ColorHandler
+export default ColorHandler;

src/styles/menu.scss

@@ -28,8 +28,8 @@ button:hover {
   transition: 0.5s;
   background-color: black;
 }
-
-// colors
+ 
+// TEMP colors
 input[type="color"] {
   height: 40px;
   width: 40px;