@uxbertlabs/reportly 1.0.34 → 1.0.35

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,9 +15,17 @@ declare class Screenshot {
      */
     private waitForStability;
     /**
-     * Wait for all images to finish loading
+     * Wait for CSS animations and transitions to complete
+     */
+    private waitForAnimations;
+    /**
+     * Wait for all images to finish loading, including lazy-loaded images
      */
     private waitForImages;
+    /**
+     * Trigger lazy-loading by briefly scrolling through the page
+     */
+    private triggerLazyLoading;
     /**
      * Wait for fonts to load
      */

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;IAqB9B;;OAEG;YACW,iBAAiB;IAwC/B;;OAEG;YACW,aAAa;IA2C3B;;OAEG;YACW,kBAAkB;IAuChC;;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"}

package/dist/index.cjs.js

@@ -9328,36 +9328,122 @@ 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 images to load (includes lazy-load triggering)
     await this.waitForImages();
     // Wait for fonts to load
     await this.waitForFonts();
-    // Additional short wait for any final rendering
-    await this.wait(100);
+    // Wait for any ongoing animations/transitions to complete
+    await this.waitForAnimations();
+    // Additional wait for final rendering and layout shifts
+    await this.wait(300);
+    console.log('✅ Page stabilized and ready for capture');
   }
   /**
-   * Wait for all images to finish loading
+   * Wait for CSS animations and transitions to complete
+   */
+  async waitForAnimations() {
+    // Get all elements with animations or transitions
+    const elements = document.querySelectorAll('*');
+    const animationPromises = [];
+    elements.forEach(element => {
+      const styles = window.getComputedStyle(element);
+      // Check for animations
+      const animationDuration = parseFloat(styles.animationDuration || '0');
+      if (animationDuration > 0) {
+        animationPromises.push(new Promise(resolve => {
+          const timeout = Math.min(animationDuration * 1000, 2000); // Max 2 seconds
+          setTimeout(resolve, timeout);
+        }));
+      }
+      // Check for transitions
+      const transitionDuration = parseFloat(styles.transitionDuration || '0');
+      if (transitionDuration > 0) {
+        animationPromises.push(new Promise(resolve => {
+          const timeout = Math.min(transitionDuration * 1000, 2000); // Max 2 seconds
+          setTimeout(resolve, timeout);
+        }));
+      }
+    });
+    if (animationPromises.length > 0) {
+      console.log(`⏳ Waiting for ${animationPromises.length} animations/transitions...`);
+      await Promise.race([Promise.all(animationPromises), this.wait(2000) // Max 2 seconds total
+      ]);
+    }
+  }
+  /**
+   * Wait for all images to finish loading, including lazy-loaded images
    */
   async waitForImages() {
+    // First, trigger lazy-loading by scrolling through the page
+    await this.triggerLazyLoading();
+    // Now wait for all images to load
     const images = Array.from(document.images);
-    const imagePromises = images.map(img => {
-      if (img.complete) {
+    console.log(`⏳ Waiting for ${images.length} images to load...`);
+    const imagePromises = images.map((img, index) => {
+      if (img.complete && img.naturalHeight !== 0) {
         return Promise.resolve();
       }
       return new Promise(resolve => {
-        img.addEventListener("load", () => resolve(), {
+        const startTime = Date.now();
+        const onLoad = () => {
+          const loadTime = Date.now() - startTime;
+          console.log(`✅ Image ${index + 1} loaded in ${loadTime}ms:`, img.src.substring(0, 80));
+          resolve();
+        };
+        const onError = () => {
+          console.warn(`❌ Image ${index + 1} failed to load:`, img.src.substring(0, 80));
+          resolve(); // Still resolve to not block other images
+        };
+        const onTimeout = () => {
+          console.warn(`⏰ Image ${index + 1} timed out after 5s:`, img.src.substring(0, 80));
+          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);
+        // Increased timeout to 5 seconds for slow images
+        setTimeout(onTimeout, 5000);
       });
     });
     await Promise.all(imagePromises);
+    console.log(`✅ All ${images.length} images processed`);
+  }
+  /**
+   * Trigger lazy-loading by briefly scrolling through the page
+   */
+  async triggerLazyLoading() {
+    const originalScrollY = window.scrollY;
+    const originalScrollX = window.scrollX;
+    const pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+    console.log(`📜 Triggering lazy-load for page height: ${pageHeight}px`);
+    // Scroll through the page in increments to trigger lazy-loading
+    const scrollIncrement = window.innerHeight;
+    const positions = [];
+    // Generate scroll positions (every viewport height)
+    for (let y = 0; y < pageHeight; y += scrollIncrement) {
+      positions.push(y);
+    }
+    // Add final position
+    if (positions[positions.length - 1] < pageHeight) {
+      positions.push(pageHeight);
+    }
+    // Quickly scroll to each position to trigger lazy-load
+    for (const position of positions) {
+      window.scrollTo(0, position);
+      // Small wait to let intersection observers fire
+      await this.wait(50);
+    }
+    // Scroll back to original position
+    window.scrollTo(originalScrollX, originalScrollY);
+    console.log(`✅ Lazy-load triggered, returned to position: ${originalScrollY}px`);
+    // Wait a bit for lazy-loaded images to start loading
+    await this.wait(200);
   }
   /**
    * Wait for fonts to load
@@ -11634,28 +11720,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'));
         }