From 897397c8993049acda6c26868b5aaf7756827379 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Tue, 23 Jul 2024 20:37:41 +0530
Subject: [PATCH] feat: move Highlighter to Canvas

---
 src/components/atoms/canvas.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index 7351621e..b0b779d8 100644
--- a/src/components/atoms/canvas.tsx
+++ b/src/components/atoms/canvas.tsx
@@ -4,6 +4,7 @@ import { getMappedCoordinates } from "../../helpers/inputHelpers";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { GenericModal } from '../atoms/GenericModal';
 import { Box, Button, Typography } from '@mui/material';
+import { Highlighter } from "../atoms/Highlighter"
 
 interface CreateRefCallback {
     (ref: React.RefObject<HTMLCanvasElement>): void;
@@ -157,6 +158,21 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
 
     return (
         <>
+        <canvas
+                tabIndex={0}
+                ref={canvasRef}
+                height={720}
+                width={1280}
+            />
+            {!showConfirmation && highlighterData && canvasRef.current && (
+                <Highlighter
+                    unmodifiedRect={highlighterData.rect}
+                    displayedSelector={highlighterData.selector}
+                    width={width}
+                    height={height}
+                    canvasRect={canvasRef.current.getBoundingClientRect()}
+                />
+            )}
             <GenericModal
                 isOpen={showConfirmation}
                 onClose={() => setShowConfirmation(false)}
@@ -168,12 +184,6 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
                     onNo={() => handleConfirmation(false)}
                 />
             </GenericModal>
-            <canvas
-                tabIndex={0}
-                ref={canvasRef}
-                height={720}
-                width={1280}
-            />
         </>
     );
 };