hocmai-feedback-widget 0.2.0 → 0.2.2

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

@@ -1,54 +0,0 @@
-export function getComputedBackgroundColor(element: HTMLElement): string | null {
-  const styles = window.getComputedStyle(element);
-  const bgColor = styles.backgroundColor;
-
-  // Check if transparent
-  if (bgColor === 'transparent' || bgColor === 'rgba(0, 0, 0, 0)') {
-    return null;
-  }
-
-  return bgColor;
-}
-
-export async function renderBackground(
-  element: HTMLElement,
-  ctx: CanvasRenderingContext2D
-): Promise<void> {
-  const rect = element.getBoundingClientRect();
-  const styles = window.getComputedStyle(element);
-
-  // Use viewport coordinates directly from getBoundingClientRect
-  const x = rect.left;
-  const y = rect.top;
-  const width = rect.width;
-  const height = rect.height;
-
-  // Render background color
-  const bgColor = styles.backgroundColor;
-  if (bgColor && bgColor !== 'transparent' && bgColor !== 'rgba(0, 0, 0, 0)') {
-    ctx.fillStyle = bgColor;
-    ctx.fillRect(x, y, width, height);
-  }
-
-  // Render border
-  const borderWidth = parseFloat(styles.borderWidth) || 0;
-  if (borderWidth > 0) {
-    const borderColor = styles.borderColor;
-    if (borderColor && borderColor !== 'transparent') {
-      ctx.strokeStyle = borderColor;
-      ctx.lineWidth = borderWidth;
-      ctx.strokeRect(x, y, width, height);
-    }
-  }
-}
-
-export async function renderBackgrounds(
-  elements: Element[],
-  ctx: CanvasRenderingContext2D
-): Promise<void> {
-  for (const element of elements) {
-    if (element instanceof HTMLElement) {
-      await renderBackground(element, ctx);
-    }
-  }
-}

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

