@umituz/react-native-image 1.1.4 → 1.1.6

package/src/infrastructure/utils/AIImageAnalysisUtils.ts

@@ -0,0 +1,122 @@
+/**
+ * Image Infrastructure - AI Image Analysis
+ * 
+ * Advanced image analysis utilities
+ */
+
+export class AIImageAnalysisUtils {
+  static calculateColorBalance(imageData: Uint8ClampedArray): {
+    redBalance: number;
+    greenBalance: number;
+    blueBalance: number;
+  } {
+    let redSum = 0, greenSum = 0, blueSum = 0;
+    const pixelCount = imageData.length / 4;
+    
+    for (let i = 0; i < imageData.length; i += 4) {
+      redSum += imageData[i];
+      greenSum += imageData[i + 1];
+      blueSum += imageData[i + 2];
+    }
+    
+    const redMean = redSum / pixelCount;
+    const greenMean = greenSum / pixelCount;
+    const blueMean = blueSum / pixelCount;
+    const grayMean = (redMean + greenMean + blueMean) / 3;
+    
+    return {
+      redBalance: (grayMean - redMean) / 255,
+      greenBalance: (grayMean - greenMean) / 255,
+      blueBalance: (grayMean - blueMean) / 255,
+    };
+  }
+
+  static detectNoise(imageData: Uint8ClampedArray): number {
+    let noiseLevel = 0;
+    let sampleCount = 0;
+    
+    for (let i = 0; i < imageData.length - 40; i += 40) {
+      const r1 = imageData[i];
+      const g1 = imageData[i + 1];
+      const b1 = imageData[i + 2];
+      
+      const r2 = imageData[i + 4];
+      const g2 = imageData[i + 5];
+      const b2 = imageData[i + 6];
+      
+      const diff = Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2);
+      noiseLevel += diff;
+      sampleCount++;
+    }
+    
+    return noiseLevel / (sampleCount * 3 * 255);
+  }
+
+  static applySharpening(imageData: Uint8ClampedArray): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(imageData.length);
+    const width = Math.sqrt(imageData.length / 4);
+    const kernel = [
+      0, -1, 0,
+      -1, 5, -1,
+      0, -1, 0
+    ];
+    
+    for (let i = 0; i < imageData.length; i += 4) {
+      const pixelIndex = i / 4;
+      const x = pixelIndex % width;
+      const y = Math.floor(pixelIndex / width);
+      
+      for (let c = 0; c < 3; c++) {
+        let sum = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const nx = x + kx;
+            const ny = y + ky;
+            
+            if (nx >= 0 && nx < width && ny >= 0 && ny < width) {
+              const neighborIndex = (ny * width + nx) * 4 + c;
+              sum += imageData[neighborIndex] * kernel[(ky + 1) * 3 + (kx + 1)];
+            }
+          }
+        }
+        result[i + c] = Math.min(255, Math.max(0, sum));
+      }
+      result[i + 3] = imageData[i + 3];
+    }
+    
+    return result;
+  }
+
+  static applyNoiseReduction(imageData: Uint8ClampedArray): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(imageData.length);
+    const width = Math.sqrt(imageData.length / 4);
+    
+    for (let i = 0; i < imageData.length; i += 4) {
+      const pixelIndex = i / 4;
+      const x = pixelIndex % width;
+      const y = Math.floor(pixelIndex / width);
+      
+      for (let c = 0; c < 3; c++) {
+        const values = [];
+        
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            const nx = x + dx;
+            const ny = y + dy;
+            
+            if (nx >= 0 && nx < width && ny >= 0 && ny < width) {
+              const neighborIndex = (ny * width + nx) * 4 + c;
+              values.push(imageData[neighborIndex]);
+            }
+          }
+        }
+        
+        values.sort((a, b) => a - b);
+        result[i + c] = values[Math.floor(values.length / 2)];
+      }
+      result[i + 3] = imageData[i + 3];
+    }
+    
+    return result;
+  }
+}

