From d832797fdfa644fcb8c8baf7c1fa19159e1c4ed5 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Fri, 14 Jun 2024 22:29:41 +0530
Subject: [PATCH] feat: map rect

---
 src/helpers/inputHelpers.ts | 70 +++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/helpers/inputHelpers.ts b/src/helpers/inputHelpers.ts
index 0d3d39b0..9fb3b5ca 100644
--- a/src/helpers/inputHelpers.ts
+++ b/src/helpers/inputHelpers.ts
@@ -53,3 +53,73 @@ const getCoordinates = (event: MouseEvent, canvas: HTMLCanvasElement | null): Co
   };
 };
 
+export const mapRect = (
+  rect: DOMRect,
+  browserWidth: number,
+  browserHeight: number,
+) => {
+  const mappedX = mapPixelFromSmallerToLarger(
+    browserWidth / 100,
+    ONE_PERCENT_OF_VIEWPORT_W,
+    rect.x,
+  );
+  const mappedLeft = mapPixelFromSmallerToLarger(
+    browserWidth / 100,
+    ONE_PERCENT_OF_VIEWPORT_W,
+    rect.left,
+  );
+  const mappedRight = mapPixelFromSmallerToLarger(
+    browserWidth / 100,
+    ONE_PERCENT_OF_VIEWPORT_W,
+    rect.right,
+  );
+  const mappedWidth = mapPixelFromSmallerToLarger(
+    browserWidth / 100,
+    ONE_PERCENT_OF_VIEWPORT_W,
+    rect.width,
+  );
+  const mappedY = mapPixelFromSmallerToLarger(
+    browserHeight / 100,
+    ONE_PERCENT_OF_VIEWPORT_H,
+    rect.y,
+  );
+  const mappedTop = mapPixelFromSmallerToLarger(
+    browserHeight / 100,
+    ONE_PERCENT_OF_VIEWPORT_H,
+    rect.top,
+  );
+  const mappedBottom = mapPixelFromSmallerToLarger(
+    browserHeight / 100,
+    ONE_PERCENT_OF_VIEWPORT_H,
+    rect.bottom,
+  );
+  const mappedHeight = mapPixelFromSmallerToLarger(
+    browserHeight / 100,
+    ONE_PERCENT_OF_VIEWPORT_H,
+    rect.height,
+  );
+
+  console.log('Mapped:', {
+    x: mappedX,
+    y: mappedY,
+    width: mappedWidth,
+    height: mappedHeight,
+    top: mappedTop,
+    right: mappedRight,
+    bottom: mappedBottom,
+    left: mappedLeft,
+  })
+
+  return {
+    x: mappedX,
+    y: mappedY,
+    width: mappedWidth,
+    height: mappedHeight,
+    top: mappedTop,
+    right: mappedRight,
+    bottom: mappedBottom,
+    left: mappedLeft,
+  };
+};
+
+