@@ -1,217 +0,0 @@
-import type { Rect, CaptureOptions, CaptureProgress, CaptureBounds } from './types';
-import { getDeviceCapabilities } from './device-detection';
-import { createCleanupTracker, cleanup } from './cleanup';
-import {
-  calculateCaptureBounds,
-  collectVisibleElements,
-  estimateDOMComplexity
-} from './element-collector';
-import { yieldToMainThread } from './performance';
-import { renderBackgrounds } from './background-renderer';
-import { getImageElements, renderImages } from './image-renderer';
-import { getSVGElements, renderSVGs, getMathJaxElements } from './svg-renderer';
-import { renderTextContent } from './text-renderer';
-
-/**
- * Main canvas-based capture with layered rendering
- */
-export async function captureWithCanvas(
-  cropRect: Rect | undefined,
-  options: Partial<CaptureOptions>,
-  onProgress?: (progress: CaptureProgress) => void
-): Promise<string | null> {
-  const cleanupTracker = createCleanupTracker();
-
-  try {
-    // 1. Get device capabilities and adjust options
-    const capabilities = getDeviceCapabilities();
-    const quality = options.quality ?? capabilities.recommendedQuality;
-    const scale = options.scale ?? capabilities.recommendedScale;
-    const includeMathJax = options.includeMathJax ?? true;
-
-    onProgress?.({
-      phase: 'analyzing',
-      progress: 10,
-      message: 'Analyzing DOM structure...'
-    });
-
-    // 2. Analyze DOM complexity
-    const element = document.documentElement;
-    const complexity = estimateDOMComplexity(element);
-    console.log('[Canvas] DOM complexity:', complexity);
-
-    // Adjust quality based on complexity
-    let finalQuality = quality;
-    if (complexity.isComplex) {
-      finalQuality = Math.max(0.6, quality - 0.1);
-      console.log('[Canvas] Complex DOM detected, reducing quality to', finalQuality);
-    }
-
-    // 3. Calculate capture dimensions
-    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;
-
-    // 4. Check canvas size limits
-    let finalScale = scale;
-    if (
-      targetWidth * finalScale > capabilities.maxCanvasSize ||
-      targetHeight * finalScale > capabilities.maxCanvasSize
-    ) {
-      console.warn('[Canvas] Size exceeds device limits, reducing scale');
-      finalScale = Math.min(
-        capabilities.maxCanvasSize / targetWidth,
-        capabilities.maxCanvasSize / targetHeight,
-        finalScale
-      );
-    }
-
-    // 5. Create canvas
-    const canvas = document.createElement('canvas');
-    canvas.width = targetWidth * finalScale;
-    canvas.height = targetHeight * finalScale;
-    cleanupTracker.tempCanvases.push(canvas);
-
-    const ctx = canvas.getContext('2d', {
-      alpha: false,
-      willReadFrequently: false
-    });
-
-    if (!ctx) {
-      throw new Error('Failed to get canvas context');
-    }
-
-    // Apply scale
-    ctx.scale(finalScale, finalScale);
-
-    // Fill with white background
-    ctx.fillStyle = '#ffffff';
-    ctx.fillRect(0, 0, targetWidth, targetHeight);
-
-    onProgress?.({
-      phase: 'analyzing',
-      progress: 20,
-      message: 'Collecting visible elements...'
-    });
-
-    // 6. Calculate capture bounds and collect elements
-    const bounds: CaptureBounds = calculateCaptureBounds(
-      cropRect,
-      capabilities.maxCanvasSize > 8192 ? 500 : 300 // Buffer based on device
-    );
-
-    const visibleElements = collectVisibleElements(bounds);
-    console.log('[Canvas] Visible elements:', visibleElements.length);
-
-    // 7. Separate elements by type
-    const images = getImageElements(visibleElements);
-    const svgs = getSVGElements(visibleElements);
-    const mathJaxElements = includeMathJax ? getMathJaxElements(visibleElements) : [];
-
-    console.log('[Canvas] Images:', images.length, 'SVGs:', svgs.length, 'MathJax:', mathJaxElements.length);
-
-    onProgress?.({
-      phase: 'rendering',
-      progress: 30,
-      message: 'Rendering backgrounds...'
-    });
-
-    // 8. Apply translation for crop offset
-    // When cropRect is provided, translate canvas to show only the cropped area
-    ctx.translate(-targetX, -targetY);
-
-    // 9. Layer 1: Render backgrounds
-    await renderBackgrounds(visibleElements, ctx);
-
-    await yieldToMainThread();
-
-    onProgress?.({
-      phase: 'rendering',
-      progress: 50,
-      message: `Rendering ${images.length} images...`
-    });
-
-    // 10. Layer 2: Render images
-    await renderImages(images, ctx, (current, total) => {
-      const progress = 50 + Math.round((current / total) * 30);
-      onProgress?.({
-        phase: 'rendering',
-        progress,
-        message: `Rendering images (${current}/${total})...`
-      });
-    });
-
-    await yieldToMainThread();
-
-    onProgress?.({
-      phase: 'rendering',
-      progress: 80,
-      message: `Rendering ${svgs.length} SVG elements...`
-    });
-
-    // 11. Layer 3: Render SVG elements (including MathJax)
-    await renderSVGs(svgs, ctx, (current, total) => {
-      const progress = 80 + Math.round((current / total) * 10);
-      onProgress?.({
-        phase: 'rendering',
-        progress,
-        message: `Rendering SVG (${current}/${total})...`
-      });
-    });
-
-    await yieldToMainThread();
-
-    onProgress?.({
-      phase: 'rendering',
-      progress: 90,
-      message: 'Rendering text content...'
-    });
-
-    // 12. Layer 4: Render text content
-    await renderTextContent(visibleElements, ctx, (current, total) => {
-      const progress = 90 + Math.round((current / total) * 5);
-      onProgress?.({
-        phase: 'rendering',
-        progress,
-        message: `Rendering text (${current}/${total})...`
-      });
-    });
-
-    await yieldToMainThread();
-
-    onProgress?.({
-      phase: 'exporting',
-      progress: 95,
-      message: 'Exporting canvas to image...'
-    });
-
-    // 13. Export canvas to data URL
-    const dataUrl = canvas.toDataURL('image/png', finalQuality);
-
-    onProgress?.({
-      phase: 'exporting',
-      progress: 100,
-      message: 'Capture complete'
-    });
-
-    console.log('[Canvas] Capture successful');
-    return dataUrl;
-
-  } catch (error) {
-    console.error('[Canvas] Capture failed:', error);
-    return null;
-  } finally {
-    // 14. Cleanup resources
-    cleanup(cleanupTracker);
-  }
-}
-
-/**
- * Basic canvas capture without progress reporting
- */
-export async function basicCanvasCapture(
-  cropRect?: Rect
-): Promise<string | null> {
-  return captureWithCanvas(cropRect, {}, undefined);
-}

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,38 +0,0 @@
-import type { DeviceCapabilities } from './types';
-
-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,83 +0,0 @@
-import type { Rect, CaptureBounds } from './types';
-
-export function calculateCaptureBounds(
-  cropRect: Rect | undefined,
-  buffer: number
-): CaptureBounds {
-  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;
-
-  return {
-    left: targetX - buffer,
-    top: targetY - buffer,
-    right: targetX + targetWidth + buffer,
-    bottom: targetY + targetHeight + buffer
-  };
-}
-
-export function isElementInViewport(
-  element: HTMLElement,
-  bounds: CaptureBounds
-): boolean {
-  const rect = element.getBoundingClientRect();
-
-  // Outside viewport
-  if (
-    rect.bottom < bounds.top ||
-    rect.top > bounds.bottom ||
-    rect.right < bounds.left ||
-    rect.left > bounds.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('*'));
-
-  return 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);
-  });
-}
-
-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;
-  });
-}