package/src/infrastructure/utils/CanvasRenderingService.ts

@@ -0,0 +1,134 @@
+/**
+ * Image Infrastructure - Canvas Rendering Service
+ * 
+ * Canvas-based rendering utilities for annotations and filters
+ */
+
+export class CanvasRenderingService {
+  static renderTextOnCanvas(
+    ctx: CanvasRenderingContext2D,
+    overlay: import('../services/ImageAnnotationService').TextOverlay
+  ): void {
+    ctx.save();
+    
+    ctx.font = `${overlay.fontSize || 16}px ${overlay.fontFamily || 'Arial'}`;
+    ctx.fillStyle = overlay.color || '#000000';
+    
+    if (overlay.backgroundColor) {
+      const metrics = ctx.measureText(overlay.text);
+      const padding = 4;
+      ctx.fillStyle = overlay.backgroundColor;
+      ctx.fillRect(
+        overlay.x - padding,
+        overlay.y - (overlay.fontSize || 16) - padding,
+        metrics.width + padding * 2,
+        (overlay.fontSize || 16) + padding * 2
+      );
+      ctx.fillStyle = overlay.color || '#000000';
+    }
+    
+    if (overlay.rotation) {
+      ctx.translate(overlay.x, overlay.y);
+      ctx.rotate((overlay.rotation * Math.PI) / 180);
+      ctx.fillText(overlay.text, 0, 0);
+    } else {
+      ctx.fillText(overlay.text, overlay.x, overlay.y);
+    }
+    
+    ctx.restore();
+  }
+
+  static renderDrawingOnCanvas(
+    ctx: CanvasRenderingContext2D,
+    drawing: import('../services/ImageAnnotationService').DrawingElement
+  ): void {
+    ctx.save();
+    ctx.strokeStyle = drawing.color || '#000000';
+    ctx.lineWidth = drawing.strokeWidth || 2;
+    
+    if (drawing.fillColor) {
+      ctx.fillStyle = drawing.fillColor;
+    }
+
+    switch (drawing.type) {
+      case 'line':
+        if (drawing.points.length >= 2) {
+          ctx.beginPath();
+          ctx.moveTo(drawing.points[0].x, drawing.points[0].y);
+          for (let i = 1; i < drawing.points.length; i++) {
+            ctx.lineTo(drawing.points[i].x, drawing.points[i].y);
+          }
+          ctx.stroke();
+        }
+        break;
+
+      case 'rectangle':
+        if (drawing.points.length >= 2) {
+          const width = drawing.points[1].x - drawing.points[0].x;
+          const height = drawing.points[1].y - drawing.points[0].y;
+          if (drawing.fillColor) {
+            ctx.fillRect(drawing.points[0].x, drawing.points[0].y, width, height);
+          }
+          ctx.strokeRect(drawing.points[0].x, drawing.points[0].y, width, height);
+        }
+        break;
+
+      case 'circle':
+        if (drawing.points.length >= 2) {
+          const radius = Math.sqrt(
+            Math.pow(drawing.points[1].x - drawing.points[0].x, 2) +
+            Math.pow(drawing.points[1].y - drawing.points[0].y, 2)
+          );
+          ctx.beginPath();
+          ctx.arc(drawing.points[0].x, drawing.points[0].y, radius, 0, 2 * Math.PI);
+          if (drawing.fillColor) {
+            ctx.fill();
+          }
+          ctx.stroke();
+        }
+        break;
+
+      case 'arrow':
+        if (drawing.points.length >= 2) {
+          // Draw line
+          ctx.beginPath();
+          ctx.moveTo(drawing.points[0].x, drawing.points[0].y);
+          ctx.lineTo(drawing.points[1].x, drawing.points[1].y);
+          ctx.stroke();
+          
+          // Draw arrowhead
+          const angle = Math.atan2(
+            drawing.points[1].y - drawing.points[0].y,
+            drawing.points[1].x - drawing.points[0].x
+          );
+          const arrowLength = 10;
+          ctx.beginPath();
+          ctx.moveTo(drawing.points[1].x, drawing.points[1].y);
+          ctx.lineTo(
+            drawing.points[1].x - arrowLength * Math.cos(angle - Math.PI / 6),
+            drawing.points[1].y - arrowLength * Math.sin(angle - Math.PI / 6)
+          );
+          ctx.moveTo(drawing.points[1].x, drawing.points[1].y);
+          ctx.lineTo(
+            drawing.points[1].x - arrowLength * Math.cos(angle + Math.PI / 6),
+            drawing.points[1].y - arrowLength * Math.sin(angle + Math.PI / 6)
+          );
+          ctx.stroke();
+        }
+        break;
+
+      case 'freehand':
+        if (drawing.points.length >= 2) {
+          ctx.beginPath();
+          ctx.moveTo(drawing.points[0].x, drawing.points[0].y);
+          for (let i = 1; i < drawing.points.length; i++) {
+            ctx.lineTo(drawing.points[i].x, drawing.points[i].y);
+          }
+          ctx.stroke();
+        }
+        break;
+    }
+    
+    ctx.restore();
+  }
+}

