@umituz/react-native-image 1.2.5 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-image",
-  "version": "1.2.5",
+  "version": "1.3.2",
   "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,12 +29,13 @@
     "type": "git",
     "url": "https://github.com/umituz/react-native-image"
   },
+  "dependencies": {
+    "expo-image-manipulator": ">=12.0.0"
+  },
   "peerDependencies": {
     "@umituz/react-native-animation": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-icons": "latest",
+    "@umituz/react-native-design-system": "^2.1.0",
     "expo-image": ">=1.0.0",
-    "expo-image-manipulator": ">=12.0.0",
     "expo-media-library": ">=15.0.0",
     "expo-sharing": ">=12.0.0",
     "react": ">=18.2.0",
@@ -44,8 +45,7 @@
   },
   "devDependencies": {
     "@umituz/react-native-animation": "latest",
-    "@umituz/react-native-design-system": "latest",
-    "@umituz/react-native-icons": "latest",
+    "@umituz/react-native-design-system": "^2.1.0",
     "expo-image": "~2.0.0",
     "expo-image-manipulator": "~13.0.0",
     "expo-media-library": "~17.0.0",

package/src/index.ts

@@ -1,11 +1,11 @@
 /**
  * @umituz/react-native-image - Public API
  *
- * Image manipulation and viewing for React Native apps
+ * React Native image manipulation and viewing
  * Resize, crop, rotate, flip, compress, gallery viewer
  *
  * Usage:
- *   import { useImage, ImageGallery, ImageService, ImageUtils } from '@umituz/react-native-image';
+ *   import { useImage, ImageGallery, ImageUtils } from '@umituz/react-native-image';
  */
 
 // =============================================================================
@@ -35,11 +35,10 @@ export { IMAGE_CONSTANTS } from './domain/entities/ImageConstants';
 export { ImageUtils } from './domain/utils/ImageUtils';
 
 // =============================================================================
-// DOMAIN LAYER - Filter Types
+// DOMAIN LAYER - Filter Types (React Native Compatible Only)
 // =============================================================================
 
 export type {
-  ImageFilter,
   ImageFilterOptions,
   ImageColorAdjustment,
   ImageQualityMetrics,
@@ -52,7 +51,7 @@ export {
 } from './domain/entities/ImageFilterTypes';
 
 // =============================================================================
-// INFRASTRUCTURE LAYER - Services
+// INFRASTRUCTURE LAYER - React Native Compatible Services
 // =============================================================================
 
 export { ImageTransformService } from './infrastructure/services/ImageTransformService';
@@ -64,57 +63,29 @@ export {
   type ImageViewerConfig,
 } from './infrastructure/services/ImageViewerService';
 
-// =============================================================================
-// INFRASTRUCTURE LAYER - Advanced Services
-// =============================================================================
-
-export { ImageFilterService } from './infrastructure/services/ImageFilterService';
 export { ImageBatchService, type BatchOperation, type BatchProcessingOptions, type BatchProcessingResult } from './infrastructure/services/ImageBatchService';
 export { ImageAIEnhancementService, type AutoEnhancementOptions, type EnhancementResult } from './infrastructure/services/ImageAIEnhancementService';
-export { ImageAnnotationService, type ImageAnnotation, type TextOverlay, type DrawingElement, type WatermarkOptions } from './infrastructure/services/ImageAnnotationService';
 export { ImageMetadataService, type ImageMetadataExtractionOptions } from './infrastructure/services/ImageMetadataService';
 export { ImageQualityPresetService, type QualityPreset, type QualityPresets, IMAGE_QUALITY_PRESETS } from './infrastructure/utils/ImageQualityPresets';
 export { ImageSpecializedEnhancementService } from './infrastructure/services/ImageSpecializedEnhancementService';
 
 // =============================================================================
-// PRESENTATION LAYER - Components & Hooks
+// PRESENTATION LAYER - React Native Components & Hooks
 // =============================================================================
 
 export { ImageGallery, type ImageGalleryProps } from './presentation/components/ImageGallery';
 
-// =============================================================================
-// PRESENTATION LAYER - Core Hooks
-// =============================================================================
-
 export { useImage } from './presentation/hooks/useImage';
 export { useImageTransform } from './presentation/hooks/useImageTransform';
 export { useImageConversion } from './presentation/hooks/useImageConversion';
-// =============================================================================
-// PRESENTATION LAYER - Editor Components & Hooks
-// =============================================================================
-
-export { useImageEditor } from './presentation/hooks/useImageEditor';
-export { useEditorTools } from './presentation/hooks/useEditorTools';
-export { Editor } from './presentation/components/Editor';
-export { EditorCanvas } from './presentation/components/EditorCanvas';
-export { EditorToolbar } from './presentation/components/EditorToolbar';
-export { EditorPanel } from './presentation/components/EditorPanel';
-export { CropComponent } from './presentation/components/CropComponent';
-export { FilterSlider } from './presentation/components/FilterSlider';
 
 export {
   useImageGallery,
   type UseImageGalleryReturn,
 } from './presentation/hooks/useImageGallery';
 
-// =============================================================================
-// PRESENTATION LAYER - Advanced Hooks
-// =============================================================================
-
-export { useImageFilter } from './presentation/hooks/useImageFilter';
 export { useImageBatch } from './presentation/hooks/useImageBatch';
 export { useImageAIEnhancement } from './presentation/hooks/useImageAIEnhancement';
-export { useImageAnnotation } from './presentation/hooks/useImageAnnotation';
 export { useImageMetadata } from './presentation/hooks/useImageMetadata';
 
 

package/src/infrastructure/services/ImageAnnotationService.ts

@@ -1,189 +0,0 @@
-/**
- * Image Infrastructure - Annotation Service
- * 
- * Handles text overlay, drawing, and annotation features
- */
-
-import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
-import { ImageValidator } from '../utils/ImageValidator';
-import { ImageErrorHandler, IMAGE_ERROR_CODES } from '../utils/ImageErrorHandler';
-import { CanvasRenderingService } from '../utils/CanvasRenderingService';
-
-export interface TextOverlay {
-  text: string;
-  x: number;
-  y: number;
-  fontSize?: number;
-  fontFamily?: string;
-  color?: string;
-  backgroundColor?: string;
-  maxWidth?: number;
-  rotation?: number;
-}
-
-export interface DrawingElement {
-  type: 'line' | 'rectangle' | 'circle' | 'arrow' | 'freehand';
-  points: Array<{ x: number; y: number }>;
-  color?: string;
-  strokeWidth?: number;
-  fillColor?: string;
-}
-
-export interface WatermarkOptions {
-  text?: string;
-  imageUri?: string;
-  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
-  opacity?: number;
-  size?: number;
-  margin?: number;
-}
-
-export interface ImageAnnotation {
-  textOverlays?: TextOverlay[];
-  drawings?: DrawingElement[];
-  watermark?: WatermarkOptions;
-}
-
-export class ImageAnnotationService {
-  private static getPositionCoordinates(
-    position: string,
-    imageWidth: number,
-    imageHeight: number,
-    elementWidth: number,
-    elementHeight: number,
-    margin: number = 10
-  ): { x: number; y: number } {
-    switch (position) {
-      case 'top-left':
-        return { x: margin, y: margin };
-      case 'top-right':
-        return { x: imageWidth - elementWidth - margin, y: margin };
-      case 'bottom-left':
-        return { x: margin, y: imageHeight - elementHeight - margin };
-      case 'bottom-right':
-        return { x: imageWidth - elementWidth - margin, y: imageHeight - elementHeight - margin };
-      case 'center':
-        return { 
-          x: (imageWidth - elementWidth) / 2, 
-          y: (imageHeight - elementHeight) / 2 
-        };
-      default:
-        return { x: margin, y: margin };
-    }
-  }
-
-  static async addTextOverlay(
-    uri: string,
-    overlay: TextOverlay
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'addTextOverlay');
-      }
-
-      // In a real implementation, we would:
-      // 1. Load image into canvas
-      // 2. Apply text overlay using canvas rendering
-      // 3. Export canvas to new URI
-
-      return {
-        uri, // Would be processed URI
-        width: 0,
-        height: 0,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'addTextOverlay');
-    }
-  }
-
-  static async addDrawingElements(
-    uri: string,
-    elements: DrawingElement[]
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'addDrawingElements');
-      }
-
-      // Mock implementation
-      return {
-        uri,
-        width: 0,
-        height: 0,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'addDrawingElements');
-    }
-  }
-
-  static async addWatermark(
-    uri: string,
-    options: WatermarkOptions
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'addWatermark');
-      }
-
-      if (!options.text && !options.imageUri) {
-        throw ImageErrorHandler.createError(
-          'Either text or imageUri must be provided for watermark',
-          IMAGE_ERROR_CODES.VALIDATION_ERROR,
-          'addWatermark'
-        );
-      }
-
-      // Mock implementation
-      return {
-        uri,
-        width: 0,
-        height: 0,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'addWatermark');
-    }
-  }
-
-  static async applyAnnotation(
-    uri: string,
-    annotation: ImageAnnotation
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'applyAnnotation');
-      }
-
-      // Apply all annotations in order
-      let resultUri = uri;
-
-      if (annotation.textOverlays) {
-        for (const overlay of annotation.textOverlays) {
-          const result = await ImageAnnotationService.addTextOverlay(resultUri, overlay);
-          resultUri = result.uri;
-        }
-      }
-
-      if (annotation.drawings) {
-        const result = await ImageAnnotationService.addDrawingElements(resultUri, annotation.drawings);
-        resultUri = result.uri;
-      }
-
-      if (annotation.watermark) {
-        const result = await ImageAnnotationService.addWatermark(resultUri, annotation.watermark);
-        resultUri = result.uri;
-      }
-
-      return {
-        uri: resultUri,
-        width: 0,
-        height: 0,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'applyAnnotation');
-    }
-  }
-}

