@umituz/react-native-image 1.3.1 → 1.3.2

package/src/presentation/components/FilterSlider.tsx

@@ -1,118 +0,0 @@
-/**
- * Presentation - Filter Slider Component
- * 
- * Slider for adjusting filter parameters
- */
-
-import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import Slider from '@react-native-community/slider';
-
-interface FilterSliderProps {
-    label: string;
-    value: number;
-    onValueChange: (value: number) => void;
-    minimumValue?: number;
-    maximumValue?: number;
-    step?: number;
-    valueFormat?: (value: number) => string;
-    color?: string;
-}
-
-export function FilterSlider({
-    label,
-    value,
-    onValueChange,
-    minimumValue = 0,
-    maximumValue = 100,
-    step = 1,
-    valueFormat,
-    color = '#007bff',
-}: FilterSliderProps) {
-    const formatValue = (val: number): string => {
-        if (valueFormat) return valueFormat(val);
-        return `${Math.round(val)}`;
-    };
-
-    return (
-        <View style={styles.container}>
-            <View style={styles.labelContainer}>
-                <Text style={styles.label}>{label}</Text>
-                <Text style={[styles.value, { color }]}>
-                    {formatValue(value)}
-                </Text>
-            </View>
-
-            <View style={[styles.sliderTrack, { backgroundColor: `${color}20` }]}>
-                <View
-                    style={[
-                        styles.sliderFill,
-                        {
-                            width: `${((value - minimumValue) / (maximumValue - minimumValue)) * 100}%`,
-                            backgroundColor: color
-                        }
-                    ]}
-                />
-                <Slider
-                    style={styles.slider}
-                    minimumValue={minimumValue}
-                    maximumValue={maximumValue}
-                    value={value}
-                    onValueChange={onValueChange}
-                    step={step}
-                    minimumTrackTintColor="transparent"
-                    maximumTrackTintColor="transparent"
-                    thumbTintColor={color}
-                />
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-        gap: 8,
-    },
-    labelContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    label: {
-        fontSize: 14,
-        fontWeight: '500',
-        color: '#333333',
-    },
-    value: {
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    sliderTrack: {
-        height: 6,
-        borderRadius: 3,
-        position: 'relative',
-    },
-    sliderFill: {
-        height: '100%',
-        borderRadius: 3,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-    },
-    slider: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%',
-        opacity: 0,
-    },
-    thumb: {
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        borderWidth: 2,
-        borderColor: '#ffffff',
-    },
-});

package/src/presentation/hooks/useEditorTools.ts