package/src/infrastructure/utils/FilterEffects.ts

@@ -0,0 +1,51 @@
+/**
+ * Image Infrastructure - Filter Effects
+ * 
+ * Advanced filter effects and color processing
+ */
+
+export class FilterEffects {
+  static applyVintage(imageData: ImageData): ImageData {
+    let data = FilterEffects.applySepia(imageData, 0.8);
+    const { width, height } = imageData;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+        const vignette = 1 - (distance / maxDistance) * 0.7;
+        const i = (y * width + x) * 4;
+        
+        data.data[i] *= vignette;
+        data.data[i + 1] *= vignette;
+        data.data[i + 2] *= vignette;
+      }
+    }
+
+    return data;
+  }
+
+  static applySepia(imageData: ImageData, intensity: number = 1): ImageData {
+    const data = new Uint8ClampedArray(imageData.data);
+    for (let i = 0; i < data.length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+
+      data[i] = Math.min(255, (r * (1 - (0.607 * intensity))) + (g * (0.769 * intensity)) + (b * (0.189 * intensity)));
+      data[i + 1] = Math.min(255, (r * (0.349 * intensity)) + (g * (1 - (0.314 * intensity))) + (b * (0.168 * intensity)));
+      data[i + 2] = Math.min(255, (r * (0.272 * intensity)) + (g * (0.534 * intensity)) + (b * (1 - (0.869 * intensity))));
+    }
+    return FilterEffects.createCanvasImageData(imageData.width, imageData.height, data);
+  }
+
+  static createCanvasImageData(
+    width: number,
+    height: number,
+    data: Uint8ClampedArray
+  ): ImageData {
+    return { data, width, height } as ImageData;
+  }
+}

package/src/infrastructure/utils/ImageErrorHandler.ts

@@ -0,0 +1,40 @@
+/**
+ * Image Infrastructure - Error Handler
+ */
+export class ImageError extends Error {
+    constructor(
+        message: string,
+        public readonly code: string,
+        public readonly operation?: string
+    ) {
+        super(message);
+        this.name = 'ImageError';
+    }
+}
+
+export const IMAGE_ERROR_CODES = {
+    INVALID_URI: 'INVALID_URI',
+    INVALID_DIMENSIONS: 'INVALID_DIMENSIONS',
+    INVALID_QUALITY: 'INVALID_QUALITY',
+    MANIPULATION_FAILED: 'MANIPULATION_FAILED',
+    CONVERSION_FAILED: 'CONVERSION_FAILED',
+    STORAGE_FAILED: 'STORAGE_FAILED',
+    VALIDATION_ERROR: 'VALIDATION_ERROR',
+} as const;
+
+export type ImageErrorCode = typeof IMAGE_ERROR_CODES[keyof typeof IMAGE_ERROR_CODES];
+
+export class ImageErrorHandler {
+    static createError(message: string, code: ImageErrorCode, operation?: string): ImageError {
+        return new ImageError(message, code, operation);
+    }
+
+    static handleUnknownError(error: unknown, operation?: string): ImageError {
+        if (error instanceof ImageError) {
+            return error;
+        }
+        
+        const message = error instanceof Error ? error.message : 'Unknown error occurred';
+        return new ImageError(message, IMAGE_ERROR_CODES.MANIPULATION_FAILED, operation);
+    }
+}

