hocmai-feedback-widget 0.2.1 → 0.2.3

package/src/utils/screenshot/cleanup.ts

@@ -1,32 +0,0 @@
-import type { CleanupTracker } from './types';
-
-export function createCleanupTracker(): CleanupTracker {
-  return {
-    objectUrls: [],
-    tempCanvases: []
-  };
-}
-
-export function cleanup(tracker: CleanupTracker): void {
-  // Revoke all object URLs
-  tracker.objectUrls.forEach(url => {
-    try {
-      URL.revokeObjectURL(url);
-    } catch {
-      console.warn('[Screenshot] Failed to revoke URL:', url);
-    }
-  });
-
-  // Clear temp canvases
-  tracker.tempCanvases.forEach(canvas => {
-    const ctx = canvas.getContext('2d');
-    if (ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-    }
-    canvas.width = 0;
-    canvas.height = 0;
-  });
-
-  tracker.objectUrls.length = 0;
-  tracker.tempCanvases.length = 0;
-}

package/src/utils/screenshot/device-detection.ts

@@ -1,90 +0,0 @@
-import type { DeviceCapabilities } from './types';
-
-/**
- * Detect if browser is Safari (including iOS Safari)
- */
-export function isSafari(): boolean {
-  const userAgent = navigator.userAgent.toLowerCase();
-  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent) ||
-         /iphone|ipad|ipod/.test(userAgent);
-}
-
-/**
- * Detect if browser is iOS Safari specifically
- * Must exclude Chrome/Chromium on iOS (Chrome DevTools emulation, Chrome iOS app)
- */
-export function isIOSSafari(): boolean {
-  const userAgent = navigator.userAgent.toLowerCase();
-  console.log('[DeviceDetection] User Agent:', userAgent);
-
-  // Check for iOS device
-  const isIOS = /iphone|ipad|ipod/.test(userAgent);
-  console.log('[DeviceDetection] isIOS:', isIOS);
-
-  // Check it's Safari (has 'safari' but NOT 'chrome' or 'crios' or 'crmo')
-  const isSafariBrowser = /safari/.test(userAgent) &&
-                          !/chrome|crios|crmo/.test(userAgent);
-  console.log('[DeviceDetection] isSafariBrowser:', isSafariBrowser);
-  console.log('[DeviceDetection] Final isIOSSafari:', isIOS && isSafariBrowser);
-
-  return isIOS && isSafariBrowser;
-}
-
-/**
- * Check if browser supports SVG foreignObject reliably
- * Safari iOS has known issues with foreignObject causing canvas tainting
- */
-export function supportsForeignObject(): boolean {
-  // Safari iOS < 13 has poor foreignObject support
-  // Even newer versions can cause canvas tainting issues
-  if (isIOSSafari()) {
-    console.warn('[DeviceDetection] Safari iOS detected - foreignObject may cause issues');
-    return false;
-  }
-
-  // Desktop Safari also has some limitations
-  if (isSafari() && !isIOSSafari()) {
-    console.warn('[DeviceDetection] Desktop Safari detected - foreignObject may have limitations');
-    // Desktop Safari works better, so we allow it
-    return true;
-  }
-
-  return true;
-}
-
-export function getDeviceCapabilities(): DeviceCapabilities {
-  const userAgent = navigator.userAgent.toLowerCase();
-  const isMobile = /iphone|ipod|android.*mobile/.test(userAgent);
-  const isTablet = /ipad|android(?!.*mobile)/.test(userAgent);
-  const deviceMemory = (navigator as { deviceMemory?: number }).deviceMemory || 4;
-  const isLowMemory = deviceMemory < 4;
-
-  if (isMobile) {
-    return {
-      maxCanvasSize: 4096,
-      recommendedScale: isLowMemory ? 0.8 : 1,
-      recommendedQuality: isLowMemory ? 0.7 : 0.8,
-      chunkSize: 30,
-      yieldInterval: 16, // ~60fps
-      maxTimeout: 5000
-    };
-  } else if (isTablet) {
-    return {
-      maxCanvasSize: 8192,
-      recommendedScale: 1,
-      recommendedQuality: 0.85,
-      chunkSize: 50,
-      yieldInterval: 16,
-      maxTimeout: 4000
-    };
-  } else {
-    return {
-      maxCanvasSize: 16384,
-      recommendedScale: 1,
-      recommendedQuality: 0.9,
-      chunkSize: 100,
-      yieldInterval: 8,
-      maxTimeout: 3000
-    };
-  }
-}

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

