@umituz/react-native-image 1.3.1 → 1.3.3

package/src/presentation/components/EditorCanvas.tsx

@@ -1,135 +0,0 @@
-/**
- * Presentation - Editor Canvas Component
- * 
- * Main canvas component for image editing
- */
-
-import React, { useRef, useEffect, useCallback } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useEditorTools } from '../hooks/useEditorTools';
-
-import { EditorTool } from '../../domain/entities/EditorTypes';
-
-interface EditorCanvasProps {
-    width: number;
-    height: number;
-    onCanvasReady?: (canvas: HTMLCanvasElement) => void;
-    onToolChange?: (tool: EditorTool) => void;
-    onStateChange?: (state: any) => void;
-    backgroundColor?: string;
-}
-
-export function EditorCanvas({
-    width,
-    height,
-    onCanvasReady,
-    onToolChange,
-    onStateChange,
-    backgroundColor = '#ffffff',
-}: EditorCanvasProps) {
-    const canvasRef = useRef<any>(null);
-    const {
-        setTool,
-        startDrawing,
-        draw,
-        stopDrawing,
-        setCropArea,
-    } = useEditorTools({
-        onStateChange,
-        canvas: canvasRef.current,
-    });
-
-    useEffect(() => {
-        if (canvasRef.current && onCanvasReady) {
-            onCanvasReady(canvasRef.current);
-        }
-    }, [canvasRef.current, onCanvasReady]);
-
-    const handleTouchStart = useCallback((event: any) => {
-        const touch = event.nativeEvent.touches[0];
-        const point = { x: touch.pageX, y: touch.pageY };
-        setTool(EditorTool.BRUSH);
-        startDrawing(point);
-        onToolChange?.(EditorTool.BRUSH);
-    }, [setTool, startDrawing, onToolChange]);
-
-    const handleTouchMove = useCallback((event: any) => {
-        const touch = event.nativeEvent.touches[0];
-        const point = { x: touch.pageX, y: touch.pageY };
-        draw(point);
-    }, [draw]);
-
-    const handleTouchEnd = useCallback(() => {
-        stopDrawing();
-    }, [stopDrawing]);
-
-    // For React Native Web, we need to handle this differently
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-
-        // Touch events for mobile
-        canvas.addEventListener('touchstart', handleTouchStart);
-        canvas.addEventListener('touchmove', handleTouchMove);
-        canvas.addEventListener('touchend', handleTouchEnd);
-
-        // Mouse events for desktop
-        const handleMouseDown = (e: MouseEvent) => {
-            const point = { x: e.offsetX, y: e.offsetY };
-            setTool(EditorTool.BRUSH);
-            startDrawing(point);
-            onToolChange?.(EditorTool.BRUSH);
-        };
-
-        const handleMouseMove = (e: MouseEvent) => {
-            const point = { x: e.offsetX, y: e.offsetY };
-            draw(point);
-        };
-
-        const handleMouseUp = () => {
-            stopDrawing();
-        };
-
-        canvas.addEventListener('mousedown', handleMouseDown);
-        canvas.addEventListener('mousemove', handleMouseMove);
-        canvas.addEventListener('mouseup', handleMouseUp);
-
-        return () => {
-            canvas.removeEventListener('touchstart', handleTouchStart);
-            canvas.removeEventListener('touchmove', handleTouchMove);
-            canvas.removeEventListener('touchend', handleTouchEnd);
-            canvas.removeEventListener('mousedown', handleMouseDown);
-            canvas.removeEventListener('mousemove', handleMouseMove);
-            canvas.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [setTool, startDrawing, draw, stopDrawing, onToolChange]);
-
-    // For React Native, we'll need to use a different approach
-    if (typeof window === 'undefined') {
-        return (
-            <View style={[styles.container, { width, height, backgroundColor }]} />
-        );
-    }
-
-    return (
-        <View style={[styles.container, { width, height }]}>
-            <canvas
-                ref={canvasRef}
-                width={width}
-                height={height}
-                style={{
-                    width,
-                    height,
-                    backgroundColor,
-                }}
-            />
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
-    },
-});

package/src/presentation/components/EditorPanel.tsx