package/src/infrastructure/utils/ImageQualityPresets.ts

@@ -0,0 +1,110 @@
+/**
+ * Image Infrastructure - Quality Presets
+ * 
+ * Predefined quality settings for different use cases
+ */
+
+import type { SaveFormat } from '../../domain/entities/ImageTypes';
+import { IMAGE_CONSTANTS } from '../../domain/entities/ImageConstants';
+
+export interface QualityPreset {
+  format: SaveFormat;
+  quality: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  description: string;
+}
+
+export interface QualityPresets {
+  web: QualityPreset;
+  mobile: QualityPreset;
+  print: QualityPreset;
+  thumbnail: QualityPreset;
+  preview: QualityPreset;
+  archive: QualityPreset;
+}
+
+export const IMAGE_QUALITY_PRESETS: QualityPresets = {
+  web: {
+    format: 'jpeg',
+    quality: 0.8,
+    maxWidth: 1920,
+    maxHeight: 1080,
+    description: 'Optimized for web use with good balance of quality and size',
+  },
+  mobile: {
+    format: 'jpeg',
+    quality: 0.7,
+    maxWidth: 1080,
+    maxHeight: 1920,
+    description: 'Optimized for mobile devices with smaller file size',
+  },
+  print: {
+    format: 'png',
+    quality: 1.0,
+    maxWidth: 3000,
+    maxHeight: 3000,
+    description: 'High quality for printing with maximum detail',
+  },
+  thumbnail: {
+    format: 'jpeg',
+    quality: 0.6,
+    maxWidth: IMAGE_CONSTANTS.thumbnailSize,
+    maxHeight: IMAGE_CONSTANTS.thumbnailSize,
+    description: 'Small thumbnail for preview use',
+  },
+  preview: {
+    format: 'jpeg',
+    quality: 0.5,
+    maxWidth: 800,
+    maxHeight: 600,
+    description: 'Quick preview with very small file size',
+  },
+  archive: {
+    format: 'png',
+    quality: 0.9,
+    description: 'High quality archival storage with lossless compression',
+  },
+};
+
+export class ImageQualityPresetService {
+  static getPreset(name: keyof QualityPresets): QualityPreset {
+    return IMAGE_QUALITY_PRESETS[name];
+  }
+
+  static getAllPresets(): QualityPresets {
+    return IMAGE_QUALITY_PRESETS;
+  }
+
+  static getCustomPreset(options: {
+    format?: SaveFormat;
+    quality?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+  }): QualityPreset {
+    return {
+      format: options.format || 'jpeg',
+      quality: options.quality || IMAGE_CONSTANTS.defaultQuality,
+      maxWidth: options.maxWidth,
+      maxHeight: options.maxHeight,
+      description: 'Custom quality preset',
+    };
+  }
+
+  static optimizeForUseCase(
+    useCase: 'web' | 'mobile' | 'print' | 'thumbnail' | 'preview' | 'archive',
+    customOptions?: Partial<QualityPreset>
+  ): QualityPreset {
+    const preset = IMAGE_QUALITY_PRESETS[useCase];
+    
+    if (!customOptions) {
+      return preset;
+    }
+
+    return {
+      ...preset,
+      ...customOptions,
+      description: `${preset.description} (modified)`,
+    };
+  }
+}

