@umituz/react-native-image 1.1.5 → 1.2.1

package/src/presentation/components/GalleryHeader.tsx

@@ -1,32 +1,66 @@
 /**
  * Presentation - Gallery Header Component
  * 
- * NOTE: This component should be implemented by consumer app
- * using their design system and safe area handling
+ * High-performance, premium header for the Image Gallery.
+ * Uses design system tokens and handles safe areas.
  */
 
 import React from 'react';
-import { View, TouchableOpacity, StyleSheet, Text } from 'react-native';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText } from '@umituz/react-native-design-system-atoms';
 
 interface GalleryHeaderProps {
     onEdit?: () => void;
     onClose: () => void;
+    title?: string;
 }
 
-export function GalleryHeader({ onEdit, onClose }: GalleryHeaderProps) {
+export function GalleryHeader({ onEdit, onClose, title }: GalleryHeaderProps) {
+    const insets = useSafeAreaInsets();
+    const tokens = useAppDesignTokens();
+
     return (
-        <View style={styles.container}>
-            {onEdit ? (
-                <TouchableOpacity style={styles.button} onPress={onEdit}>
-                    <Text style={styles.buttonText}>Edit</Text>
-                </TouchableOpacity>
-            ) : (
-                <View style={styles.spacer} />
-            )}
+        <View style={[
+            styles.container,
+            {
+                paddingTop: Math.max(insets.top, 24),
+                backgroundColor: 'rgba(0, 0, 0, 0.4)'
+            }
+        ]}>
+            <View style={styles.leftSection}>
+                {onEdit ? (
+                    <TouchableOpacity
+                        style={[styles.actionButton, { backgroundColor: 'rgba(255, 255, 255, 0.15)' }]}
+                        onPress={onEdit}
+                        activeOpacity={0.7}
+                    >
+                        <AtomicText style={styles.buttonText}>Edit</AtomicText>
+                    </TouchableOpacity>
+                ) : (
+                    <View style={styles.spacer} />
+                )}
+            </View>
+
+            <View style={styles.centerSection}>
+                {title ? (
+                    <AtomicText type="bodyMedium" style={styles.titleText}>
+                        {title}
+                    </AtomicText>
+                ) : null}
+            </View>
 
-            <TouchableOpacity style={styles.button} onPress={onClose}>
-                <Text style={styles.buttonText}>✕</Text>
-            </TouchableOpacity>
+            <View style={styles.rightSection}>
+                <TouchableOpacity
+                    style={[styles.closeButton, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]}
+                    onPress={onClose}
+                    activeOpacity={0.7}
+                    hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+                >
+                    <AtomicText style={styles.closeIcon}>✕</AtomicText>
+                </TouchableOpacity>
+            </View>
         </View>
     );
 }
@@ -37,28 +71,56 @@ const styles = StyleSheet.create({
         top: 0,
         left: 0,
         right: 0,
-        paddingTop: 48,
-        paddingHorizontal: 16,
+        paddingHorizontal: 20,
         paddingBottom: 16,
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        zIndex: 1000,
+    },
+    leftSection: {
+        flex: 1,
+        alignItems: 'flex-start',
+    },
+    centerSection: {
+        flex: 2,
+        alignItems: 'center',
+    },
+    rightSection: {
+        flex: 1,
+        alignItems: 'flex-end',
     },
     spacer: {
-        width: 48,
+        width: 44,
+        height: 44,
     },
-    button: {
-        flexDirection: 'row',
+    actionButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButton: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        justifyContent: 'center',
         alignItems: 'center',
-        gap: 8,
-        padding: 12,
-        borderRadius: 8,
-        backgroundColor: 'rgba(255, 255, 255, 0.1)',
     },
     buttonText: {
         fontSize: 14,
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    closeIcon: {
+        fontSize: 28,
+        color: '#FFFFFF',
+        fontWeight: '300',
+    },
+    titleText: {
         color: '#FFFFFF',
         fontWeight: '600',
+        textAlign: 'center',
     },
 });

package/src/presentation/components/ImageGallery.tsx

@@ -1,15 +1,19 @@
 /**
  * Presentation - Image Gallery Component
  * 
- * Wrapper around react-native-image-viewing with theme integration
+ * High-performance, premium image gallery using expo-image.
+ * Replaces slow standard image components for instant loading.
  */
 
-import React, { useCallback } from 'react';
-import ImageViewing from 'react-native-image-viewing';
-// import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import { Modal, View, StyleSheet, FlatList, Dimensions, TouchableOpacity } from 'react-native';
+import { Image } from 'expo-image';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
 import { GalleryHeader } from './GalleryHeader';
 
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
 export interface ImageGalleryProps extends ImageGalleryOptions {
     images: ImageViewerItem[];
     visible: boolean;
@@ -17,6 +21,7 @@ export interface ImageGalleryProps extends ImageGalleryOptions {
     index?: number;
     onImageChange?: (uri: string, index: number) => void | Promise<void>;
     enableEditing?: boolean;
+    title?: string;
 }
 
 export const ImageGallery: React.FC<ImageGalleryProps> = ({
@@ -24,66 +29,110 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
     visible,
     onDismiss,
     index = 0,
-    backgroundColor,
-    swipeToCloseEnabled = true,
-    doubleTapToZoomEnabled = true,
+    backgroundColor = '#000000',
     onIndexChange,
     onImageChange,
     enableEditing = false,
+    title,
 }) => {
-    // const tokens = useAppDesignTokens();
-    const [currentIndex, setCurrentIndex] = React.useState(index);
-
-    React.useEffect(() => {
-        setCurrentIndex(index);
-    }, [index]);
-
-    const bg = backgroundColor || '#000000';
+    const insets = useSafeAreaInsets();
+    const [currentIndex, setCurrentIndex] = useState(index);
 
-    const viewerImages = React.useMemo(
-        () => images.map((img) => ({ uri: img.uri })),
-        [images]
-    );
+    useEffect(() => {
+        if (visible) setCurrentIndex(index);
+    }, [visible, index]);
 
     const handleEdit = useCallback(async () => {
         const currentImage = images[currentIndex];
         if (!currentImage || !onImageChange) return;
-
-        try {
-            await onImageChange(currentImage.uri, currentIndex);
-        } catch (error) {
-            // Consumer should handle editing logic
-        }
+        await onImageChange(currentImage.uri, currentIndex);
     }, [images, currentIndex, onImageChange]);
 
-    const handleIndexChange = useCallback(
-        (newIndex: number) => {
-            setCurrentIndex(newIndex);
-            onIndexChange?.(newIndex);
-        },
-        [onIndexChange]
-    );
+    const handleScroll = useCallback((event: any) => {
+        const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+        if (nextIndex !== currentIndex) {
+            setCurrentIndex(nextIndex);
+            onIndexChange?.(nextIndex);
+        }
+    }, [currentIndex, onIndexChange]);
 
-    const headerComponent = useCallback(() => {
-        return (
-            <GalleryHeader
-                onEdit={enableEditing ? handleEdit : undefined}
-                onClose={onDismiss}
+    const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
+        <View style={styles.imageWrapper}>
+            <Image
+                source={{ uri: item.uri }}
+                style={styles.fullImage}
+                contentFit="contain"
+                transition={200}
+                cachePolicy="memory-disk"
             />
-        );
-    }, [enableEditing, handleEdit, onDismiss]);
+        </View>
+    ), []);
+
+    if (!visible && !currentIndex) return null;
 
     return (
-        <ImageViewing
-            images={viewerImages}
-            imageIndex={currentIndex}
+        <Modal
             visible={visible}
+            transparent
+            animationType="fade"
             onRequestClose={onDismiss}
-            onImageIndexChange={handleIndexChange}
-            backgroundColor={bg}
-            swipeToCloseEnabled={swipeToCloseEnabled}
-            doubleTapToZoomEnabled={doubleTapToZoomEnabled}
-            HeaderComponent={headerComponent}
-        />
+            statusBarTranslucent
+        >
+            <View style={[styles.container, { backgroundColor }]}>
+                <GalleryHeader
+                    onClose={onDismiss}
+                    onEdit={enableEditing ? handleEdit : undefined}
+                    title={title || `${currentIndex + 1} / ${images.length}`}
+                />
+
+                <FlatList
+                    data={images}
+                    renderItem={renderItem}
+                    horizontal
+                    pagingEnabled
+                    showsHorizontalScrollIndicator={false}
+                    initialScrollIndex={index}
+                    getItemLayout={(_, i) => ({
+                        length: SCREEN_WIDTH,
+                        offset: SCREEN_WIDTH * i,
+                        index: i,
+                    })}
+                    onScroll={handleScroll}
+                    scrollEventThrottle={16}
+                    keyExtractor={(item, i) => `${item.uri}-${i}`}
+                    style={styles.list}
+                />
+
+                <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 20) }]}>
+                    {/* Potential for thumbnail strip or captions in future */}
+                </View>
+            </View>
+        </Modal>
     );
 };
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    list: {
+        flex: 1,
+    },
+    imageWrapper: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullImage: {
+        width: '100%',
+        height: '100%',
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    }
+});

