From f57eaec9273f03204be4cdf68b33341e8f2b89aa Mon Sep 17 00:00:00 2001
From: Srujan Gurram <srujangs8@gmail.com>
Date: Sun, 26 Nov 2023 11:59:09 +0530
Subject: [PATCH] Added snipping tool logic and hooked it to listners

---
 src/lib/getScreenshotImage.ts | 57 +++++++++++++++++++++++++++++++++++
 src/pages/content/sidebar.tsx | 18 ++++++++++-
 2 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/getScreenshotImage.ts

diff --git a/src/lib/getScreenshotImage.ts b/src/lib/getScreenshotImage.ts
new file mode 100644
index 00000000..37420b97
--- /dev/null
+++ b/src/lib/getScreenshotImage.ts
@@ -0,0 +1,57 @@
+/**
+ * We use this function to
+ * 1. Create a snipping tool view for the user to select the area of the screen
+ * 2. Grab the screen image with canvas
+ * 3. Crop the image with the user's selection
+ * 4. Return the cropped image as a blob
+ */
+export const getScreenshotImage = async () => {
+  // Create a snipping tool view for the user to select the area of the screen
+  const snippingTool = document.createElement('div')
+  snippingTool.style.position = 'fixed'
+  snippingTool.style.top = '0'
+  snippingTool.style.left = '0'
+  snippingTool.style.width = '100vw'
+  snippingTool.style.height = '100vh'
+  snippingTool.style.zIndex = '999'
+  snippingTool.style.background = 'rgba(0, 0, 0, 0.5)'
+  snippingTool.style.cursor = 'crosshair'
+  document.body.appendChild(snippingTool)
+
+  // Grab the screen image with canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    throw new Error('Could not get canvas context')
+  }
+
+  // Crop the image with the user's selection
+  await new Promise((resolve) => {
+    snippingTool.addEventListener('mousedown', (e) => {
+      const startX = e.clientX
+      const startY = e.clientY
+      snippingTool.addEventListener('mouseup', (e) => {
+        const endX = e.clientX
+        const endY = e.clientY
+        const width = endX - startX
+        const height = endY - startY
+        const imageData = ctx.getImageData(startX, startY, width, height)
+        ctx.putImageData(imageData, 0, 0)
+        resolve(null)
+      })
+    })
+  })
+
+  // Return the cropped image as a blob
+  const blob = await new Promise<Blob | null>((resolve) => {
+    canvas.toBlob((blob) => {
+      resolve(blob)
+    })
+  })
+  if (!blob) {
+    throw new Error('Could not get blob')
+  }
+  return blob
+}
diff --git a/src/pages/content/sidebar.tsx b/src/pages/content/sidebar.tsx
index 53525c3a..16b457ac 100644
--- a/src/pages/content/sidebar.tsx
+++ b/src/pages/content/sidebar.tsx
@@ -1,3 +1,4 @@
+import { getScreenshotImage } from '../../lib/getScreenShotImage'
 import { contentScriptLog } from '../../logs'
 
 contentScriptLog('Sidebar')
@@ -39,9 +40,10 @@ chrome.runtime.onMessage.addListener(function (msg) {
  * To get the page content, the sidebar sends a message with the action 'get-page-content'.
  * The page content is sent back to the sidebar by posting a message with the action 'get-page-content'.
  */
-window.addEventListener('message', (event) => {
+window.addEventListener('message', async (event) => {
   const { action, _payload } = event.data as { action: string; _payload: any }
 
+  // ACTION: get-page-content ==============================
   if (action === 'get-page-content') {
     console.log('get-page-content Triggered')
     const pageContent = document.body.innerText
@@ -53,4 +55,18 @@ window.addEventListener('message', (event) => {
       '*',
     )
   }
+
+  // ACTION: get-screenshot-image ===========================
+  if (action === 'get-screenshot-image') {
+    iframe.style.width = '0px'
+    const image = await getScreenshotImage()
+    iframe.style.width = '400px'
+    iframe.contentWindow?.postMessage(
+      {
+        action: 'get-screenshot-image',
+        image,
+      },
+      '*',
+    )
+  }
 })