hocmai-feedback-widget 0.2.1 → 0.2.3

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

@@ -1,212 +0,0 @@
-/**
- * Text Content Renderer - Layer 4
- * Renders HTML text elements to canvas using SVG foreignObject technique
- * This preserves exact browser rendering including fonts, wrapping, and nested styles
- */
-
-export interface TextRenderResult {
-  success: boolean;
-  error?: string;
-}
-
-/**
- * Render HTML element as image using SVG foreignObject
- * This technique captures the exact browser rendering of text with all styles
- */
-export async function renderTextElement(
-  element: HTMLElement,
-  ctx: CanvasRenderingContext2D
-): Promise<TextRenderResult> {
-  try {
-    const rect = element.getBoundingClientRect();
-
-    // Use viewport coordinates directly (canvas is already translated)
-    const x = rect.left;
-    const y = rect.top;
-    const width = rect.width;
-    const height = rect.height;
-
-    // Skip elements with no dimensions
-    if (width < 1 || height < 1) {
-      return { success: true };
-    }
-
-    // Get computed styles to preserve appearance
-    const styles = window.getComputedStyle(element);
-
-    // Clone element to avoid modifying original
-    const clonedElement = element.cloneNode(true) as HTMLElement;
-
-    // Get all relevant styles
-    const relevantStyles = [
-      'color',
-      'font-family',
-      'font-size',
-      'font-weight',
-      'font-style',
-      'line-height',
-      'text-align',
-      'text-decoration',
-      'text-transform',
-      'letter-spacing',
-      'word-spacing',
-      'white-space',
-      'padding',
-      'margin',
-      'display',
-      'flex-direction',
-      'align-items',
-      'justify-content'
-    ];
-
-    // Build inline styles from computed styles
-    let inlineStyle = '';
-    relevantStyles.forEach(prop => {
-      const value = styles.getPropertyValue(prop);
-      if (value) {
-        inlineStyle += `${prop}: ${value}; `;
-      }
-    });
-
-    // Apply styles to cloned element
-    clonedElement.setAttribute('style', inlineStyle);
-
-    // Wrap in foreignObject SVG
-    const foreignObject = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-        <foreignObject width="100%" height="100%">
-          <div xmlns="http://www.w3.org/1999/xhtml" style="width: ${width}px; height: ${height}px; overflow: hidden;">
-            ${clonedElement.outerHTML}
-          </div>
-        </foreignObject>
-      </svg>
-    `;
-
-    // Create blob URL
-    const blob = new Blob([foreignObject], { type: 'image/svg+xml;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-
-    try {
-      // Load as image with timeout
-      const img = new Image();
-      await new Promise<void>((resolve, reject) => {
-        const timeout = setTimeout(() => {
-          reject(new Error('Text element render timeout'));
-        }, 1000); // 1 second timeout
-
-        img.onload = () => {
-          clearTimeout(timeout);
-          resolve();
-        };
-
-        img.onerror = () => {
-          clearTimeout(timeout);
-          reject(new Error('Text element 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) {
-    console.warn('[TextRenderer] Failed to render text element:', error);
-    return {
-      success: false,
-      error: error instanceof Error ? error.message : 'Text render failed'
-    };
-  }
-}
-
-/**
- * Check if element contains renderable text content
- */
-function hasTextContent(element: HTMLElement): boolean {
-  // Skip non-visible elements
-  const styles = window.getComputedStyle(element);
-  if (styles.display === 'none' || styles.visibility === 'hidden') {
-    return false;
-  }
-
-  // Check if element or its children have text
-  const text = element.textContent?.trim();
-  if (!text || text.length === 0) {
-    return false;
-  }
-
-  return true;
-}
-
-/**
- * Get text elements suitable for rendering
- * Selects leaf elements that contain actual text content
- */
-export function getTextElements(elements: Element[]): HTMLElement[] {
-  const textElements: HTMLElement[] = [];
-
-  for (const element of elements) {
-    if (!(element instanceof HTMLElement)) continue;
-
-    const tag = element.tagName;
-
-    // Skip elements that are rendered by other layers
-    if (['IMG', 'SVG', 'CANVAS', 'VIDEO', 'IFRAME', 'SCRIPT', 'STYLE', 'NOSCRIPT'].includes(tag)) {
-      continue;
-    }
-
-    // Focus on text-containing elements
-    // Prioritize leaf elements (P, SPAN, H1-H6, A, etc.)
-    const isTextElement = [
-      'P', 'SPAN', 'DIV', 'A', 'BUTTON', 'LABEL', 'LI',
-      'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
-      'TD', 'TH', 'STRONG', 'EM', 'B', 'I', 'U',
-      'CODE', 'PRE', 'BLOCKQUOTE'
-    ].includes(tag);
-
-    if (isTextElement && hasTextContent(element)) {
-      // Check if this is a leaf element or has only text children
-      const hasBlockChildren = Array.from(element.children).some(child => {
-        const childTag = child.tagName;
-        return ['DIV', 'P', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'UL', 'OL', 'TABLE'].includes(childTag);
-      });
-
-      // Only add if it's a leaf element (no block children)
-      if (!hasBlockChildren) {
-        textElements.push(element);
-      }
-    }
-  }
-
-  return textElements;
-}
-
-/**
- * Render all text elements to canvas
- */
-export async function renderTextContent(
-  elements: Element[],
-  ctx: CanvasRenderingContext2D,
-  onProgress?: (current: number, total: number) => void
-): Promise<void> {
-  const textElements = getTextElements(elements);
-
-  console.log('[TextRenderer] Rendering', textElements.length, 'text elements');
-
-  for (let i = 0; i < textElements.length; i++) {
-    const result = await renderTextElement(textElements[i], ctx);
-
-    if (!result.success) {
-      console.warn('[TextRenderer] Failed to render element:', textElements[i], result.error);
-    }
-
-    if (onProgress) {
-      onProgress(i + 1, textElements.length);
-    }
-  }
-}

package/src/utils/screenshot/types.ts

@@ -1,40 +0,0 @@
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface DeviceCapabilities {
-  maxCanvasSize: number;
-  recommendedScale: number;
-  recommendedQuality: number;
-  chunkSize: number;
-  yieldInterval: number;
-  maxTimeout: number;
-}
-
-export interface CaptureOptions {
-  quality: number;
-  scale: number;
-  includeMathJax: boolean;
-  timeout: number;
-}
-
-export interface CaptureProgress {
-  phase: 'analyzing' | 'rendering' | 'exporting';
-  progress: number; // 0-100
-  message: string;
-}
-
-export interface CleanupTracker {
-  objectUrls: string[];
-  tempCanvases: HTMLCanvasElement[];
-}
-
-export interface CaptureBounds {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
-}

package/src/utils/screenshot.ts

@@ -1,83 +0,0 @@
-import type { Rect, CaptureProgress } from './screenshot/types';
-import { captureWithCanvas } from './screenshot/canvas-renderer';
-import { domToPng } from 'modern-screenshot';
-
-// Re-export Rect type for backwards compatibility
-export type { Rect };
-
-/**
- * Capture screenshot with 3-tier fallback strategy:
- * 1. Canvas-based capture (primary)
- * 2. modern-screenshot library (fallback)
- * 3. Return null (final fallback)
- */
-export const captureScreenshot = async (
-    cropRect?: Rect,
-    onProgress?: (progress: CaptureProgress) => void
-): Promise<string | null> => {
-    console.log('[Screenshot] Starting capture with 3-tier fallback strategy');
-
-    try {
-        // Tier 1: Try canvas-based capture
-        console.log('[Screenshot] Tier 1: Attempting canvas-based capture...');
-        const canvasResult = await captureWithCanvas(cropRect, {}, onProgress);
-
-        if (canvasResult) {
-            console.log('[Screenshot] Tier 1 successful - canvas-based capture');
-            return canvasResult;
-        }
-
-        console.warn('[Screenshot] Tier 1 failed, falling back to Tier 2');
-    } catch (error) {
-        console.warn('[Screenshot] Tier 1 error:', error);
-    }
-
-    try {
-        // 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 : getViewportWidth();
-        const targetHeight = cropRect ? cropRect.height : getViewportHeight();
-
-        const scrollX = window.scrollX;
-        const scrollY = window.scrollY;
-        const offsetX = scrollX + targetX;
-        const offsetY = scrollY + targetY;
-
-        const dataUrl = await domToPng(element, {
-            quality: 0.9,
-            width: targetWidth,
-            height: targetHeight,
-            style: {
-                transform: `translate(${-offsetX}px, ${-offsetY}px)`
-            }
-        });
-
-        console.log('[Screenshot] Tier 2 successful - modern-screenshot');
-        return dataUrl;
-    } catch (error) {
-        console.error('[Screenshot] Tier 2 failed:', error);
-    }
-
-    // Tier 3: All methods failed
-    console.error('[Screenshot] All capture methods failed');
-    return null;
-};