From 291d3f265936b4e066fe9c05e63553caf11a222a Mon Sep 17 00:00:00 2001
From: ricafolio <29043464+ricafolio@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:32:18 +0800
Subject: [PATCH] feat: darker cell on hover

---
 src/components/Canvas/Canvas.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/Canvas/Canvas.tsx b/src/components/Canvas/Canvas.tsx
index 07a927b..7324be5 100644
--- a/src/components/Canvas/Canvas.tsx
+++ b/src/components/Canvas/Canvas.tsx
@@ -161,6 +161,20 @@ export default function Canvas() {
         clearSelectedImageAction()
       })
 
+      // On cell hover
+      canvas.on("mouse:over", (e) => {
+        e.target?.set("fill", `${e.target.fill}40`)
+        e.target?.set("backgroundColor", "#121212")
+        canvas.renderAll()
+      })
+
+      canvas.on("mouse:out", (e) => {
+        const fillColor = e.target?.fill as string
+        e.target?.set("fill", fillColor.substring(0, 7))
+        e.target?.set("backgroundColor", "")
+        canvas.renderAll()
+      })
+
       // 8. Clean up the canvas when the component unmounts
       return () => {
         canvas.dispose()