Added color wheel

features.txt

@@ -1,5 +1,5 @@
-1) Ctrl + Z to undo last edit, Ctrl + Shift + Z to redo last edit
-2) Colour wheel option for pencil
+1) Ctrl + Z to undo last edit, Ctrl + Shift + Z to redo last edit [DONE]
+2) Colour wheel option for pencil [DONE]
 3) Vertical scrolling is sorted, horizontal scrolling needs to be checked  [DONE]
 4) Enable drawing only when mouse is clicked. If i want to move around the canvas, I can press middle mouse button to do so. [DONE]
 5) Clear button [DONE]

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@melloware/coloris": "^0.24.0",
     "lucide-react": "^0.469.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/components/DrawingApp.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Pencil, Eraser, Move } from 'lucide-react';
+import { Pencil, Eraser, Move, Trash2, Undo2, Redo2 } from 'lucide-react';
 
 const CANVAS_SIZE = 2000;
 
@@ -266,7 +266,7 @@ const DrawingApp = () => {
     if (touchMode === 'pan') return 'cursor-grab';
     return 'cursor-crosshair';
   };
-
+  
    return (
     <div className="fixed inset-0 w-screen h-screen overflow-hidden bg-gray-100">
       <div className="fixed top-4 left-4 bg-white rounded-lg shadow-lg p-2 flex gap-2 z-50">
@@ -306,17 +306,38 @@ const DrawingApp = () => {
                   }}
                 />
               ))}
+              <div className="w-8 h-8 rounded color-picker" title={`Selected color: ${color}`} onClick={()=> document.getElementById('hidden-color-picker').click()}>
+                <input className="w-8 h-8 rounded" onChange={(e)=>{
+                  setColor(e.target.value)
+                  setTool('pencil')
+                }} type="color" id="hidden-color-picker" style={{position: 'absolute ', opacity: '0', pointerEvents: 'none'}} ></input>
+              </div>       
             </div>
           </>
         )}
-
         <div className="w-px h-8 bg-gray-200 mx-2" />
-        <button 
-          className="p-2 rounded hover:bg-blue-50"
-          onClick={clearCanvas}
-        >
-          Clear
+        <button
+              className={`p-2 rounded hover:bg-blue-50`}
+              onClick={clearCanvas}
+              title={"Clear canvas"}
+            >
+              <Trash2 className="w-4 h-4" />
+        </button>
+        <button
+              className={`p-2 rounded hover:bg-blue-50`}
+              onClick={handleUndo}
+              title={"Undo"}
+            >
+              <Undo2 className="w-4 h-4" />
+        </button>
+        <button
+              className={`p-2 rounded hover:bg-blue-50 `}
+              onClick={handleRedo}
+              title={"Redo"}
+            >
+              <Redo2 className="w-4 h-4" />
         </button>
+        <div className="w-px h-8 bg-gray-200 mx-2" />
       </div>
 
       <div

src/index.css

@@ -2,6 +2,26 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
-    overscroll-behavior: contain;
-}
+body {
+  overscroll-behavior: contain;
+}
+
+.color-picker {
+  appearance: none;
+  -webkit-appearance: none;
+  border: none;
+  border-radius: 50%;
+  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+}
+
+.color-picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-picker::-webkit-color-swatch {
+  border: none;
+  border-radius: 50%;
+}

src/main.jsx

@@ -2,6 +2,10 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import "@melloware/coloris/dist/coloris.css";
+import { coloris, init } from "@melloware/coloris";
+init();
+coloris({el: "#coloris"});
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>