package/src/infrastructure/services/ImageFilterService.ts

@@ -1,168 +0,0 @@
-/**
- * Image Infrastructure - Filter Service
- * 
- * Advanced image filtering and effects using canvas and image processing
- */
-
-import type {
-  ImageFilter,
-  ImageFilterType,
-  ImageColorAdjustment,
-  ImageQualityMetrics,
-  ImageColorPalette,
-} from '../../domain/entities/ImageFilterTypes';
-import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
-import { ImageValidator } from '../utils/ImageValidator';
-import { ImageErrorHandler, IMAGE_ERROR_CODES } from '../utils/ImageErrorHandler';
-import { FilterEffects } from '../utils/FilterEffects';
-
-export class ImageFilterService {
-  private static createCanvasImageData(
-    width: number,
-    height: number,
-    data: Uint8ClampedArray
-  ): ImageData {
-    return { data, width, height } as ImageData;
-  }
-
-  private static applyBrightness(
-    imageData: ImageData,
-    intensity: number
-  ): ImageData {
-    const data = new Uint8ClampedArray(imageData.data);
-    for (let i = 0; i < data.length; i += 4) {
-      data[i] = Math.min(255, Math.max(0, data[i] + intensity * 255));
-      data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + intensity * 255));
-      data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + intensity * 255));
-    }
-    return ImageFilterService.createCanvasImageData(imageData.width, imageData.height, data);
-  }
-
-  private static applyContrast(
-    imageData: ImageData,
-    intensity: number
-  ): ImageData {
-    const data = new Uint8ClampedArray(imageData.data);
-    const factor = (259 * (intensity * 255 + 255)) / (255 * (259 - intensity * 255));
-    
-    for (let i = 0; i < data.length; i += 4) {
-      data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
-      data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
-      data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
-    }
-    return ImageFilterService.createCanvasImageData(imageData.width, imageData.height, data);
-  }
-
-  private static applyGrayscale(imageData: ImageData): ImageData {
-    const data = new Uint8ClampedArray(imageData.data);
-    for (let i = 0; i < data.length; i += 4) {
-      const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
-      data[i] = gray;
-      data[i + 1] = gray;
-      data[i + 2] = gray;
-    }
-    return ImageFilterService.createCanvasImageData(imageData.width, imageData.height, data);
-  }
-
-  private static applySepia(imageData: ImageData, intensity: number = 1): ImageData {
-    return FilterEffects.applySepia(imageData, intensity);
-  }
-
-
-
-  static async applyFilter(
-    uri: string,
-    filter: ImageFilter
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'applyFilter');
-      }
-
-      // In a real implementation, we would:
-      // 1. Load the image into a canvas
-      // 2. Apply the filter to the pixel data
-      // 3. Export the canvas to a new URI
-      
-      // For now, return a mock implementation
-      return {
-        uri, // Would be the processed URI
-        width: 0,
-        height: 0,
-        base64: undefined,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'applyFilter');
-    }
-  }
-
-  static async applyColorAdjustment(
-    uri: string,
-    adjustment: ImageColorAdjustment
-  ): Promise<ImageManipulationResult> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'applyColorAdjustment');
-      }
-
-      // Apply brightness, contrast, saturation adjustments
-      return {
-        uri,
-        width: 0,
-        height: 0,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'applyColorAdjustment');
-    }
-  }
-
-  static async analyzeQuality(uri: string): Promise<ImageQualityMetrics> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'analyzeQuality');
-      }
-
-      // Mock implementation - would analyze actual image data
-      return {
-        sharpness: Math.random() * 100,
-        brightness: Math.random() * 100,
-        contrast: Math.random() * 100,
-        colorfulness: Math.random() * 100,
-        overallQuality: Math.random() * 100,
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'analyzeQuality');
-    }
-  }
-
-  static async extractColorPalette(
-    uri: string,
-    colorCount: number = 5
-  ): Promise<ImageColorPalette> {
-    try {
-      const uriValidation = ImageValidator.validateUri(uri);
-      if (!uriValidation.isValid) {
-        throw ImageErrorHandler.createError(uriValidation.error!, IMAGE_ERROR_CODES.INVALID_URI, 'extractColorPalette');
-      }
-
-      // Mock implementation - would extract actual colors
-      const colors = Array.from({ length: colorCount }, () => 
-        `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`
-      );
-
-      return {
-        dominant: colors.slice(0, 3),
-        palette: colors.map((color, index) => ({
-          color,
-          percentage: Math.random() * 30 + 10,
-          population: Math.floor(Math.random() * 1000) + 100,
-        })),
-      };
-    } catch (error) {
-      throw ImageErrorHandler.handleUnknownError(error, 'extractColorPalette');
-    }
-  }
-}

package/src/infrastructure/utils/CanvasRenderingService.ts

@@ -1,134 +0,0 @@
-/**
- * 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();
-  }
-}