Update playwright_model.py

playwright_model.py

@@ -17,40 +17,70 @@ 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")
 
-        # ✅ Sidebar stability detector (same as before)
+        # ✅ Improved sidebar + layout stability detector
         async def wait_for_sidebar_stable():
             try:
                 await page.evaluate("""
                     (async () => {
                         const sidebar = document.querySelector('aside, .sidebar, nav');
                         if (!sidebar) return;
-                        function getLeft() {
+
+                        function getMetrics() {
                             const rect = sidebar.getBoundingClientRect();
-                            return rect.left;
+                            return { left: rect.left, width: rect.width };
                         }
+
                         let stableCount = 0;
-                        let lastLeft = getLeft();
+                        let last = getMetrics();
+
                         await new Promise((resolve) => {
                             const check = setInterval(() => {
-                                const currentLeft = getLeft();
-                                if (Math.abs(currentLeft - lastLeft) < 1) {
+                                const now = getMetrics();
+                                if (
+                                    Math.abs(now.left - last.left) < 0.5 &&
+                                    Math.abs(now.width - last.width) < 0.5
+                                ) {
                                     stableCount++;
-                                    if (stableCount >= 5) { // stable for ~750ms
+                                    if (stableCount >= 5) {
                                         clearInterval(check);
-                                        setTimeout(resolve, 500); // small safety delay
+                                        setTimeout(resolve, 400); // safety delay after motion stops
                                     }
                                 } else {
                                     stableCount = 0;
-                                    lastLeft = currentLeft;
+                                    last = now;
                                 }
-                            }, 150);
+                            }, 120);
                         });
                     })();
                 """)
             except Exception as e:
                 print(f"[WARN] Sidebar stability check failed: {e}")
 
-        # ✅ JS logic to map workflows + subscreens
+        # ✅ Wait for full layout to settle (scroll + reflows)
+        async def wait_for_layout_stable():
+            await page.evaluate("""
+                (async () => {
+                    let stableCount = 0;
+                    let lastHeight = document.body.scrollHeight;
+                    await new Promise((resolve) => {
+                        const check = setInterval(() => {
+                            const current = document.body.scrollHeight;
+                            if (Math.abs(current - lastHeight) < 1) {
+                                stableCount++;
+                                if (stableCount >= 5) {
+                                    clearInterval(check);
+                                    setTimeout(resolve, 300);
+                                }
+                            } else {
+                                stableCount = 0;
+                                lastHeight = current;
+                            }
+                        }, 100);
+                    });
+                })();
+            """)
+
+        # ✅ Inject workflow traversal + sub-screen logic
         js_logic = """
         (function(){
           const menus=[...document.querySelectorAll('.menu-item')];
@@ -70,6 +100,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
           window.__visitedWorkflows=[];
           window.__currentIndex=0;
           window.__done=false;
+
           window.__getSubScreens = function(screen){
             const tabs=[...screen.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
             const list=[];
@@ -79,6 +110,7 @@ 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;}
@@ -100,6 +132,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             const subs = window.__getSubScreens(screen);
             return {screenName:wfName, subScreens:subs};
           };
+
           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);
@@ -114,41 +147,7 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         screenshots = []
         index = 0
 
-        # ✅ 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
+        # ✅ Loop through each workflow
         while True:
             result = await page.evaluate("window.__captureNext()")
             if not result:
@@ -159,7 +158,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 page title dynamically
+            # Update visible + browser tab title dynamically
             await page.evaluate(
                 """(name) => {
                     const titleEl = document.querySelector('.page-title, .header-title, main h2');
@@ -169,17 +168,15 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                 screen_name
             )
 
+            # ✅ Wait for sidebar and layout to fully stabilize
             await wait_for_sidebar_stable()
-            await asyncio.sleep(1.2)
+            await wait_for_layout_stable()
+            await asyncio.sleep(1.0)
 
-            # ✅ 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
+            # ✅ Capture sub-screens dynamically (skip first active one)
             first_active_skipped = False
             for sub in sub_screens:
                 is_active = await page.evaluate(
@@ -199,7 +196,10 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
 
                 print(f"   ↳ Capturing sub-screen: {sub}")
                 await page.evaluate(f"window.__clickSubScreen('{sub}')")
+
+                # ✅ Wait until sidebar + layout stable again
                 await wait_for_sidebar_stable()
+                await wait_for_layout_stable()
                 await asyncio.sleep(1.0)
 
                 sub_name_clean = sub.replace(" ", "_").lower()
@@ -215,18 +215,14 @@ 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 screenshots into PDF
+        # ✅ Combine all screenshots into PDF
         if not screenshots:
             raise RuntimeError("No screenshots captured — check if .screen elements exist!")