@@ -1,321 +0,0 @@
-/**
- * Presentation - Editor Panel Component
- * 
- * Configuration panel for selected tools
- */
-
-import React, { useState, useCallback } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
-import Slider from '@react-native-community/slider';
-import { EditorTool } from '../../domain/entities/EditorTypes';
-
-interface EditorPanelProps {
-    selectedTool: EditorTool;
-    onToolConfigChange?: (config: any) => void;
-    backgroundColor?: string;
-}
-
-export function EditorPanel({ selectedTool, onToolConfigChange, backgroundColor = '#f8f9fa' }: EditorPanelProps) {
-    const [brushSize, setBrushSize] = useState(5);
-    const [brushOpacity, setBrushOpacity] = useState(1);
-    const [brushColor, setBrushColor] = useState('#000000');
-    const [brushStyle, setBrushStyle] = useState('normal');
-
-    const [fontSize, setFontSize] = useState(16);
-    const [textColor, setTextColor] = useState('#000000');
-
-    const [cropAspectRatio, setCropAspectRatio] = useState(0);
-    const [cropGrid, setCropGrid] = useState(true);
-
-    const handleConfigChange = useCallback((config: any) => {
-        onToolConfigChange?.(config);
-    }, [onToolConfigChange]);
-
-    const renderBrushPanel = () => (
-        <View style={styles.panel}>
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Size</Text>
-                <Slider
-                    style={styles.slider}
-                    minimumValue={1}
-                    maximumValue={50}
-                    value={brushSize}
-                    onValueChange={setBrushSize}
-                    onSlidingComplete={() => handleConfigChange({
-                        size: brushSize,
-                        opacity: brushOpacity,
-                        color: brushColor,
-                        style: brushStyle
-                    })}
-                />
-                <Text style={styles.value}>{Math.round(brushSize)}</Text>
-            </View>
-
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Opacity</Text>
-                <Slider
-                    style={styles.slider}
-                    minimumValue={0}
-                    maximumValue={1}
-                    value={brushOpacity}
-                    onValueChange={setBrushOpacity}
-                    onSlidingComplete={() => handleConfigChange({
-                        size: brushSize,
-                        opacity: brushOpacity,
-                        color: brushColor,
-                        style: brushStyle
-                    })}
-                />
-                <Text style={styles.value}>{Math.round(brushOpacity * 100)}%</Text>
-            </View>
-
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Color</Text>
-                <View style={styles.colorRow}>
-                    {['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00'].map(color => (
-                        <TouchableOpacity
-                            key={color}
-                            style={[styles.colorButton, { backgroundColor: color }]}
-                            onPress={() => {
-                                setBrushColor(color);
-                                handleConfigChange({
-                                    size: brushSize,
-                                    opacity: brushOpacity,
-                                    color,
-                                    style: brushStyle
-                                });
-                            }}
-                        />
-                    ))}
-                </View>
-            </View>
-
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Style</Text>
-                <View style={styles.styleRow}>
-                    {['normal', 'marker', 'spray'].map(style => (
-                        <TouchableOpacity
-                            key={style}
-                            style={[styles.styleButton, brushStyle === style && styles.selectedStyle]}
-                            onPress={() => {
-                                setBrushStyle(style);
-                                handleConfigChange({
-                                    size: brushSize,
-                                    opacity: brushOpacity,
-                                    color: brushColor,
-                                    style
-                                });
-                            }}
-                        >
-                            <Text style={styles.styleText}>{style}</Text>
-                        </TouchableOpacity>
-                    ))}
-                </View>
-            </View>
-        </View>
-    );
-
-    const renderTextPanel = () => (
-        <View style={styles.panel}>
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Font Size</Text>
-                <Slider
-                    style={styles.slider}
-                    minimumValue={8}
-                    maximumValue={72}
-                    value={fontSize}
-                    onValueChange={setFontSize}
-                    onSlidingComplete={() => handleConfigChange({ fontSize, color: textColor })}
-                />
-                <Text style={styles.value}>{Math.round(fontSize)}</Text>
-            </View>
-
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Color</Text>
-                <View style={styles.colorRow}>
-                    {['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00'].map(color => (
-                        <TouchableOpacity
-                            key={color}
-                            style={[styles.colorButton, { backgroundColor: color }]}
-                            onPress={() => {
-                                setTextColor(color);
-                                handleConfigChange({ fontSize, color });
-                            }}
-                        />
-                    ))}
-                </View>
-            </View>
-        </View>
-    );
-
-    const renderCropPanel = () => (
-        <View style={styles.panel}>
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Aspect Ratio</Text>
-                <View style={styles.ratioRow}>
-                    {[
-                        { label: 'Free', value: 0 },
-                        { label: '1:1', value: 1 },
-                        { label: '4:3', value: 1.333333333 },
-                        { label: '16:9', value: 1.777777777 },
-                    ].map(ratio => (
-                        <TouchableOpacity
-                            key={ratio.value}
-                            style={[styles.ratioButton, cropAspectRatio === ratio.value && styles.selectedRatio]}
-                            onPress={() => {
-                                setCropAspectRatio(ratio.value);
-                                handleConfigChange({ aspectRatio: ratio.value, grid: cropGrid });
-                            }}
-                        >
-                            <Text style={styles.ratioText}>{ratio.label}</Text>
-                        </TouchableOpacity>
-                    ))}
-                </View>
-            </View>
-
-            <View style={styles.configRow}>
-                <Text style={styles.label}>Show Grid</Text>
-                <TouchableOpacity
-                    style={[styles.toggleButton, cropGrid && styles.selectedToggle]}
-                    onPress={() => {
-                        setCropGrid(!cropGrid);
-                        handleConfigChange({ aspectRatio: cropAspectRatio, grid: !cropGrid });
-                    }}
-                >
-                    <Text style={styles.toggleText}>{cropGrid ? 'ON' : 'OFF'}</Text>
-                </TouchableOpacity>
-            </View>
-        </View>
-    );
-
-    const renderPanel = () => {
-        switch (selectedTool) {
-            case EditorTool.BRUSH:
-            case EditorTool.ERASER:
-                return renderBrushPanel();
-            case EditorTool.TEXT:
-                return renderTextPanel();
-            case EditorTool.CROP:
-                return renderCropPanel();
-            default:
-                return null;
-        }
-    };
-
-    return (
-        <View style={[styles.container, { backgroundColor }]}>
-            {renderPanel()}
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        padding: 16,
-        minHeight: 200,
-        borderTopWidth: 1,
-        borderTopColor: '#e0e0e0',
-    },
-    panel: {
-        gap: 16,
-    },
-    configRow: {
-        gap: 8,
-    },
-    label: {
-        fontSize: 14,
-        fontWeight: '600',
-        color: '#333333',
-        marginBottom: 8,
-    },
-    value: {
-        fontSize: 12,
-        color: '#666666',
-        textAlign: 'center',
-        minWidth: 40,
-    },
-    slider: {
-        flex: 1,
-        height: 40,
-    },
-    colorRow: {
-        flexDirection: 'row',
-        gap: 8,
-        flexWrap: 'wrap',
-    },
-    colorButton: {
-        width: 30,
-        height: 30,
-        borderRadius: 6,
-        borderWidth: 2,
-        borderColor: '#d0d0d0',
-    },
-    styleRow: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    styleButton: {
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        backgroundColor: '#ffffff',
-    },
-    selectedStyle: {
-        backgroundColor: '#007bff',
-        borderColor: '#007bff',
-    },
-    styleText: {
-        fontSize: 12,
-        fontWeight: '500',
-        color: '#333333',
-    },
-    styleTextSelected: {
-        color: '#ffffff',
-    },
-    ratioRow: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    ratioButton: {
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        backgroundColor: '#ffffff',
-    },
-    selectedRatio: {
-        backgroundColor: '#007bff',
-        borderColor: '#007bff',
-    },
-    ratioText: {
-        fontSize: 12,
-        fontWeight: '500',
-        color: '#333333',
-    },
-    ratioTextSelected: {
-        color: '#ffffff',
-    },
-    toggleButton: {
-        paddingVertical: 8,
-        paddingHorizontal: 16,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        backgroundColor: '#ffffff',
-    },
-    selectedToggle: {
-        backgroundColor: '#007bff',
-        borderColor: '#007bff',
-    },
-    toggleText: {
-        fontSize: 12,
-        fontWeight: '500',
-        color: '#333333',
-    },
-    toggleTextSelected: {
-        color: '#ffffff',
-    },
-});

