@umituz/react-native-image 1.1.6 → 1.2.1

package/src/presentation/components/EditorCanvas.tsx

@@ -0,0 +1,135 @@
+/**
+ * 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

@@ -0,0 +1,321 @@
+/**
+ * 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

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