@@ -1,134 +0,0 @@
-import type { Rect, CaptureBounds } from './types';
-
-export function calculateCaptureBounds(
-  cropRect: Rect | undefined,
-  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 : getViewportWidth();
-  const targetHeight = cropRect ? cropRect.height : getViewportHeight();
-
-  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(
-  element: HTMLElement,
-  bounds: CaptureBounds
-): 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 < viewportBounds.top ||
-    rect.top > viewportBounds.bottom ||
-    rect.right < viewportBounds.left ||
-    rect.left > viewportBounds.right
-  ) {
-    return false;
-  }
-
-  // Hidden elements
-  if (rect.width === 0 || rect.height === 0) {
-    return false;
-  }
-
-  return true;
-}
-
-export function collectVisibleElements(bounds: CaptureBounds): Element[] {
-  const all = Array.from(document.body.getElementsByTagName('*'));
-
-  const filtered = all.filter(element => {
-    // Skip non-HTML elements
-    if (!(element instanceof HTMLElement)) return false;
-
-    // Skip excluded tags
-    const tag = element.tagName;
-    if (['SCRIPT', 'STYLE', 'LINK', 'IFRAME', 'NOSCRIPT'].includes(tag)) {
-      return false;
-    }
-
-    // Check viewport visibility (but keep HTML and BODY)
-    if (tag === 'HTML' || tag === 'BODY') {
-      return true;
-    }
-
-    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): {
-  nodeCount: number;
-  imageCount: number;
-  svgCount: number;
-  isComplex: boolean;
-} {
-  const allNodes = element.getElementsByTagName('*');
-  const images = element.getElementsByTagName('img');
-  const svgs = element.getElementsByTagName('svg');
-  const nodeCount = allNodes.length;
-  const imageCount = images.length;
-  const svgCount = svgs.length;
-
-  // Consider DOM complex if it has many nodes, images, or SVGs
-  const isComplex = nodeCount > 1000 || imageCount > 50 || svgCount > 10;
-
-  return { nodeCount, imageCount, svgCount, isComplex };
-}

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

@@ -1,148 +0,0 @@
-import { loadImageWithTimeout } from './performance';
-
-export interface ImageRenderResult {
-  success: boolean;
-  method?: 'canvas' | 'placeholder' | 'skip';
-  error?: string;
-}
-
-/**
- * Strategy 1: Try canvas rendering with crossOrigin
- */
-async function tryCanvasRender(
-  img: HTMLImageElement,
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): Promise<ImageRenderResult> {
-  try {
-    // Create a test image with crossOrigin
-    const testImg = new Image();
-    testImg.crossOrigin = 'anonymous';
-
-    await loadImageWithTimeout(testImg, img.src, 3000);
-
-    // Draw to canvas
-    ctx.drawImage(testImg, x, y, width, height);
-
-    return { success: true, method: 'canvas' };
-  } catch (error) {
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : 'Canvas render failed'
-    };
-  }
-}
-
-/**
- * Strategy 2: Use placeholder for CORS-blocked images
- */
-function renderPlaceholder(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number
-): ImageRenderResult {
-  // Draw gray background
-  ctx.fillStyle = '#f0f0f0';
-  ctx.fillRect(x, y, width, height);
-
-  // Draw border
-  ctx.strokeStyle = '#ccc';
-  ctx.lineWidth = 1;
-  ctx.strokeRect(x, y, width, height);
-
-  // Draw "Image" text
-  ctx.fillStyle = '#999';
-  ctx.font = '12px sans-serif';
-  ctx.textAlign = 'center';
-  ctx.textBaseline = 'middle';
-  ctx.fillText('Image', x + width / 2, y + height / 2);
-
-  return { success: true, method: 'placeholder' };
-}
-
-/**
- * Strategy 3: Skip if very small or hidden
- */
-function shouldSkipImage(width: number, height: number): boolean {
-  return width < 5 || height < 5;
-}
-
-/**
- * Main image rendering function with 3-tier strategy
- */
-export async function renderImage(
-  img: HTMLImageElement,
-  ctx: CanvasRenderingContext2D
-): Promise<ImageRenderResult> {
-  const rect = img.getBoundingClientRect();
-
-  // Use viewport coordinates directly
-  const x = rect.left;
-  const y = rect.top;
-  const width = rect.width;
-  const height = rect.height;
-
-  // Strategy 3: Skip very small images
-  if (shouldSkipImage(width, height)) {
-    return { success: true, method: 'skip' };
-  }
-
-  // Strategy 1: Try canvas rendering
-  const canvasResult = await tryCanvasRender(img, ctx, x, y, width, height);
-  if (canvasResult.success) {
-    return canvasResult;
-  }
-
-  // Strategy 2: Use placeholder
-  return renderPlaceholder(ctx, x, y, width, height);
-}
-
-/**
- * Render all images in the document
- */
-export async function renderImages(
-  images: HTMLImageElement[],
-  ctx: CanvasRenderingContext2D,
-  onProgress?: (current: number, total: number) => void
-): Promise<void> {
-  for (let i = 0; i < images.length; i++) {
-    await renderImage(images[i], ctx);
-
-    if (onProgress) {
-      onProgress(i + 1, images.length);
-    }
-  }
-}
-
-/**
- * Check if image is CORS-safe
- */
-export function isImageCORSSafe(img: HTMLImageElement): boolean {
-  // Same origin images are always safe
-  try {
-    const imgUrl = new URL(img.src, window.location.href);
-    return imgUrl.origin === window.location.origin;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Get all renderable images from elements
- */
-export function getImageElements(elements: Element[]): HTMLImageElement[] {
-  const images: HTMLImageElement[] = [];
-
-  for (const element of elements) {
-    if (element instanceof HTMLImageElement && element.src) {
-      images.push(element);
-    }
-  }
-
-  return images;
-}

package/src/utils/screenshot/performance.ts

@@ -1,57 +0,0 @@
-export function yieldToMainThread(): Promise<void> {
-  return new Promise(resolve => {
-    // Use Scheduler API if available (Chrome 94+)
-    if ('scheduler' in window && 'yield' in (window as { scheduler?: { yield?: () => Promise<void> } }).scheduler!) {
-      (window as { scheduler: { yield: () => Promise<void> } }).scheduler.yield().then(resolve);
-    } else {
-      // Fallback: setTimeout
-      setTimeout(resolve, 0);
-    }
-  });
-}
-
-export async function processInChunks<T>(
-  items: T[],
-  chunkSize: number,
-  processor: (chunk: T[]) => Promise<void>,
-  onProgress?: (progress: number) => void
-): Promise<void> {
-  for (let i = 0; i < items.length; i += chunkSize) {
-    const chunk = items.slice(i, i + chunkSize);
-
-    // Process chunk
-    await processor(chunk);
-
-    // Report progress
-    if (onProgress) {
-      onProgress(Math.round(((i + chunk.length) / items.length) * 100));
-    }
-
-    // Yield to main thread
-    await yieldToMainThread();
-  }
-}
-
-export function loadImageWithTimeout(
-  img: HTMLImageElement,
-  url: string,
-  timeout: number
-): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const timer = setTimeout(() => {
-      reject(new Error('Image load timeout'));
-    }, timeout);
-
-    img.onload = () => {
-      clearTimeout(timer);
-      resolve();
-    };
-
-    img.onerror = () => {
-      clearTimeout(timer);
-      reject(new Error('Image load error'));
-    };
-
-    img.src = url;
-  });
-}

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

