@np-dev/ui-ai-anotation 0.1.0

package/src/utils/screenshot.native.ts

@@ -0,0 +1,139 @@
+import { RefObject } from 'react';
+import { View, Platform } from 'react-native';
+
+export interface ScreenshotOptions {
+  /** Scale factor for higher resolution (default: 2) */
+  scale?: number;
+  /** Image format (default: 'png') */
+  format?: 'png' | 'jpg';
+  /** Quality for jpg format (0-1, default: 0.9) */
+  quality?: number;
+  /** Whether to copy to clipboard (default: true, requires expo-clipboard) */
+  copyToClipboard?: boolean;
+  /** Whether to save to camera roll (default: false, requires expo-media-library) */
+  saveToCameraRoll?: boolean;
+}
+
+export interface ScreenshotResult {
+  success: boolean;
+  uri?: string;
+  base64?: string;
+  error?: string;
+}
+
+/**
+ * Captures a screenshot of a React Native View using react-native-view-shot
+ * 
+ * Requirements:
+ * - react-native-view-shot must be installed
+ * - Optionally: expo-clipboard for clipboard support
+ * - Optionally: expo-media-library for camera roll support
+ * 
+ * @param viewRef - Reference to the View to capture
+ * @param options - Screenshot options
+ */
+export async function captureScreenshot(
+  viewRef: RefObject<View>,
+  options: ScreenshotOptions = {}
+): Promise<ScreenshotResult> {
+  const {
+    scale = 2,
+    format = 'png',
+    quality = 0.9,
+    copyToClipboard = false,
+    saveToCameraRoll = false,
+  } = options;
+
+  try {
+    // Dynamic import to avoid issues if not installed
+    let captureRef: any;
+    try {
+      const viewShot = await import('react-native-view-shot');
+      captureRef = viewShot.captureRef;
+    } catch {
+      return {
+        success: false,
+        error: 'react-native-view-shot is not installed. Run: npm install react-native-view-shot',
+      };
+    }
+
+    if (!viewRef.current) {
+      return {
+        success: false,
+        error: 'View reference is null',
+      };
+    }
+
+    // Capture the view
+    const uri = await captureRef(viewRef, {
+      format,
+      quality,
+      result: 'tmpfile',
+      snapshotContentContainer: false,
+    });
+
+    // Get base64 if needed
+    let base64: string | undefined;
+    if (copyToClipboard) {
+      const base64Result = await captureRef(viewRef, {
+        format,
+        quality,
+        result: 'base64',
+        snapshotContentContainer: false,
+      });
+      base64 = base64Result;
+    }
+
+    // Copy to clipboard if requested
+    if (copyToClipboard && base64) {
+      try {
+        const Clipboard = await import('expo-clipboard');
+        // expo-clipboard doesn't support image directly, 
+        // we'll copy the base64 string
+        await Clipboard.setStringAsync(base64);
+      } catch {
+        console.warn('expo-clipboard not available for clipboard support');
+      }
+    }
+
+    // Save to camera roll if requested
+    if (saveToCameraRoll) {
+      try {
+        const MediaLibrary = await import('expo-media-library');
+        const { status } = await MediaLibrary.requestPermissionsAsync();
+        if (status === 'granted') {
+          await MediaLibrary.saveToLibraryAsync(uri);
+        }
+      } catch {
+        console.warn('expo-media-library not available for saving to camera roll');
+      }
+    }
+
+    return {
+      success: true,
+      uri,
+      base64,
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Screenshot capture failed:', message);
+    return {
+      success: false,
+      error: message,
+    };
+  }
+}
+
+/**
+ * Placeholder for web compatibility
+ * The actual web implementation is in screenshot.ts
+ */
+export function captureScreenshotWeb(
+  _element: any,
+  _options: any
+): Promise<ScreenshotResult> {
+  return Promise.resolve({
+    success: false,
+    error: 'Use the web-specific captureScreenshot function',
+  });
+}

package/src/utils/screenshot.ts

@@ -0,0 +1,162 @@
+import html2canvas from 'html2canvas';
+
+export interface ScreenshotOptions {
+  /** Scale factor for higher resolution (default: 2) */
+  scale?: number;
+  /** Background color (default: transparent) */
+  backgroundColor?: string | null;
+  /** Whether to copy to clipboard (default: true) */
+  copyToClipboard?: boolean;
+  /** Whether to download as file (default: false) */
+  download?: boolean;
+  /** Filename when downloading (default: 'screenshot.png') */
+  filename?: string;
+}
+
+export interface ScreenshotResult {
+  success: boolean;
+  dataUrl?: string;
+  blob?: Blob;
+  error?: string;
+}
+
+// Tauri internals type for checking environment
+declare global {
+  interface Window {
+    __TAURI_INTERNALS__?: unknown;
+    __TAURI_CLIPBOARD_WRITE_IMAGE__?: (bytes: Uint8Array) => Promise<void>;
+  }
+}
+
+/**
+ * Check if running in Tauri environment
+ */
+function isTauriEnv(): boolean {
+  return typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window;
+}
+
+/**
+ * Copy image to clipboard using Tauri's clipboard plugin
+ * Uses a global function injected by the main app to avoid bundler issues
+ */
+async function copyToClipboardTauri(blob: Blob): Promise<void> {
+  // Check if the main app has injected the clipboard function
+  if (typeof window.__TAURI_CLIPBOARD_WRITE_IMAGE__ === 'function') {
+    const arrayBuffer = await blob.arrayBuffer();
+    const bytes = new Uint8Array(arrayBuffer);
+    await window.__TAURI_CLIPBOARD_WRITE_IMAGE__(bytes);
+    return;
+  }
+  
+  // Fallback: throw error so browser clipboard API is tried
+  throw new Error('Tauri clipboard function not available');
+}
+
+/**
+ * Copy image to clipboard using browser's Clipboard API
+ */
+async function copyToClipboardBrowser(blob: Blob, dataUrl: string): Promise<void> {
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        'image/png': blob,
+      }),
+    ]);
+  } catch (clipboardError) {
+    console.warn('Failed to copy to clipboard:', clipboardError);
+    // Fallback: try copying as text (data URL)
+    try {
+      await navigator.clipboard.writeText(dataUrl);
+    } catch {
+      // Ignore fallback failure
+    }
+  }
+}
+
+/**
+ * Captures a screenshot of the given HTML element
+ */
+export async function captureScreenshot(
+  element: HTMLElement,
+  options: ScreenshotOptions = {}
+): Promise<ScreenshotResult> {
+  const {
+    scale = 2,
+    backgroundColor = null,
+    copyToClipboard = true,
+    download = false,
+    filename = 'screenshot.png',
+  } = options;
+
+  try {
+    // Capture the element
+    const canvas = await html2canvas(element, {
+      scale,
+      backgroundColor,
+      logging: false,
+      useCORS: true,
+      allowTaint: true,
+      // Capture just the element
+      x: window.scrollX,
+      y: window.scrollY,
+      scrollX: -window.scrollX,
+      scrollY: -window.scrollY,
+      windowWidth: document.documentElement.scrollWidth,
+      windowHeight: document.documentElement.scrollHeight,
+      // Ignore annotation UI elements
+      ignoreElements: (el) => {
+        return el.hasAttribute('data-ai-annotation-ui');
+      },
+    });
+
+    // Convert to blob
+    const blob = await new Promise<Blob>((resolve, reject) => {
+      canvas.toBlob((b) => {
+        if (b) resolve(b);
+        else reject(new Error('Failed to create blob'));
+      }, 'image/png');
+    });
+
+    const dataUrl = canvas.toDataURL('image/png');
+
+    // Copy to clipboard if requested
+    if (copyToClipboard) {
+      if (isTauriEnv()) {
+        try {
+          // Use Tauri's clipboard plugin for proper image clipboard support
+          await copyToClipboardTauri(blob);
+        } catch (tauriErr) {
+          console.warn('Tauri clipboard failed, falling back to browser API:', tauriErr);
+          // Fallback to browser's Clipboard API
+          await copyToClipboardBrowser(blob, dataUrl);
+        }
+      } else {
+        // Fallback to browser's Clipboard API
+        await copyToClipboardBrowser(blob, dataUrl);
+      }
+    }
+
+    // Download if requested
+    if (download) {
+      const link = document.createElement('a');
+      link.href = dataUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+
+    return {
+      success: true,
+      dataUrl,
+      blob,
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    console.error('Screenshot capture failed:', message);
+    return {
+      success: false,
+      error: message,
+    };
+  }
+}