package/src/infrastructure/utils/ImageValidator.ts

@@ -0,0 +1,59 @@
+/**
+ * Image Infrastructure - Validation Utilities
+ */
+import { ImageDimensions } from '../../domain/entities/ImageTypes';
+
+export interface ValidationResult {
+    isValid: boolean;
+    error?: string;
+}
+
+export class ImageValidator {
+    static validateUri(uri: string): ValidationResult {
+        if (!uri || typeof uri !== 'string') {
+            return { isValid: false, error: 'URI is required and must be a string' };
+        }
+        
+        if (!uri.startsWith('file://') && 
+            !uri.startsWith('content://') && 
+            !uri.startsWith('http://') && 
+            !uri.startsWith('https://') && 
+            !uri.startsWith('data:image/')) {
+            return { isValid: false, error: 'Invalid URI format' };
+        }
+        
+        return { isValid: true };
+    }
+
+    static validateDimensions(dimensions: Partial<ImageDimensions>): ValidationResult {
+        if (dimensions.width !== undefined) {
+            if (typeof dimensions.width !== 'number' || dimensions.width <= 0) {
+                return { isValid: false, error: 'Width must be a positive number' };
+            }
+        }
+        
+        if (dimensions.height !== undefined) {
+            if (typeof dimensions.height !== 'number' || dimensions.height <= 0) {
+                return { isValid: false, error: 'Height must be a positive number' };
+            }
+        }
+        
+        return { isValid: true };
+    }
+
+    static validateQuality(quality: number): ValidationResult {
+        if (typeof quality !== 'number' || quality < 0 || quality > 1) {
+            return { isValid: false, error: 'Quality must be a number between 0 and 1' };
+        }
+        
+        return { isValid: true };
+    }
+
+    static validateRotation(degrees: number): ValidationResult {
+        if (typeof degrees !== 'number') {
+            return { isValid: false, error: 'Degrees must be a number' };
+        }
+        
+        return { isValid: true };
+    }
+}

package/src/presentation/components/GalleryHeader.tsx

@@ -1,9 +1,8 @@
 /**
- * GalleryHeader Component
- * Header for ImageGallery with optional edit button and close button
+ * Presentation - Gallery Header Component
  * 
- * This component should be implemented by the consumer app
- * using their own design system and safe area handling.
+ * NOTE: This component should be implemented by consumer app
+ * using their design system and safe area handling
  */
 
 import React from 'react';

package/src/presentation/components/ImageGallery.tsx

@@ -1,14 +1,12 @@
 /**
- * Image Gallery Component
+ * Presentation - Image Gallery Component
  * 
- * A wrapper around react-native-image-viewing that provides
- * theme integration, standard configuration, and optional editing.
+ * Wrapper around react-native-image-viewing with theme integration
  */
 
 import React, { useCallback } from 'react';
 import ImageViewing from 'react-native-image-viewing';
-import * as ImageManipulator from 'expo-image-manipulator';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+// import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
 import { GalleryHeader } from './GalleryHeader';
 
@@ -33,14 +31,14 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     onImageChange,
     enableEditing = false,
 }) => {
-    const tokens = useAppDesignTokens();
+    // const tokens = useAppDesignTokens();
     const [currentIndex, setCurrentIndex] = React.useState(index);
 
     React.useEffect(() => {
         setCurrentIndex(index);
     }, [index]);
 
-    const bg = backgroundColor || tokens.colors.backgroundPrimary;
+    const bg = backgroundColor || '#000000';
 
     const viewerImages = React.useMemo(
         () => images.map((img) => ({ uri: img.uri })),
@@ -52,20 +50,9 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         if (!currentImage || !onImageChange) return;
 
         try {
-            const result = await ImageManipulator.manipulateAsync(
-                currentImage.uri,
-                [],
-                {
-                    compress: 1,
-                    format: ImageManipulator.SaveFormat.JPEG,
-                }
-            );
-
-            if (result.uri) {
-                await onImageChange(result.uri, currentIndex);
-            }
+            await onImageChange(currentImage.uri, currentIndex);
         } catch (error) {
-            // Silent fail
+            // Consumer should handle editing logic
         }
     }, [images, currentIndex, onImageChange]);
 

