From 3d67408158a61cff635c50b0372d65b73b1942b6 Mon Sep 17 00:00:00 2001
From: Supreme2580 <victoromorogbe69@gmail.com>
Date: Mon, 16 Dec 2024 16:32:17 +0100
Subject: [PATCH] added overlay

---
 frontend/src/canvas/TemplateOverlay.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/canvas/TemplateOverlay.js b/frontend/src/canvas/TemplateOverlay.js
index 7f0bcb82..9e237c35 100644
--- a/frontend/src/canvas/TemplateOverlay.js
+++ b/frontend/src/canvas/TemplateOverlay.js
@@ -4,15 +4,16 @@ import './TemplateOverlay.css';
 const TemplateOverlay = (props) => {
   const [posx, setPosx] = React.useState(0);
   const [posy, setPosy] = React.useState(0);
-  
+
   useEffect(() => {
-    // Calculate position relative to canvas dimensions
-    const x = props.overlayTemplate.position % props.width;
-    const y = Math.floor(props.overlayTemplate.position / props.width);
-    
-    setPosx(x);
-    setPosy(y);
-  }, [props.overlayTemplate, props.width]);
+    // Calculate position relative to fixed canvas dimensions (518x396)
+    const x = props.overlayTemplate.position % 518;
+    const y = Math.floor(props.overlayTemplate.position / 518);
+
+    // Apply canvas scale to position
+    setPosx(x * props.canvasScale);
+    setPosy(y * props.canvasScale);
+  }, [props.overlayTemplate, props.canvasScale]);
 
   const [templateOutline, setTemplateOutline] = React.useState('none');
   useEffect(() => {
@@ -34,8 +35,6 @@ const TemplateOverlay = (props) => {
         top: `${posy}px`,
         width: props.overlayTemplate.width * props.canvasScale,
         height: props.overlayTemplate.height * props.canvasScale,
-        transform: `scale(${props.canvasScale})`,
-        transformOrigin: '0 0',
         pointerEvents: 'none',
         display: 'block',
         outline: templateOutline