package/src/presentation/hooks/useEditorTools.ts

@@ -0,0 +1,188 @@
+/**
+ * Presentation - Editor Tool Hook
+ * 
+ * Manages individual editor tools and their states
+ */
+
+import { useState, useCallback } from 'react';
+import { DrawingEngine, type DrawingPath, type DrawingConfig } from '../../infrastructure/utils/DrawingEngine';
+import { CropTool, type CropConfig } from '../../infrastructure/utils/CropTool';
+import { TextEditor, type TextFormatting } from '../../infrastructure/utils/TextEditor';
+import { ShapeRenderer, type ShapeStyle } from '../../infrastructure/utils/ShapeRenderer';
+
+interface ToolState {
+    isDrawing: boolean;
+    currentPath: DrawingPath;
+    startPoint?: { x: number; y: number };
+    currentTool: string;
+}
+
+interface UseEditorToolsOptions {
+    onStateChange?: (state: any) => void;
+    canvas?: HTMLCanvasElement | null;
+}
+
+export function useEditorTools({ onStateChange, canvas }: UseEditorToolsOptions = {}) {
+    const [toolState, setToolState] = useState<ToolState>({
+        isDrawing: false,
+        currentPath: [],
+        currentTool: 'move',
+    });
+
+    const [drawingConfig, setDrawingConfig] = useState<DrawingConfig>({
+        color: '#000000',
+        size: 5,
+        opacity: 1,
+        style: 'normal',
+        smoothing: true,
+    });
+
+    const [cropConfig, setCropConfig] = useState<CropConfig>({
+        aspectRatio: undefined,
+        lockAspectRatio: false,
+        showGrid: true,
+    });
+
+    const [textFormatting, setTextFormatting] = useState<TextFormatting>({
+        fontSize: 16,
+        fontFamily: 'Arial',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        color: '#000000',
+        textAlign: 'left',
+        opacity: 1,
+    });
+
+    const setTool = useCallback((tool: string) => {
+        const newState = { ...toolState, currentTool: tool };
+        setToolState(newState);
+        onStateChange?.(newState);
+    }, [toolState, onStateChange]);
+
+    const startDrawing = useCallback((point: { x: number; y: number }) => {
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const newState = {
+            ...toolState,
+            isDrawing: true,
+            startPoint: point,
+            currentPath: [point],
+        };
+        setToolState(newState);
+    }, [toolState, canvas]);
+
+    const draw = useCallback((point: { x: number; y: number }) => {
+        if (!toolState.isDrawing || !canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const newPath = [...toolState.currentPath, point];
+
+        setToolState(prev => ({
+            ...prev,
+            currentPath: newPath,
+        }));
+
+        // Real-time drawing feedback
+        const tempPath = [...toolState.currentPath, point];
+        DrawingEngine.drawStroke(ctx, tempPath, drawingConfig);
+    }, [toolState.isDrawing, toolState.currentPath, drawingConfig, canvas]);
+
+    const stopDrawing = useCallback(() => {
+        if (!toolState.isDrawing || !canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        // Finalize the stroke
+        DrawingEngine.drawStroke(ctx, toolState.currentPath, drawingConfig);
+
+        const newState = {
+            ...toolState,
+            isDrawing: false,
+            currentPath: [],
+            startPoint: undefined,
+        };
+        setToolState(newState);
+        onStateChange?.(newState);
+    }, [toolState, drawingConfig, canvas, onStateChange]);
+
+    const drawShape = useCallback((
+        type: 'rectangle' | 'circle' | 'line' | 'arrow',
+        startPoint: { x: number; y: number },
+        endPoint: { x: number; y: number },
+        style: ShapeStyle
+    ) => {
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        DrawingEngine.drawShape(ctx, type, startPoint, endPoint, style as any);
+        onStateChange?.({ toolState, shape: { type, startPoint, endPoint, style } });
+    }, [canvas, onStateChange, toolState]);
+
+    const addText = useCallback((
+        text: string,
+        position: { x: number; y: number },
+        formatting?: Partial<TextFormatting>
+    ) => {
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const finalFormatting = { ...textFormatting, ...formatting };
+        TextEditor.renderText(ctx, text, position, finalFormatting);
+
+        setTextFormatting(finalFormatting);
+        onStateChange?.({ toolState, text: { text, position, formatting: finalFormatting } });
+    }, [textFormatting, canvas, onStateChange, toolState]);
+
+    const setCropArea = useCallback((cropArea: any) => {
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        CropTool.drawCropOverlay(ctx, cropArea, cropConfig);
+        onStateChange?.({ toolState, cropArea });
+    }, [cropConfig, canvas, onStateChange, toolState]);
+
+    const clearCanvas = useCallback(() => {
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        onStateChange?.({ toolState, cleared: true });
+    }, [canvas, onStateChange, toolState]);
+
+    return {
+        // State
+        toolState,
+        drawingConfig,
+        cropConfig,
+        textFormatting,
+
+        // Actions
+        setTool,
+        startDrawing,
+        draw,
+        stopDrawing,
+        drawShape,
+        addText,
+        setCropArea,
+        clearCanvas,
+
+        // Config setters
+        setDrawingConfig,
+        setCropConfig,
+        setTextFormatting,
+    };
+}

package/src/presentation/hooks/useImage.ts

@@ -6,16 +6,47 @@
 
 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,
+    };
+};

