hocmai-feedback-widget 0.2.0 → 0.2.1

package/src/utils/screenshot/element-collector.ts

@@ -2,19 +2,45 @@ import type { Rect, CaptureBounds } from './types';
 
 export function calculateCaptureBounds(
   cropRect: Rect | undefined,
-  buffer: number
+  buffer: number,
+  viewportWidth?: number,
+  viewportHeight?: number
 ): CaptureBounds {
+  // Use provided viewport dimensions or calculate them
+  const getViewportWidth = () => {
+    if (viewportWidth !== undefined) return viewportWidth;
+    if (window.visualViewport) return window.visualViewport.width;
+    return document.documentElement.clientWidth || window.innerWidth;
+  };
+
+  const getViewportHeight = () => {
+    if (viewportHeight !== undefined) return viewportHeight;
+    if (window.visualViewport) return window.visualViewport.height;
+    return document.documentElement.clientHeight || window.innerHeight;
+  };
+
   const targetX = cropRect ? cropRect.x : 0;
   const targetY = cropRect ? cropRect.y : 0;
-  const targetWidth = cropRect ? cropRect.width : window.innerWidth;
-  const targetHeight = cropRect ? cropRect.height : window.innerHeight;
+  const targetWidth = cropRect ? cropRect.width : getViewportWidth();
+  const targetHeight = cropRect ? cropRect.height : getViewportHeight();
 
-  return {
+  const bounds = {
     left: targetX - buffer,
     top: targetY - buffer,
     right: targetX + targetWidth + buffer,
     bottom: targetY + targetHeight + buffer
   };
+
+  console.log('[ElementCollector] calculateCaptureBounds:', {
+    viewportWidth: viewportWidth || 'auto',
+    viewportHeight: viewportHeight || 'auto',
+    targetWidth,
+    targetHeight,
+    bounds,
+    scroll: { x: window.scrollX, y: window.scrollY }
+  });
+
+  return bounds;
 }
 
 export function isElementInViewport(
@@ -23,12 +49,25 @@ export function isElementInViewport(
 ): boolean {
   const rect = element.getBoundingClientRect();
 
+  // Convert bounds from document coordinates to viewport coordinates
+  // getBoundingClientRect() returns viewport-relative coordinates
+  // bounds are in document coordinates, so subtract scroll offset
+  const scrollX = window.scrollX || window.pageXOffset;
+  const scrollY = window.scrollY || window.pageYOffset;
+
+  const viewportBounds = {
+    left: bounds.left - scrollX,
+    top: bounds.top - scrollY,
+    right: bounds.right - scrollX,
+    bottom: bounds.bottom - scrollY
+  };
+
   // Outside viewport
   if (
-    rect.bottom < bounds.top ||
-    rect.top > bounds.bottom ||
-    rect.right < bounds.left ||
-    rect.left > bounds.right
+    rect.bottom < viewportBounds.top ||
+    rect.top > viewportBounds.bottom ||
+    rect.right < viewportBounds.left ||
+    rect.left > viewportBounds.right
   ) {
     return false;
   }
@@ -44,7 +83,7 @@ export function isElementInViewport(
 export function collectVisibleElements(bounds: CaptureBounds): Element[] {
   const all = Array.from(document.body.getElementsByTagName('*'));
 
-  return all.filter(element => {
+  const filtered = all.filter(element => {
     // Skip non-HTML elements
     if (!(element instanceof HTMLElement)) return false;
 
@@ -61,6 +100,18 @@ export function collectVisibleElements(bounds: CaptureBounds): Element[] {
 
     return isElementInViewport(element as HTMLElement, bounds);
   });
+
+  console.log('[ElementCollector] collectVisibleElements:', {
+    total: all.length,
+    filtered: filtered.length,
+    bounds,
+    sampleElements: filtered.slice(0, 5).map(el => ({
+      tag: el.tagName,
+      rect: el.getBoundingClientRect()
+    }))
+  });
+
+  return filtered;
 }
 
 export function estimateDOMComplexity(element: HTMLElement): {

package/src/utils/screenshot/svg-renderer.ts

@@ -21,6 +21,23 @@ function serializeSVG(svg: SVGElement): string {
   return svgString;
 }
 
+/**
+ * Check if SVG contains external resources that might cause CORS issues
+ */
+function hasExternalResources(svgString: string): boolean {
+  // Check for external image references
+  if (svgString.includes('xlink:href="http') || svgString.includes('href="http')) {
+    return true;
+  }
+
+  // Check for external font references
+  if (svgString.includes('@font-face') && svgString.includes('url(http')) {
+    return true;
+  }
+
+  return false;
+}
+
 /**
  * Render SVG element to canvas
  */
@@ -45,6 +62,12 @@ export async function renderSVG(
     // Serialize SVG to string
     const svgString = serializeSVG(svg);
 
+    // Check for external resources that might cause CORS issues
+    if (hasExternalResources(svgString)) {
+      console.warn('[SVG] Skipping SVG with external resources to prevent canvas tainting');
+      return { success: true }; // Skip but don't fail
+    }
+
     // Create blob URL
     const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
     const url = URL.createObjectURL(blob);

package/src/utils/screenshot.ts

@@ -36,11 +36,26 @@ export const captureScreenshot = async (
         // Tier 2: Fallback to modern-screenshot
         console.log('[Screenshot] Tier 2: Attempting modern-screenshot...');
 
+        // Use Visual Viewport API for accurate mobile dimensions
+        const getViewportWidth = () => {
+            if (window.visualViewport) {
+                return window.visualViewport.width;
+            }
+            return document.documentElement.clientWidth || window.innerWidth;
+        };
+
+        const getViewportHeight = () => {
+            if (window.visualViewport) {
+                return window.visualViewport.height;
+            }
+            return document.documentElement.clientHeight || window.innerHeight;
+        };
+
         const element = document.documentElement;
         const targetX = cropRect ? cropRect.x : 0;
         const targetY = cropRect ? cropRect.y : 0;
-        const targetWidth = cropRect ? cropRect.width : window.innerWidth;
-        const targetHeight = cropRect ? cropRect.height : window.innerHeight;
+        const targetWidth = cropRect ? cropRect.width : getViewportWidth();
+        const targetHeight = cropRect ? cropRect.height : getViewportHeight();
 
         const scrollX = window.scrollX;
         const scrollY = window.scrollY;