package/src/presentation/components/EditorToolbar.tsx

@@ -1,180 +0,0 @@
-/**
- * Presentation - Editor Toolbar Component
- * 
- * Toolbar with tools and configuration options
- */
-
-import React from 'react';
-import { View, TouchableOpacity, StyleSheet, ScrollView, Text } from 'react-native';
-import { EditorTool, ShapeType } from '../../domain/entities/EditorTypes';
-
-interface EditorToolbarProps {
-    selectedTool: EditorTool;
-    onToolSelect: (tool: EditorTool) => void;
-    onShapeSelect?: (shape: ShapeType) => void;
-    showShapes?: boolean;
-    backgroundColor?: string;
-}
-
-interface ToolButtonProps {
-    tool: EditorTool;
-    icon: string;
-    label: string;
-    isSelected: boolean;
-    onPress: () => void;
-}
-
-function ToolButton({ tool, icon, label, isSelected, onPress }: ToolButtonProps) {
-    return (
-        <TouchableOpacity
-            style={[styles.toolButton, isSelected && styles.selectedTool]}
-            onPress={onPress}
-            activeOpacity={0.7}
-        >
-            <View style={styles.toolIcon}>
-                <Text style={[styles.iconText, isSelected && styles.iconTextSelected]}>{icon}</Text>
-            </View>
-            <Text style={[styles.toolLabel, isSelected && styles.toolLabelSelected]}>{label}</Text>
-        </TouchableOpacity>
-    );
-}
-
-export function EditorToolbar({
-    selectedTool,
-    onToolSelect,
-    onShapeSelect,
-    showShapes = false,
-    backgroundColor = '#f8f9fa',
-}: EditorToolbarProps) {
-    const mainTools = [
-        { tool: EditorTool.MOVE as EditorTool, icon: '↔', label: 'Move' },
-        { tool: EditorTool.BRUSH as EditorTool, icon: '✏', label: 'Brush' },
-        { tool: EditorTool.ERASER as EditorTool, icon: '⌫', label: 'Eraser' },
-        { tool: EditorTool.TEXT as EditorTool, icon: 'T', label: 'Text' },
-        { tool: EditorTool.SHAPE as EditorTool, icon: '◇', label: 'Shape' },
-        { tool: EditorTool.CROP as EditorTool, icon: '✂', label: 'Crop' },
-        { tool: EditorTool.FILTER as EditorTool, icon: '🎨', label: 'Filter' },
-    ];
-
-    const shapeTools = [
-        { shape: ShapeType.RECTANGLE, icon: '▢', label: 'Rectangle' },
-        { shape: ShapeType.CIRCLE, icon: '○', label: 'Circle' },
-        { shape: ShapeType.LINE, icon: '╱', label: 'Line' },
-        { shape: ShapeType.ARROW, icon: '→', label: 'Arrow' },
-        { shape: ShapeType.TRIANGLE, icon: '△', label: 'Triangle' },
-        { shape: ShapeType.STAR, icon: '★', label: 'Star' },
-        { shape: ShapeType.HEART, icon: '♥', label: 'Heart' },
-    ];
-
-    return (
-        <View style={[styles.container, { backgroundColor }]}>
-            <ScrollView 
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.scrollContainer}
-            >
-                <View style={styles.toolGroup}>
-                    {mainTools.map(({ tool, icon, label }) => (
-                        <ToolButton
-                            key={tool}
-                            tool={tool}
-                            icon={icon}
-                            label={label}
-                            isSelected={selectedTool === tool}
-                            onPress={() => onToolSelect(tool)}
-                        />
-                    ))}
-                </View>
-
-                {showShapes && onShapeSelect && (
-                    <View style={[styles.toolGroup, styles.shapeGroup]}>
-                        {shapeTools.map(({ shape, icon, label }) => (
-                            <TouchableOpacity
-                                key={shape}
-                                style={styles.shapeButton}
-                                onPress={() => onShapeSelect(shape)}
-                                activeOpacity={0.7}
-                            >
-                                <View style={styles.toolIcon}>
-                                    <Text style={styles.iconText}>{icon}</Text>
-                                </View>
-                                <Text style={styles.toolLabel}>{label}</Text>
-                            </TouchableOpacity>
-                        ))}
-                    </View>
-                )}
-            </ScrollView>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-        paddingHorizontal: 4,
-        borderBottomWidth: 1,
-        borderBottomColor: '#e0e0e0',
-        backgroundColor: '#f8f9fa',
-    },
-    scrollContainer: {
-        flex: 1,
-    },
-    toolGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 8,
-    },
-    shapeGroup: {
-        borderLeftWidth: 1,
-        borderLeftColor: '#e0e0e0',
-        marginLeft: 16,
-    },
-    toolButton: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 8,
-        paddingHorizontal: 12,
-        marginHorizontal: 2,
-        borderRadius: 8,
-        backgroundColor: '#ffffff',
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        minWidth: 60,
-    },
-    selectedTool: {
-        backgroundColor: '#007bff',
-        borderColor: '#007bff',
-    },
-    shapeButton: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingVertical: 6,
-        paddingHorizontal: 8,
-        marginHorizontal: 2,
-        borderRadius: 6,
-        backgroundColor: '#ffffff',
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        minWidth: 50,
-    },
-    toolIcon: {
-        marginBottom: 2,
-    },
-    iconText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333333',
-    },
-    iconTextSelected: {
-        color: '#ffffff',
-    },
-    toolLabel: {
-        fontSize: 10,
-        fontWeight: '500',
-        color: '#666666',
-        textAlign: 'center',
-    },
-    toolLabelSelected: {
-        color: '#ffffff',
-    },
-});