@umituz/react-native-image 1.1.6 → 1.2.2

package/src/presentation/components/FilterSlider.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 2,
+        elevation: 3,
+    },
+});

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,
+    };
+}