@uxbertlabs/reportly 1.0.34 → 1.0.36

package/dist/features/annotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;IAC1G,OAAO,CAAC,aAAa,CAAoE;IACzF,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,qBAAqB,CAAkC;;IAqB/D,YAAY,IAAI,iBAAiB;IAqDjC,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,wBAAwB;IAwDhC,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IA8CtD,OAAO,CAAC,YAAY;IAmCpB,IAAI,IAAI,IAAI;IAkBZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA8DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAMb,cAAc,IAAI,UAAU,GAAG,UAAU;IAInC,yBAAyB,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;IAkDxG,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"annotation.d.ts","sourceRoot":"","sources":["../../src/features/annotation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,UAAU,CAAC;AAElE,cAAM,iBAAiB;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,GAAG,CAAkC;IAC7C,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,qBAAqB,CAA6E;IAC1G,OAAO,CAAC,aAAa,CAAoE;IACzF,OAAO,CAAC,WAAW,CAA0B;IAC7C,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,qBAAqB,CAAkC;;IAqB/D,YAAY,IAAI,iBAAiB;IAqDjC,OAAO,CAAC,gBAAgB;IA8BxB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,wBAAwB;IAwDhC,IAAI,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,IAAI;IA8CtD,OAAO,CAAC,YAAY;IAmCpB,IAAI,IAAI,IAAI;IAkBZ,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,eAAe;IA2BvB,OAAO,CAAC,aAAa;IAgDrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,QAAQ;IAehB,OAAO,CAAC,SAAS;IA8BjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;IA8DvB,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,QAAQ;IAuBhB,OAAO,CAAC,MAAM;IAmBd,IAAI,IAAI,IAAI;IAOZ,KAAK,IAAI,IAAI;IAMb,cAAc,IAAI,UAAU,GAAG,UAAU;IAInC,yBAAyB,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC;IA8FxG,OAAO,IAAI,IAAI;CAOhB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/features/screenshot.d.ts

@@ -15,7 +15,7 @@ declare class Screenshot {
      */
     private waitForStability;
     /**
-     * Wait for all images to finish loading
+     * Wait for visible images to finish loading (no page scrolling to avoid annotation misalignment)
      */
     private waitForImages;
     /**

package/dist/features/screenshot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAEvE,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAkC;gBAEpC,KAAK,CAAC,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM;IAS9G;;OAEG;IACH,OAAO,CAAC,IAAI;IAIZ;;OAEG;YACW,gBAAgB;IAc9B;;OAEG;YACW,aAAa;IAgB3B;;OAEG;YACW,YAAY;IAc1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKb,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IAuO1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIjC;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAWtC;;OAEG;IACH,QAAQ,IAAI,eAAe;IAI3B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAIhD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIjC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"screenshot.d.ts","sourceRoot":"","sources":["../../src/features/screenshot.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAC;AAEvE,cAAM,UAAU;IACd,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAkC;gBAEpC,KAAK,CAAC,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM;IAS9G;;OAEG;IACH,OAAO,CAAC,IAAI;IAIZ;;OAEG;YACW,gBAAgB;IAmB9B;;OAEG;YACW,aAAa;IA+C3B;;OAEG;YACW,YAAY;IAc1B;;OAEG;IACH,OAAO,CAAC,WAAW;IAKb,OAAO,CAAC,IAAI,GAAE,UAAU,GAAG,UAAuB,GAAG,OAAO,CAAC,MAAM,CAAC;IA0Q1E,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,iBAAiB;IAOzB;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIjC;;OAEG;IACH,eAAe,IAAI,MAAM;IAIzB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI;IAWtC;;OAEG;IACH,QAAQ,IAAI,eAAe;IAI3B;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;IAIhD;;;OAGG;IACH,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIjC,aAAa,IAAI,MAAM,GAAG,IAAI;IAI9B,KAAK,IAAI,IAAI;CAGd;AAED,eAAe,UAAU,CAAC"}

package/dist/index.cjs.js

@@ -9328,36 +9328,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
@@ -9418,7 +9442,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 => {
@@ -9435,11 +9460,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 => {
@@ -9472,8 +9511,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,
@@ -9481,7 +9518,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 => {
@@ -9498,11 +9536,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 => {
@@ -11634,28 +11686,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'));
         }