@@ -1,188 +0,0 @@
-/**
- * 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/useImageAnnotation.ts

@@ -1,32 +0,0 @@
-/**
- * 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/useImageEditor.ts

@@ -1,182 +0,0 @@
-/**
- * Presentation - Advanced Image Editor Hook
- */
-
-import { useState, useCallback, useRef } from 'react';
-import type {
-    EditorState,
-    EditorTool,
-    EditorOptions,
-    EditorExportOptions,
-} from '../../domain/entities/EditorTypes';
-import { ImageEditorService } from '../../infrastructure/services/ImageEditorService';
-import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
-
-interface UseEditorConfig {
-    onSave?: (result: ImageManipulationResult) => void | Promise<void>;
-    onCancel?: () => void;
-    options?: EditorOptions;
-}
-
-export function useImageEditor({ onSave, onCancel, options }: UseEditorConfig = {}) {
-    const [editorState, setEditorState] = useState<EditorState | null>(null);
-    const [isProcessing, setIsProcessing] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-    
-    const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
-    const initializeEditor = useCallback(async (uri: string) => {
-        try {
-            setError(null);
-            setIsProcessing(true);
-            
-            // Get image dimensions
-            const dimensions = await getImageDimensions(uri);
-            const state = ImageEditorService.createInitialState(uri, dimensions, options);
-            
-            setEditorState(state);
-            setIsProcessing(false);
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to initialize editor');
-            setIsProcessing(false);
-        }
-    }, [options]);
-
-    const setTool = useCallback((tool: EditorTool) => {
-        if (!editorState) return;
-        
-        const newState = ImageEditorService.setTool(editorState, tool);
-        setEditorState(newState);
-    }, [editorState]);
-
-    const addLayer = useCallback((name?: string) => {
-        if (!editorState) return;
-        
-        const newState = ImageEditorService.addLayer(editorState, name);
-        setEditorState(newState);
-    }, [editorState]);
-
-    const removeLayer = useCallback((layerId: string) => {
-        if (!editorState) return;
-        
-        try {
-            const newState = ImageEditorService.removeLayer(editorState, layerId);
-            setEditorState(newState);
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to remove layer');
-        }
-    }, [editorState]);
-
-    const undo = useCallback(() => {
-        if (!editorState) return;
-        
-        const newState = ImageEditorService.undo(editorState);
-        setEditorState(newState);
-    }, [editorState]);
-
-    const redo = useCallback(() => {
-        if (!editorState) return;
-        
-        const newState = ImageEditorService.redo(editorState);
-        setEditorState(newState);
-    }, [editorState]);
-
-    const exportImage = useCallback(async (exportOptions?: EditorExportOptions) => {
-        if (!editorState || !canvasRef.current) return null;
-        
-        try {
-            setIsProcessing(true);
-            setError(null);
-            
-            // Compose all layers
-            const canvas = canvasRef.current;
-            const result = await composeAndExport(canvas, editorState, exportOptions);
-            
-            if (onSave) {
-                await onSave(result);
-            }
-            
-            setIsProcessing(false);
-            return result;
-        } catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to export image');
-            setIsProcessing(false);
-            return null;
-        }
-    }, [editorState, onSave]);
-
-    const cancel = useCallback(() => {
-        setEditorState(null);
-        setError(null);
-        onCancel?.();
-    }, [onCancel]);
-
-    return {
-        // State
-        editorState,
-        isProcessing,
-        error,
-        canUndo: editorState ? ImageEditorService.canUndo(editorState) : false,
-        canRedo: editorState ? ImageEditorService.canRedo(editorState) : false,
-        
-        // Actions
-        initializeEditor,
-        setTool,
-        addLayer,
-        removeLayer,
-        undo,
-        redo,
-        exportImage,
-        cancel,
-        
-        // Refs
-        canvasRef,
-    };
-}
-
-async function getImageDimensions(uri: string): Promise<{ width: number; height: number }> {
-    return new Promise((resolve) => {
-        const img = new Image();
-        img.onload = () => {
-            resolve({ width: img.width, height: img.height });
-        };
-        img.src = uri;
-    });
-}
-
-async function composeAndExport(
-    canvas: HTMLCanvasElement,
-    state: EditorState,
-    options?: EditorExportOptions
-): Promise<ImageManipulationResult> {
-    const ctx = canvas.getContext('2d');
-    if (!ctx) throw new Error('Failed to get canvas context');
-
-    // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Apply all layers
-    const visibleLayers = ImageEditorService.getVisibleLayers(state);
-    
-    // Background layer (original image)
-    if (visibleLayers.length > 0) {
-        const backgroundLayer = visibleLayers[0];
-        // Would render original image here
-    }
-
-    // Export canvas to blob
-    return new Promise((resolve) => {
-        canvas.toBlob(async (blob) => {
-            if (!blob) throw new Error('Failed to create blob');
-            
-            const url = URL.createObjectURL(blob);
-            resolve({
-                uri: url,
-                width: canvas.width,
-                height: canvas.height,
-            });
-            
-            URL.revokeObjectURL(url);
-        }, options?.format || 'jpeg', options?.quality || 0.9);
-    });
-}

package/src/presentation/hooks/useImageFilter.ts

@@ -1,38 +0,0 @@
-/**
- * Presentation - Image Filter Hook
- */
-
-import { useCallback } from 'react';
-import { useImageOperation } from './useImageOperation';
-import { ImageFilterService } from '../../infrastructure/services/ImageFilterService';
-import type {
-  ImageFilter,
-  ImageColorAdjustment,
-  ImageQualityMetrics,
-  ImageColorPalette,
-} from '../../domain/entities/ImageFilterTypes';
-
-export const useImageFilter = () => {
-    const { isProcessing, error, execute } = useImageOperation();
-
-    const applyFilter = useCallback((uri: string, filter: ImageFilter) =>
-        execute(() => ImageFilterService.applyFilter(uri, filter), 'Failed to apply filter'), [execute]);
-
-    const applyColorAdjustment = useCallback((uri: string, adjustment: ImageColorAdjustment) =>
-        execute(() => ImageFilterService.applyColorAdjustment(uri, adjustment), 'Failed to adjust colors'), [execute]);
-
-    const analyzeQuality = useCallback((uri: string) =>
-        execute(() => ImageFilterService.analyzeQuality(uri), 'Failed to analyze quality'), [execute]);
-
-    const extractColorPalette = useCallback((uri: string, colorCount?: number) =>
-        execute(() => ImageFilterService.extractColorPalette(uri, colorCount), 'Failed to extract colors'), [execute]);
-
-    return {
-        applyFilter,
-        applyColorAdjustment,
-        analyzeQuality,
-        extractColorPalette,
-        isFiltering: isProcessing,
-        filterError: error,
-    };
-};