From 2dc59daeef220b581aadbf3e0cf9c4868eeb4c54 Mon Sep 17 00:00:00 2001
From: sauravniraula <developmentsaurav@gmail.com>
Date: Sun, 20 Jul 2025 18:48:44 +0545
Subject: [PATCH] feat(nextjs): adds logic that hides all other elements to
 take screenshot of svg, tables and canvas

---
 .../api/presentation_to_pptx_model/route.ts   | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/servers/nextjs/app/api/presentation_to_pptx_model/route.ts b/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
index 704bdf46..5ae94572 100644
--- a/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
+++ b/servers/nextjs/app/api/presentation_to_pptx_model/route.ts
@@ -118,12 +118,46 @@ async function postProcessSlidesAttributes(slidesAttributes: SlideAttributesResu
 }
 
 async function screenshotElement(element: ElementAttributes, screenshotsDir: string) {
-  console.log('Taking screenshot of', element.tagName);
   const screenshotPath = path.join(screenshotsDir, `${uuidv4()}.png`) as `${string}.png`;
+
+  // Hide all elements except the target element and its ancestors
+  await element.element?.evaluate((el) => {
+    const originalDisplays = new Map();
+
+    const hideAllExcept = (targetElement: Element) => {
+      const allElements = document.querySelectorAll('*');
+
+      allElements.forEach((elem) => {
+        if (targetElement === elem || targetElement.contains(elem) || elem.contains(targetElement)) {
+          return;
+        }
+
+        const computedStyle = window.getComputedStyle(elem);
+        originalDisplays.set(elem, computedStyle.display);
+        (elem as HTMLElement).style.display = 'none';
+      });
+    };
+
+    hideAllExcept(el);
+
+    (el as any).__restoreDisplays = () => {
+      originalDisplays.forEach((display, elem) => {
+        (elem as HTMLElement).style.display = display;
+      });
+    };
+  });
+
   const screenshot = await element.element?.screenshot({ path: screenshotPath });
   if (!screenshot) {
     throw new ApiError("Failed to screenshot element");
   }
+
+  await element.element?.evaluate((el) => {
+    if ((el as any).__restoreDisplays) {
+      (el as any).__restoreDisplays();
+    }
+  });
+
   return screenshotPath;
 }