package/src/presentation/hooks/useImage.ts

@@ -1,22 +1,52 @@
 /**
- * useImage Hook
+ * Presentation - Image Hook
  * 
- * Aggregator hook that combines transformation and conversion capabilities.
- * Kept simple and modular.
+ * Aggregator hook combining transformation and conversion capabilities
  */
 
 import { useImageTransform } from './useImageTransform';
 import { useImageConversion } from './useImageConversion';
+import { useImageFilter } from './useImageFilter';
+import { useImageBatch } from './useImageBatch';
+import { useImageAIEnhancement } from './useImageAIEnhancement';
+import { useImageAnnotation } from './useImageAnnotation';
+import { useImageMetadata } from './useImageMetadata';
 
 export const useImage = () => {
   const transform = useImageTransform();
   const conversion = useImageConversion();
+  const filter = useImageFilter();
+  const batch = useImageBatch();
+  const aiEnhancement = useImageAIEnhancement();
+  const annotation = useImageAnnotation();
+  const metadata = useImageMetadata();
 
   return {
+    // Basic operations
     ...transform,
     ...conversion,
+    // Advanced operations
+    ...filter,
+    ...batch,
+    ...aiEnhancement,
+    ...annotation,
+    ...metadata,
     // Combined state
-    isProcessing: transform.isTransforming || conversion.isConverting,
-    error: transform.transformError || conversion.conversionError,
+    isProcessing: 
+      transform.isTransforming || 
+      conversion.isConverting || 
+      filter.isFiltering || 
+      batch.isBatchProcessing || 
+      aiEnhancement.isEnhancing || 
+      annotation.isAnnotating || 
+      metadata.isExtracting,
+    error: 
+      transform.transformError || 
+      conversion.conversionError || 
+      filter.filterError || 
+      batch.batchError || 
+      aiEnhancement.enhancementError || 
+      annotation.annotationError || 
+      metadata.metadataError,
   };
 };

package/src/presentation/hooks/useImageAIEnhancement.ts

@@ -0,0 +1,33 @@
+/**
+ * Presentation - Image AI Enhancement Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageAIEnhancementService, type AutoEnhancementOptions, type EnhancementResult } from '../../infrastructure/services/ImageAIEnhancementService';
+import { ImageSpecializedEnhancementService } from '../../infrastructure/services/ImageSpecializedEnhancementService';
+
+export const useImageAIEnhancement = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const autoEnhance = useCallback((uri: string, options?: AutoEnhancementOptions) =>
+        execute(() => ImageAIEnhancementService.autoEnhance(uri, options), 'Failed to auto enhance'), [execute]);
+
+    const enhancePortrait = useCallback((uri: string) =>
+        execute(() => ImageSpecializedEnhancementService.enhancePortrait(uri), 'Failed to enhance portrait'), [execute]);
+
+    const enhanceLandscape = useCallback((uri: string) =>
+        execute(() => ImageSpecializedEnhancementService.enhanceLandscape(uri), 'Failed to enhance landscape'), [execute]);
+
+    const analyzeImage = useCallback((uri: string) =>
+        execute(() => ImageAIEnhancementService.analyzeImage(uri), 'Failed to analyze image'), [execute]);
+
+    return {
+        autoEnhance,
+        enhancePortrait,
+        enhanceLandscape,
+        analyzeImage,
+        isEnhancing: isProcessing,
+        enhancementError: error,
+    };
+};