package/src/presentation/hooks/useImageAnnotation.ts

@@ -0,0 +1,32 @@
+/**
+ * Presentation - Image Annotation Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageAnnotationService, type ImageAnnotation, type TextOverlay, type DrawingElement, type WatermarkOptions } from '../../infrastructure/services/ImageAnnotationService';
+
+export const useImageAnnotation = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const addTextOverlay = useCallback((uri: string, overlay: TextOverlay) =>
+        execute(() => ImageAnnotationService.addTextOverlay(uri, overlay), 'Failed to add text'), [execute]);
+
+    const addDrawingElements = useCallback((uri: string, elements: DrawingElement[]) =>
+        execute(() => ImageAnnotationService.addDrawingElements(uri, elements), 'Failed to add drawing'), [execute]);
+
+    const addWatermark = useCallback((uri: string, options: WatermarkOptions) =>
+        execute(() => ImageAnnotationService.addWatermark(uri, options), 'Failed to add watermark'), [execute]);
+
+    const applyAnnotation = useCallback((uri: string, annotation: ImageAnnotation) =>
+        execute(() => ImageAnnotationService.applyAnnotation(uri, annotation), 'Failed to apply annotation'), [execute]);
+
+    return {
+        addTextOverlay,
+        addDrawingElements,
+        addWatermark,
+        applyAnnotation,
+        isAnnotating: isProcessing,
+        annotationError: error,
+    };
+};

package/src/presentation/hooks/useImageBatch.ts

@@ -0,0 +1,33 @@
+/**
+ * Presentation - Image Batch Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageBatchService, type BatchOperation, type BatchProcessingOptions } from '../../infrastructure/services/ImageBatchService';
+import type { ImageFilter } from '../../domain/entities/ImageFilterTypes';
+
+export const useImageBatch = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const processBatch = useCallback((operations: BatchOperation[], options?: BatchProcessingOptions) =>
+        execute(() => ImageBatchService.processBatch(operations, options), 'Failed to process batch'), [execute]);
+
+    const resizeBatch = useCallback((uris: string[], width?: number, height?: number, options?: BatchProcessingOptions & { saveOptions?: any }) =>
+        execute(() => ImageBatchService.resizeBatch(uris, width, height, options), 'Failed to resize batch'), [execute]);
+
+    const compressBatch = useCallback((uris: string[], quality?: number, options?: BatchProcessingOptions) =>
+        execute(() => ImageBatchService.compressBatch(uris, quality, options), 'Failed to compress batch'), [execute]);
+
+    const filterBatch = useCallback((uris: string[], filter: ImageFilter, options?: BatchProcessingOptions) =>
+        execute(() => ImageBatchService.filterBatch(uris, filter, options), 'Failed to filter batch'), [execute]);
+
+    return {
+        processBatch,
+        resizeBatch,
+        compressBatch,
+        filterBatch,
+        isBatchProcessing: isProcessing,
+        batchError: error,
+    };
+};