Update playwright_model.py

playwright_model.py

@@ -17,22 +17,19 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         print(f"Opening page: {public_url}")
         await page.goto(public_url, wait_until="load")
 
-        # ✅ Improved sidebar stability detector
+        # ✅ Sidebar stability detector (same as before)
         async def wait_for_sidebar_stable():
             try:
                 await page.evaluate("""
                     (async () => {
                         const sidebar = document.querySelector('aside, .sidebar, nav');
                         if (!sidebar) return;
-
                         function getLeft() {
                             const rect = sidebar.getBoundingClientRect();
                             return rect.left;
                         }
-
                         let stableCount = 0;
                         let lastLeft = getLeft();
-
                         await new Promise((resolve) => {
                             const check = setInterval(() => {
                                 const currentLeft = getLeft();
@@ -53,7 +50,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             except Exception as e:
                 print(f"[WARN] Sidebar stability check failed: {e}")
 
-        # ✅ Inject workflow traversal + sub-screen logic
+        # ✅ JS logic to map workflows + subscreens
         js_logic = """
         (function(){
           const menus=[...document.querySelectorAll('.menu-item')];
@@ -73,8 +70,6 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
           window.__visitedWorkflows=[];
           window.__currentIndex=0;
           window.__done=false;
-
-          // helper: get all visible sub-screen tabs dynamically
           window.__getSubScreens = function(screen){
             const tabs=[...screen.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
             const list=[];
@@ -84,7 +79,6 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             }
             return list;
           };
-
           window.__captureNext=async function(){
             if(window.__done) return false;
             if(window.__currentIndex>=window.__ordered.length){window.__done=true;return false;}
@@ -106,8 +100,6 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             const subs = window.__getSubScreens(screen);
             return {screenName:wfName, subScreens:subs};
           };
-
-          // click sub-screen tab by text
           window.__clickSubScreen = async function(name){
             const tabs=[...document.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
             const t=tabs.find(x=>x.textContent.trim()===name);
@@ -122,7 +114,41 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         screenshots = []
         index = 0
 
-        # ✅ Loop through each workflow
+        # ✅ Helper: Expand layout (simulate your frontend JS logic)
+        async def expand_layout_for_capture():
+            await page.evaluate("""
+                const body = document.body;
+                const html = document.documentElement;
+                body.dataset.originalOverflow = body.style.overflow;
+                html.dataset.originalWidth = html.style.width;
+                html.dataset.originalHeight = html.style.height;
+
+                const fullWidth = Math.max(
+                    body.scrollWidth,
+                    html.scrollWidth,
+                    document.documentElement.offsetWidth
+                );
+                const fullHeight = Math.max(
+                    body.scrollHeight,
+                    html.scrollHeight,
+                    document.documentElement.offsetHeight
+                );
+
+                body.style.overflow = 'visible';
+                html.style.width = fullWidth + 'px';
+                html.style.height = fullHeight + 'px';
+            """)
+
+        async def restore_layout_after_capture():
+            await page.evaluate("""
+                const body = document.body;
+                const html = document.documentElement;
+                if (body.dataset.originalOverflow) body.style.overflow = body.dataset.originalOverflow;
+                if (html.dataset.originalWidth) html.style.width = html.dataset.originalWidth;
+                if (html.dataset.originalHeight) html.style.height = html.dataset.originalHeight;
+            """)
+
+        # ✅ Capture all workflows and subscreens
         while True:
             result = await page.evaluate("window.__captureNext()")
             if not result:
@@ -133,7 +159,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             screenshot_path = os.path.join(OUTPUT_DIR, f"{screen_name}.png")
             print(f"📸 Capturing main screen: {screen_name}")
 
-            # Update visible + browser tab title dynamically
+            # Update page title dynamically
             await page.evaluate(
                 """(name) => {
                     const titleEl = document.querySelector('.page-title, .header-title, main h2');
@@ -143,17 +169,19 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                 screen_name
             )
 
-            # ✅ Wait until sidebar (if any) has finished sliding
             await wait_for_sidebar_stable()
-
             await asyncio.sleep(1.2)
+
+            # ✅ NEW: Expand layout for correct sidebar alignment
+            await expand_layout_for_capture()
             await page.screenshot(path=screenshot_path, full_page=True)
+            await restore_layout_after_capture()
+
             screenshots.append(screenshot_path)
 
-            # ✅ Capture sub-screens dynamically (skip first active one)
+            # ✅ Capture sub-screens dynamically
             first_active_skipped = False
             for sub in sub_screens:
-                # Check if this sub tab is already active
                 is_active = await page.evaluate(
                     """(subText) => {
                         const tabs=[...document.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
@@ -167,19 +195,16 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
 
                 if is_active and not first_active_skipped:
                     first_active_skipped = True
-                    continue  # skip first active sub-screen
+                    continue
 
                 print(f"   ↳ Capturing sub-screen: {sub}")
                 await page.evaluate(f"window.__clickSubScreen('{sub}')")
-
-                # ✅ Wait until sidebar (if any) is stable again
                 await wait_for_sidebar_stable()
                 await asyncio.sleep(1.0)
 
                 sub_name_clean = sub.replace(" ", "_").lower()
                 sub_path = os.path.join(OUTPUT_DIR, f"{screen_name}_{sub_name_clean}.png")
 
-                # Update tab title for sub-screen
                 await page.evaluate(
                     """([mainName, subName]) => {
                         const titleEl = document.querySelector('.page-title, .header-title, main h2');
@@ -190,14 +215,18 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                     [screen_name, sub]
                 )
 
+                # ✅ NEW: Apply same layout-expansion logic
+                await expand_layout_for_capture()
                 await page.screenshot(path=sub_path, full_page=True)
+                await restore_layout_after_capture()
+
                 screenshots.append(sub_path)
 
             index += 1
 
         await browser.close()
 
-        # ✅ Combine all screenshots into PDF
+        # ✅ Combine screenshots into PDF
         if not screenshots:
             raise RuntimeError("No screenshots captured — check if .screen elements exist!")