@@ -1,149 +0,0 @@
-export interface SVGRenderResult {
-  success: boolean;
-  error?: string;
-}
-
-/**
- * Serialize SVG element to string
- */
-function serializeSVG(svg: SVGElement): string {
-  const serializer = new XMLSerializer();
-  let svgString = serializer.serializeToString(svg);
-
-  // Ensure xmlns is present
-  if (!svgString.includes('xmlns=')) {
-    svgString = svgString.replace(
-      '<svg',
-      '<svg xmlns="http://www.w3.org/2000/svg"'
-    );
-  }
-
-  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
- */
-export async function renderSVG(
-  svg: SVGElement,
-  ctx: CanvasRenderingContext2D
-): Promise<SVGRenderResult> {
-  try {
-    const rect = svg.getBoundingClientRect();
-
-    // Use viewport coordinates directly
-    const x = rect.left;
-    const y = rect.top;
-    const width = rect.width;
-    const height = rect.height;
-
-    // Skip very small SVGs
-    if (width < 1 || height < 1) {
-      return { success: true };
-    }
-
-    // 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);
-
-    try {
-      // Load as image
-      const img = new Image();
-      await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve();
-        img.onerror = () => reject(new Error('SVG image load failed'));
-        img.src = url;
-      });
-
-      // Draw to canvas
-      ctx.drawImage(img, x, y, width, height);
-
-      return { success: true };
-    } finally {
-      // Clean up blob URL
-      URL.revokeObjectURL(url);
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : 'SVG render failed'
-    };
-  }
-}
-
-/**
- * Render all SVG elements
- */
-export async function renderSVGs(
-  svgs: SVGElement[],
-  ctx: CanvasRenderingContext2D,
-  onProgress?: (current: number, total: number) => void
-): Promise<void> {
-  for (let i = 0; i < svgs.length; i++) {
-    await renderSVG(svgs[i], ctx);
-
-    if (onProgress) {
-      onProgress(i + 1, svgs.length);
-    }
-  }
-}
-
-/**
- * Check if element is MathJax rendered
- */
-export function isMathJaxElement(element: Element): boolean {
-  return (
-    element.classList.contains('MathJax') ||
-    element.classList.contains('MathJax_Display') ||
-    element.classList.contains('MJX-TeXAtom-ORD') ||
-    element.hasAttribute('data-mathml')
-  );
-}
-
-/**
- * Get all SVG elements from the document
- */
-export function getSVGElements(elements: Element[]): SVGElement[] {
-  const svgs: SVGElement[] = [];
-
-  for (const element of elements) {
-    if (element instanceof SVGElement) {
-      svgs.push(element);
-    }
-  }
-
-  return svgs;
-}
-
-/**
- * Get all MathJax elements from the document
- */
-export function getMathJaxElements(elements: Element[]): Element[] {
-  return elements.filter(element => isMathJaxElement(element));
-}