@uxbertlabs/reportly 1.0.34 → 1.0.36

package/dist/index.esm.js

@@ -9324,36 +9324,60 @@ class Screenshot {
    * Wait for animations to complete and DOM to stabilize
    */
   async waitForStability() {
+    console.log("⏳ Waiting for page stability...");
     // Wait for initial stabilization
     await this.wait(this.captureDelay);
-    // Wait for images to load
+    // Wait for currently loading images (NO scrolling to avoid misalignment)
+    // The onclone callback will handle image src copying
     await this.waitForImages();
     // Wait for fonts to load
     await this.waitForFonts();
-    // Additional short wait for any final rendering
+    // Brief wait for final rendering
     await this.wait(100);
+    console.log("✅ Page stabilized and ready for capture");
   }
   /**
-   * Wait for all images to finish loading
+   * Wait for visible images to finish loading (no page scrolling to avoid annotation misalignment)
    */
   async waitForImages() {
     const images = Array.from(document.images);
-    const imagePromises = images.map(img => {
-      if (img.complete) {
-        return Promise.resolve();
-      }
+    // Filter to only images that are currently loading
+    const loadingImages = images.filter(img => !img.complete || img.naturalHeight === 0);
+    if (loadingImages.length === 0) {
+      console.log("✅ All visible images already loaded");
+      return;
+    }
+    console.log(`⏳ Waiting for ${loadingImages.length} loading images...`);
+    const imagePromises = loadingImages.map(img => {
       return new Promise(resolve => {
-        img.addEventListener("load", () => resolve(), {
+        if (img.complete && img.naturalHeight !== 0) {
+          resolve();
+          return;
+        }
+        const onLoad = () => {
+          console.log(`✅ Image loaded`);
+          resolve();
+        };
+        const onError = () => {
+          console.warn(`❌ Image failed to load`);
+          resolve(); // Still resolve to not block
+        };
+        const onTimeout = () => {
+          console.warn(`⏰ Image timed out after 2s`);
+          resolve();
+        };
+        img.addEventListener("load", onLoad, {
           once: true
         });
-        img.addEventListener("error", () => resolve(), {
+        img.addEventListener("error", onError, {
           once: true
         });
-        // Timeout after 3 seconds for slow images
-        setTimeout(() => resolve(), 3000);
+        // Shorter timeout - 2 seconds max
+        setTimeout(onTimeout, 2000);
       });
     });
     await Promise.all(imagePromises);
+    console.log(`✅ All ${loadingImages.length} images processed`);
   }
   /**
    * Wait for fonts to load
@@ -9414,7 +9438,8 @@ class Screenshot {
           y: window.scrollY,
           // Improved rendering options
           backgroundColor: null,
-          imageTimeout: 5000,
+          imageTimeout: 15000,
+          // Increased timeout for slow-loading images
           removeContainer: true,
           scale: window.devicePixelRatio || 1,
           onclone: clonedDoc => {
@@ -9431,11 +9456,25 @@ class Screenshot {
               // Disable transitions
               element.style.transition = "none";
             });
-            // Ensure lazy-loaded images are visible
-            const images = clonedBody.querySelectorAll("img");
-            images.forEach(img => {
-              img.style.opacity = "1";
-              img.style.visibility = "visible";
+            // Process images in the cloned document
+            const originalImages = document.body.querySelectorAll("img");
+            const clonedImages = clonedBody.querySelectorAll("img");
+            clonedImages.forEach((clonedImg, index) => {
+              const originalImg = originalImages[index];
+              if (originalImg) {
+                // Copy the current src from original to ensure it loads
+                clonedImg.src = originalImg.currentSrc || originalImg.src;
+                // Force visibility
+                clonedImg.style.opacity = "1";
+                clonedImg.style.visibility = "visible";
+                clonedImg.style.display = originalImg.style.display || "inline";
+                if (originalImg.width) clonedImg.width = originalImg.width;
+                if (originalImg.height) clonedImg.height = originalImg.height;
+                // Remove lazy loading attributes that might interfere
+                clonedImg.removeAttribute("loading");
+                clonedImg.removeAttribute("data-src");
+                clonedImg.removeAttribute("data-srcset");
+              }
             });
           },
           ignoreElements: element => {
@@ -9468,8 +9507,6 @@ class Screenshot {
           }
         });
       } else {
-        // Wait a bit for scroll to settle
-        await this.wait(1000);
         // Capture the full page
         canvas = await html2canvas(document.body, {
           useCORS: true,
@@ -9477,7 +9514,8 @@ class Screenshot {
           logging: false,
           // Improved rendering options
           backgroundColor: null,
-          imageTimeout: 5000,
+          imageTimeout: 15000,
+          // Increased timeout for slow-loading images
           removeContainer: true,
           scale: window.devicePixelRatio || 1,
           onclone: clonedDoc => {
@@ -9494,11 +9532,25 @@ class Screenshot {
               // Disable transitions
               element.style.transition = "none";
             });
-            // Ensure lazy-loaded images are visible
-            const images = clonedBody.querySelectorAll("img");
-            images.forEach(img => {
-              img.style.opacity = "1";
-              img.style.visibility = "visible";
+            // Process images in the cloned document
+            const originalImages = document.body.querySelectorAll("img");
+            const clonedImages = clonedBody.querySelectorAll("img");
+            clonedImages.forEach((clonedImg, index) => {
+              const originalImg = originalImages[index];
+              if (originalImg) {
+                // Copy the current src from original to ensure it loads
+                clonedImg.src = originalImg.currentSrc || originalImg.src;
+                // Force visibility
+                clonedImg.style.opacity = "1";
+                clonedImg.style.visibility = "visible";
+                clonedImg.style.display = originalImg.style.display || "inline";
+                if (originalImg.width) clonedImg.width = originalImg.width;
+                if (originalImg.height) clonedImg.height = originalImg.height;
+                // Remove lazy loading attributes that might interfere
+                clonedImg.removeAttribute("loading");
+                clonedImg.removeAttribute("data-src");
+                clonedImg.removeAttribute("data-srcset");
+              }
             });
           },
           ignoreElements: element => {
@@ -11630,28 +11682,74 @@ class AnnotationManager {
         if (tempCtx && this.canvas) {
           // Draw the base screenshot
           tempCtx.drawImage(img, 0, 0);
-          // If mode is specified and different from current canvas mode, we need to adjust
-          const isCanvasInViewportMode = this.canvas.classList.contains('viewport-mode');
-          const isTargetFullpage = mode === 'fullpage';
-          if (isCanvasInViewportMode && isTargetFullpage) {
-            // User drew in viewport mode, but we're capturing fullpage
-            // Need to offset annotations by current scroll position
-            const scrollOffsetX = window.scrollX;
-            const scrollOffsetY = window.scrollY;
-            // Create a temporary canvas for adjusted annotations
+          // Determine the actual capture mode used
+          const currentCanvasMode = this.getCurrentMode();
+          const captureMode = mode || currentCanvasMode;
+          console.log('📸 Exporting annotated screenshot:', {
+            currentCanvasMode,
+            captureMode,
+            scrollPosition: {
+              x: window.scrollX,
+              y: window.scrollY
+            },
+            initialScrollPosition: this.initialScrollPosition,
+            canvasSize: {
+              width: this.canvas.width,
+              height: this.canvas.height
+            },
+            screenshotSize: {
+              width: img.width,
+              height: img.height
+            }
+          });
+          // We need to determine if annotations need to be offset
+          // Annotations are stored in absolute page coordinates (with scroll offset added)
+          // Screenshot might be:
+          // - fullpage: captures entire page (no offset needed)
+          // - viewport: captures current viewport (annotations need to be adjusted)
+          if (captureMode === 'viewport') {
+            // Screenshot is only the viewport, so we need to subtract scroll offset from annotations
+            // to align them correctly with the viewport screenshot
+            const scrollOffsetX = this.initialScrollPosition?.x ?? window.scrollX;
+            const scrollOffsetY = this.initialScrollPosition?.y ?? window.scrollY;
+            // Create a temporary canvas with viewport dimensions
             const adjustedCanvas = document.createElement('canvas');
-            adjustedCanvas.width = tempCanvas.width;
-            adjustedCanvas.height = tempCanvas.height;
+            adjustedCanvas.width = window.innerWidth;
+            adjustedCanvas.height = window.innerHeight;
             const adjustedCtx = adjustedCanvas.getContext('2d');
             if (adjustedCtx) {
-              // Draw annotations with scroll offset
-              adjustedCtx.drawImage(this.canvas, scrollOffsetX, scrollOffsetY);
+              // Translate context to subtract scroll offset
+              adjustedCtx.translate(-scrollOffsetX, -scrollOffsetY);
+              // Draw the annotations canvas (which is in absolute page coordinates)
+              adjustedCtx.drawImage(this.canvas, 0, 0);
+              // Reset translation
+              adjustedCtx.setTransform(1, 0, 0, 1, 0, 0);
               // Draw the adjusted annotations on top of screenshot
-              tempCtx.drawImage(adjustedCanvas, 0, 0);
+              // Scale if screenshot dimensions don't match viewport (due to device pixel ratio)
+              const scaleX = img.width / window.innerWidth;
+              const scaleY = img.height / window.innerHeight;
+              if (scaleX !== 1 || scaleY !== 1) {
+                tempCtx.save();
+                tempCtx.scale(scaleX, scaleY);
+                tempCtx.drawImage(adjustedCanvas, 0, 0);
+                tempCtx.restore();
+              } else {
+                tempCtx.drawImage(adjustedCanvas, 0, 0);
+              }
             }
           } else {
-            // Draw annotations directly on top
-            tempCtx.drawImage(this.canvas, 0, 0);
+            // Fullpage mode - annotations and screenshot are both in absolute page coordinates
+            // Just need to handle potential scaling due to device pixel ratio
+            const scaleX = img.width / this.canvas.width;
+            const scaleY = img.height / this.canvas.height;
+            if (scaleX !== 1 || scaleY !== 1) {
+              tempCtx.save();
+              tempCtx.scale(scaleX, scaleY);
+              tempCtx.drawImage(this.canvas, 0, 0);
+              tempCtx.restore();
+            } else {
+              tempCtx.drawImage(this.canvas, 0, 0);
+            }
           }
           resolve(tempCanvas.toDataURL('image/png'));
         }